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?

Answer 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.

Answer 2

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