Question

I am using qtip2 and they seem to use the jQuery ajax.

In IE8 I have no problems. I get the error and the complete

In Fx 6+ I never get the error.

To reproduce:

1. go to http://plungjan.name/eclatooltip/
2. turn on firebug Net or other http sniffer
3. Mouse over the 2nd IPC in the 2nd result – B65D30/08

Result:

• IE: message: “Nothing found”
• Fx: never returns, never executes the error or complete

I have seen this https://gist.github.com/82181

but do not see how to use it in my code.

---

Code used (eclatt.js)

    ajax: {
      dataType: 'jsonp',
      url: url,
      once: false,
      complete: function(jqXHR, textStatus) { // works perfectly in IE
        // alert("complete:"+jqXHR+":"+ textStatus)
      },
      error: function() { // works perfectly in IE8
        alert('Error')
        this.set('content.text', "Nothing found");
      },
      success: function(oData, sTextStatus, oJqXhr) {
        /* Construct list */

        ... 

        this.set('content.text', sHtml);
      }
    },

Answer 1

Apparently the problem is, that JSONP calls are handled by appending <script> tag to the DOM, and network related errors (like 404) doesn’t trigger the handlers (at least it shouldn’t, I guess the IE is trying to be smarter than it really is).

Quote from the jQuery.ajax error handler description:

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

To overcome this issue, there are plugins out there like this one jquery-jsonp that are checking whenever the source of the appended script tag has loaded and are firing appropriate callbacks if not.

Update

Here’s there source for the ajax plugin for qtip2 https://github.com/Craga89/qTip2/blob/master/src/ajax/ajax.js. You can most probably can replace the

// Error handler
function errorHandler(xh, status, error){ api.set('content.text', status + ': ' + error); }
// Setup $.ajax option object and process the request
$.ajax( $.extend({ success: successHandler, error: errorHandler, context: api }, opts, { url: url, complete: after }) );

With this:

if (opts.dataType && opts.dataType.toLowerCase() == 'jsonp') {
    // Error handler
    function jsonpErrorHandler(xOptions, status) {api.set('content.text', 'error: ' + status);}
    // Setup using jsonp
    $.jsonp( $.extend({ success: successHandler, error: jsonpErrorHandler, context: api }, opts, { url: url, complete: after }) );
} else {
    // Error handler
    function errorHandler(xh, status, error){ api.set('content.text', status + ': ' + error); }
    // Setup $.ajax option object and process the request
    $.ajax( $.extend({ success: successHandler, error: errorHandler, context: api }, opts, { url: url, complete: after }) );
}

It should work provided you have embedded the jquery-jsonp plugin.