Jquery Block ui only show on ajaxStart of a function

Question

I am currently using Blockui to block the page and show a loading gif when an ajax function is being performed. See here:

$(document).ready(function() { 
            //shows loading screen whilst posting via ajax
    $().ajaxStart(function() { 
        $.blockUI({ message: '<h1><img src="../images/layout/busy.gif" /> Just a moment...</h1>' });  });           
    $().ajaxStop($.unblockUI);                     

//Load table from table.php
//Timestamp resolves IE caching issue
var tsTimeStamp= new Date().getTime();
$.get('table.php',
      {action: "get", time: tsTimeStamp},
      function(data){
        $('#customertable').html(data).slideDown('slow');
      });
return true;                           

});

My problem is that this blocks the page everytime an ajax function is perform. How would I make it appear only when certain functions are being performed

Answer 1

You'll have to take the blocking/unblocking out of the generic ajaxStart and ajaxStop events and block/unblock on a case-by-case basis:

$.blockUI({ message: '<h1><img src="../images/layout/busy.gif" /> Just a moment...</h1>' });
$.get('table.php',
      {action: "get", time: tsTimeStamp},
      function(data){
        $.unblockUI();
        $('#customertable').html(data).slideDown('slow');
      });