How do I set a timeout in load Jquery for this particular example?

Question

How do I set a timeout in load for this very particular example where I pass data with a string ? It looks like the google charts supposed to be loaded from compare_proc.php api are taking long ... because on the click event , I get a blank result and I'm expecting charts to be loaded from compare.php .. I'd appreciate how I can set a timeout for this particular Jquery operation. Thanks !

    jQuery(document).ready(function() {
          $("#opposition a").click(function(e) {
          var first_id  = $(this).attr('id');
          var second_id = $("h1").attr('id');
          $("div#test").load('compare_proc.php','id=' + first_id + '&id2=' + second_id);
          e.preventDefault();
            });
});

Answer 1

jQuery load() method doesn't accept any settings param. So you have to replace it with more low-level method ajax() call - which lets you specify timeout settings for this specific request. One possible way to do it:

$.ajax('compare_proc.php', {
  data: 'id=' + first_id + '&id2=' + second_id,
  timeout: someTimeoutInMs,
  success: function(resp) {
    $('#test').html(resp);
  }
});

The alternative is to leave your code as is, but modify global AJAX settings instead with ajaxSetup() call (prior to calling load ). Note that using this API is strongly discouraged on its very documentation page:

The settings specified here will affect all calls to $.ajax or AJAX-based derivatives such as $.get() . This can cause undesirable behavior since other callers (for example, plugins) may be expecting the normal default settings. For that reason we strongly recommend against using this API. Instead, set the options explicitly in the call or define a simple plugin to do so.

Still, in your case (when only timeout settings are changed) it may be ok to go that way as well.