[jQuery] Using namespaced event bindings for multiple $.ajax() calls.

[tatlar]

Hi there,

I have an application with multiple $.ajax() calls:

(1) When the page loads, an $.ajax() call grabs and parses a JSON
object.
(2) When a link is clicked, an $.ajax() call sends a query to a PHP
page, which returns a JSON object, which is then parsed and displayed.

I have been having problems because both these events have little
spinning icons in different parts of the page to show that an AJAX
query is taking place. I am doing this using the bind() function to a
ajaxSend() namespaced event. I have the (#2) working, by doing the
following:

$("a").bind( 'click.getReport', function() {
    $.ajax({
        type: "GET",
        url: "my.php",
        dataType: "json",
        global: true,
        data: { var1:a, var2:b, var3:c },
       success: function() {},
       error: function() {}
    });
}

and

$("#report").bind("ajaxSend.getReport",function(){
    $(this).html('<h3>Selected report</h3><p><img src="/images/ajax-
loader_gray.gif" /><br/>LOADING...</p>');
});

where #report is the DIV that shows the status on the page.

However, I have not solved the issue of applying a namespaced event
handler to a low-level $.ajax() call that occurs when the page loads
(#1). I have searched online for this, but to no avail - everything
seems to relate to if you are writing you own plugin or just binding
to a click event. I need to somehow bind the $.ajax call to a
namespaced event. The $.ajax() options list does not seem to have an
entry for namespacing, so where do I add it?

Here is the code I currently have:

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "/cachexml/json/stalist.json",
        dataType: "json",
        global: false,
        success: function() {},
        error: function() {}
    });
});

and

$("#dynamicReport").bind("ajaxSend.getList",function(){
    $(this).html('<img src="/images/small_ajax_loader.gif" />');
});

You can see I have the getList class in the binding - but where in the
jQuery $.ajax() code do I reference this? Notice also that I have
global set to true in the 'getReport' namespaced event and set to
false in the 'getList' namespaced event. If I set 'getReport' to
global: false, it no longer works. Clearly I am not doing something
right!

Thanks for any help - I have given up searching online and am getting
desperate!