JQuery Callback Never Called

I have the following JS/JQuery snippet:

 function add_item() {
   var item = $("input:text[name='new_item']").val();
   $.post("{{ url_for('add_item') }}",
       {'item' : item},
       function(data) {
         alert(':}');
       });
 }

It performs a simple AJAX request to a Flask webserver and displays an alert box on success (the data always returns a JSON snippet). The AJAX request adds a field to a SQLite database and returns. On my dev box, this request completes very quickly using asynchronous requests. However, on another server this request takes a few seconds (less than the default开发者_开发百科 timeout, though) using asynchronous requests.

Problem: When the request takes a long time to complete using asynchronous requests, the callback is never called. When I change the AJAX settings to be synchronous, the callback is always called.

Thank!

I would try the $.ajax() function over the post one. Seems to have been more maintained - 1.6.2 also seems to have some issues, so try 1.6.1 if you need to: http://api.jquery.com/jQuery.ajax/

Use the error method to find out what error you're getting.

function add_item() {
   var item = $("input:text[name='new_item']").val();
   $.post("{{ url_for('add_item') }}",
       {'item' : item},
       function(data) {
         alert(':}');
       }).error(function(jqXHR, textStatus, errorThrown) { alert("error"); });
 }