jQuery.ajax success callback function not executed

Question

I have a JavaScript Ajax call (jQuery.ajax), that does not execute the success callback function.

$.ajax({
        url: target,
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        // type: 'GET',
        dataType: 'jsonp',
        error: function (xhr, status) {
            alert(status);
        },
        success: function (result) {
            alert("Callback done!");
            // grid.dataBind(result.results);
            // grid.dataBind(result);
        }
    });

I see in firebug, that the request is posted and the correct result in terms of the json is returned as expected. What is wrong?

Answer 1

Jquery Ajax call to a servlet with mutliple parameters was not calling success or error even though the call was succesfull. It was bound to a submit button. Changing it returned a success event.

Here is my reference code in case someone needs it for reference.

$(document).ready( function () {    
    $("#buttonSave").click(function() {
        alert('incustsave');
        var name = $("#custname").val();
        var gstnumber = $("#gstnumber").val();
        var custbizname = $("#custbizname").val();
        var email = $("#email").val();
        var address = $("#address").val();
        var street = $("#street").val();
        var city = $("#city").val();
        var zip = $("#zip").val();
        var phone = $("#phone").val();
        var country = $("#ctry").val();

        var inputArray = [name, gstnumber, custbizname, email, address, street, city, zip, phone, country];
        var Success = false;
        alert('added_button_and_dt');
        $.ajax({  
            type: "POST",
            url: "RegisterCustomerServlet",               
            data: {'input': inputArray},
            dataType: 'json',

            success: function (data) {
                alert('sucess');
            },
            error: function (e) {
                alert('error');
            }
        });
    });
});

HTML with Bootstrap3 (Button reference)

<!-- Button -->
<div class='wrapper text-center'>
    <div class="btn-group">
        <button type="button"  id="buttonSave" class="btn btn-primary">Save</button>
    </div>
</div>

Servlet Reference

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    HashMap<String,String>  map = new HashMap<String,String>();
    CustomerDAO custinfo = new CustomerDAO();
    Gson gson = new Gson();
    CustomerVO vo = new CustomerVO();

    String[] myJsonData = request.getParameterValues("input[]");
    logger.info("in custregisterjsoninput" + myJsonData[0] + myJsonData[2] + myJsonData[3] + myJsonData[4]);

    map.put("custname", myJsonData[0]);
    map.put("getsnumber", myJsonData[1]);
    map.put("custbizname", myJsonData[2]);

    map.put("email", myJsonData[3]);
    map.put("address", myJsonData[4]);
    map.put("street", myJsonData[5]);
    map.put("city", myJsonData[6]);          
    map.put("pincode", myJsonData[7]);
    map.put("mainphone", myJsonData[8]);
    map.put("country", myJsonData[9]);

    try {
        vo = custinfo.saveCustomerInfo(map);
    } catch (Exception e) {
        logger.info("aftercall"+e.getMessage());
        throw new ServletException(e);
    }  
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(Utility.convertPOJOtoJason(vo));
}

Answer 2

Your $.ajax call with dataType: 'jsonp' could work in these scenarios:

1. You are calling a url on the same domain of your page.
2. You are calling a url out of your domain of your page that supports callback

If you are out of these two cases, you can't do anything since you can’t make cross site XmlHttpRequest calls.

Answer 3

For many times I have encountered similar problems and most of the time the reason was a malformed json. Try getting the result as text data type to see whether this is your problem.

Also, I'd like to ask if you're using a parameter like "&jsoncallback=?" in your url, since your data type is jsonp instead of simple json.

Answer 4

This just happened to one of my co-workers, so I figure I'd add my solution as well.

We could see the ajax call being made, and could see the proper response coming back in Fiddler (status 200 / completely valid JSON), but it would never hit the error, success, or complete callbacks. Adding async: false to the ajax call would make it work, but that wasn't really a proper solution. Additionally placing an alert directly after the ajax call (without the async: false), and waiting a few seconds once the alert was shown, would somehow force the ajax callbacks to work . Very odd indeed...

Turns out, the function with the ajax call was bound to an input of type="submit", which was the source of this odd behavior. Changing the input to type="button" corrected it.

Answer 5

You need to have set async property to false.

$.ajax({
        url: target,
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        // type: 'GET',
        dataType: 'jsonp',
        async = false,
        error: function (xhr, status) {
            alert(status);
        },
        success: function (result) {
            alert("Callback done!");
            // grid.dataBind(result.results);
            // grid.dataBind(result);
        }
    });

Answer 6

This is an old question, but I suspect people still hit this.

I fought this for some time, and eventually gave up and moved to the deferred model. (I've been using jQuery long enough that I was in the "old" way habits still...) As soon as I moved to a deferred model, things started to work. I have no idea why the old way didn't work, but no longer care. (This question pre-dates the new model.)

cf. https://stackoverflow.com/a/14754681/199172