AJAX Request Error

Question

I get an error on submitting an ajax request.

Here is the jQuery/ajax

  <script type="text/javascript">
      $(function () {
          $('#BookButton').click(function (event) {
              var form = $('#Form1');
              $.ajax({
                  type: form.attr('method'),
                  url: form.attr('action'),
                  data: $("#BookRoom :input").serialize()
              }).done(function (data) {
                  $('#BookRoom').modal('hide');
                  if (data === ResponseType.Success) {
                      $('#SuccessMsg').text('Meeting Booked');
                      $('#SuccessMessage').modal('show');
                  }
                  else if (data === ResponseType.Reject) {
                      $('#SuccessMsg').text('There are conflicts');
                      $('#SuccessMessage').modal('show');
                  }
                  else if (data === ResponseType.Reject) {
                      // Notify user: It is your fault
                  }
                  else {
                      $('#SuccessMsg').text('Test');
                      $('#SuccessMessage').modal('show');
                  }


                  // Optionally alert the user of success here...


                  setTimeout(function () { $('#SuccessMessage').modal('hide'); }, 3000);
              }).fail(function () {
                  // Optionally alert the user of an error here...
                  alert("Error submitting AJAX request");
              });
              event.preventDefault(); // Prevent the form from submitting via the browser.
          });
      });

Summary of C#

            public enum ReponseType : int
            {
            Success = 0,
            Reject = 1

              }



            if (ITMtgfapts.Items.Count > 0) // If there is more than one item
            {


                Response.AddHeader("Content-type", "application/json");
                Response.ContentType = "application/json";
                Response.Write(JsonConvert.SerializeObject(ReponseType.Reject));
                Response.End();
            }


            else
            {

                //Success
                appointment.RequiredAttendees.Add(roomEmail);



                appointment.Save(SendInvitationsMode.SendToAllAndSaveCopy);
                Response.AddHeader("Content-type", "application/json");
                Response.ContentType = "application/json";
                Response.Write(JsonConvert.SerializeObject(ReponseType.Success));
                Response.End();


            }

Its worth noting that this is a WebForms application. When I submit the form I get the:

  alert("Error submitting AJAX request");

Error message. HOWEVER the C# still executes (i.e. it books a meeting room)

Any ideas?

Thank you

EDIT:

Fiddler Response

JSON:

ResponseType=0

RAW:

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 14 Jan 2014 14:58:54 GMT
Content-Length: 36

{"ResponseType":0}{"ResponseType":1}

EDIT 2:

Got it working so this is now the response:

  HTTP/1.1 200 OK
  Cache-Control: private
  Content-Type: application/json; charset=utf-8
  Server: Microsoft-IIS/7.5
  X-AspNet-Version: 4.0.30319
  X-Powered-By: ASP.NET
  Date: Tue, 14 Jan 2014 15:15:28 GMT
  Content-Length: 18

  {"ResponseType":0}

I removed the code from the catch { } because when outputting the page as JSON it messed it up and caused it to catch.

Now it is always returning

  else {
                  $('#SuccessMsg').text('Test');
                  $('#SuccessMessage').modal('show');
              }

Rather than success

Ideas?

The fail function should receive a couple of parameters where you can check for the actual error message. Check here: http://api.jquery.com/jquery.ajax/ I'm guessing since you are using WebForms there's still something in the Response before you add the json and that's why it is failing. — willvv, Jan 14 '14 at 14:39
You're getting two json strings written to the response for some reason.. `{"ResponseType":0}{"ResponseType":1}` isn't valid json — Jason P, Jan 14 '14 at 15:06
@JasonP it was the catch that was causing problems - I am now not picking up the right error/success message (See edit) — Corbin Spicer, Jan 14 '14 at 15:22
Got it working, changing from complete -> done on the ajax request fixed this. Thank you for everyones contributions on this! — Corbin Spicer, Jan 14 '14 at 15:38

score 1 · Accepted Answer · answered Jan 14 '14 at 14:45

1

I just ran a test using the JavascriptSerializer class to serialize an enum value, and I received a string containing only the integer representation of the enum value (3 in my case). I think to get a valid json string, you need to have an object. Try something like this:

JsonConvert.SerializeObject(new { ResponseType = ReponseType.Success })

Then in javascript:

data.ResponseType

answered Jan 14 '14 at 14:45

Jason P

26,984
3
31
45

1

Please edit your question and include the actual raw response from the server. You can get that using the program Fiddler. – Jason P Jan 14 '14 at 14:54
@CorbinSpicer On second thought, since the request is successful, it'd be easier to just look at the response on the network tab of your browser's dev tools. – Jason P Jan 14 '14 at 15:00
data.ResponseType is coming back as undefined – Corbin Spicer Jan 14 '14 at 15:34

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

change your fail method to accept the three parameters defined in the jquery api. I'm guessing there is some sort of serialization error on return.

.fail(function (jqXHR, textStatus, errorThrown ) {
  // Optionally alert the user of an error here...
  alert(textStatus);
  alert(errorThrown); // this line should give you the error happening
  alert("Error submitting AJAX request");
});

EDIT 1: You might also check this question, it seems this guy was having a similar issue, return was successful, but still fired off the error, appears it was the version of jQuery he was using: jQuery returning "parsererror" for ajax request

EDIT 2: try adding dataType: 'json', as an option to your ajax constructor. The json is strictly parsed, but you're also not telling the ajax method how to even parse the data. You haven't provided a dataType so it's trying to guess what your returned datatype is.

edited May 23 '17 at 11:49

Community

1
1

answered Jan 14 '14 at 14:50

Anthony Shaw

8,146
4
44
62

that makes me think the data being returned isn't in the format it's expecting, json parsing as xml, xml as json, etc... – Anthony Shaw Jan 14 '14 at 14:53
added a link to my answer, to a question w/ similar issue with requestparseerror, even on a successful response – Anthony Shaw Jan 14 '14 at 14:55
I've changed my code to complete instead of done. I now get the correct message I was expecting AND the requestresponseerror message – Corbin Spicer Jan 14 '14 at 15:02
1

try adding dataType: 'json' to your ajax constructor, I'm thinking the ajax method "Intelligent guess" isn't so intelligent in this case, and doesn't know what dataType you're returning. – Anthony Shaw Jan 14 '14 at 15:13

AJAX Request Error

2 Answers2