Error handling for Remote Autocomplete is not working

Question

I have this jquery autocomplete code.Everything works fine data is loaded etc.Success is working.But when i have error...error handling is not working in below code.

 $("#autocomplete").on("filterablebeforefilter", function (e, data) {

      if (value && value.length > 0) {
        //$ul.listview("refresh");
             $('.ui-responsive-panel').enhanceWithin();
             $.ajax({
                       type: "GET",
                       url: "http://domain.com/food.php",
                       dataType: "jsonp",
                       crossDomain: true,
                       data: $(this).serialize(),
                       success: function (data) {
                            alert("success");
                       },
                       error: function () {
                             alert("an error occurred!");
                       },
                       beforeSend: function () {
                            // This callback function will trigger before data is sent
                       },
                       complete: function () {
                            setTimeout(function () {}, 1);
                       }
                     })
                     .then(function (response) {
                             $.each(response, function (i, val) {
                                 //do something with data
                             });
                         }
                 });

Answer 1

As the jQuery doc states for jQuery.ajax error handler functions:

Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

It is related to the technique of JSONP where the actual request is injected as a <script> tag. So a standard jqXHR object including an ajax error event isn't available. There's some plugin as workaround available. This plugin and solutions for dealing with network timeouts are discussed e.g. in this and this stackoverflow questions.

Answer 2

Try handling the error in the then (or use done() and fail() )

  $.ajax({
           //... code omitted ...
                 })
                 .then(
                     function (response) {
                         $.each(response, function (i, val) {
                             //do something with data
                         });
                     },
                     function (error) {
                         //do something with error
                     }
             });