JQuery Success/Failure Callback is not called

Question

I am new at jQuery. What i need to achieve in jQuery is call a web service which is written in Python and show appropriate message according to the message i receive in return. Below is the jQuery code i have written so far.

$(document).ready(function(){
$("#loginForm").submit( function () { 
    data = $(this).serialize()
    var serviceUrl = MyServiceUrl;
    $.ajax({
              type: "POST",
              url: serviceUrl,
              data: data,
              success:loginSuccess,
              failure: loginFailure
    });   
    return false;   
});
});

function loginSuccess(data){
    alert(data.status);
}
function loginFailure(data){
    alert(data.status);
}

On my HTML form when i submit the form my call goes to my web service. But after recieving the response it does not go to my success or failure callback function as specified above. Below is the python code of the web service which is returning the status. It can either return case 1 or case 2

Case 1:

to_json = {"status": "success"}
return HttpResponse(simplejson.dumps(to_json), mimetype="application/json")

Case 2:

to_json = {"status": "error","message": str(e)}
return HttpResponseBadRequest(simplejson.dumps(to_json), mimetype="application/json")

hmm, should you call something like: success:loginSuccess(data)? — brunozrk, Feb 28 '14 at 11:07
If i do that it calls the Success and failure function before sending the request to the webservice.. But does not go to success or failure once the response has been received.. — planet260, Feb 28 '14 at 11:13

score 1 · Answer 1 · answered Feb 28 '14 at 11:16

1

Remove submit form, use ajax only

$(document).ready(function(){
   $("#your_button_id").click( function () { 
       data = $("#loginForm").serialize()
       var serviceUrl = MyServiceUrl;
       $.ajax({
          type: "POST",
          url: serviceUrl,
          data: data,
          success:loginSuccess(),
          failure: loginFailure()
       });   
       return false;   
   });
});

answered Feb 28 '14 at 11:16

brunozrk

773
1
7
14

When you use "$("#loginForm").submit", it means your form was submited, therefore, the ajax call is used after it, you should change your button to type non-submit – brunozrk Feb 28 '14 at 11:30
what happen when you use my answer? – brunozrk Feb 28 '14 at 11:50
I am now trying to debug the code using firebug.. I am getting following exception XMLHttpRequest cannot load ''. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – planet260 Feb 28 '14 at 11:53
try use dataType: 'json' – brunozrk Feb 28 '14 at 11:58
or check this link: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w – brunozrk Feb 28 '14 at 11:59

score 0 · Accepted Answer · answered Mar 04 '14 at 12:43

This issue was due to Cross-Origin XMLHttpRequest

Below is my solution.

When returning from python i added the following headers

to_json = {"status": "success"}
response = HttpResponse(simplejson.dumps(to_json), mimetype="application/json")
response['Access-Control-Allow-Origin'] = "*"
return response

The same was with HttpResponseBadRequest. So the final jQuery code is as below.

$(document).ready(function(){
$("#loginForm").submit( function () { 
    data = $(this).serialize()
    var serviceUrl = MyServiceUrl;
    $.ajax({
          type: "POST",
          url: serviceUrl,
          data: data,
          success:loginSuccess,
          error: loginFailure
    });   
    return false;   
 });
});

function loginSuccess(data){
    alert(data.status);
}
function loginFailure(data){
    alert(data.status);
}

I hope it really helps someone..Cheers

JQuery Success/Failure Callback is not called

2 Answers2