This thread helped me solve the problem, in particular Mike Alsups awesome comment on adding new properties to the .ajax() method. Very nice Mike!
http://groups.google.com/group/jquery-en/browse_thread/thread/f6b723f6119f1ada/9ceea36b6e0f0e06?hl=en&lnk=gst&q=multiple+ajax+calls#9ceea36b6e0f0e06 On Apr 16, 3:10 pm, tatlar <robertlnew...@gmail.com> wrote: > 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!
