So' I've Googled this all over and nothing I see seems to really apply to me (or works for that matter)

Let me preface this by saying, using "traditional" AJAX methods this doesn't seem to phase me but using jQuery is throwing me

So basically I have a page that monitors stats all over our facility.

I have three main type of stats (a,b,c) each using its own back-end php (a.php, b.php, c.php) file that I need to call via jQuery/AJAX

So for arguments sake lets say I have 30 of each (a,b,c) all over my page

Right now I reload all these values by simply reloading the entire page, but there's so much data it takes a full minute to reload which isn't ideal (hence the choice to load via AJAX)

So I've seen several AJAX methods for jQuery that seem to be hardcoded to a certain DOM ID.

Now in traditional JS I'd simple put something like (roughly)

<div id="unqiue_1"><script>updateValues(this.id,'a','someotherbits')</script></div>

and from that one "updateVlaues" it will dynamically know what backend to call and what ID it needs to update and so forth

But with jQuery I'm seemingly not finding an elegant way to replicate this without duplicating the "updateValues" method/function which seems wasteful and crawling the DOM to determine what needs updating.

Soooo yeah, if anyone has some pointers I'd be greatly appreciative =)

Thanks =)

    You can't define an event for the backends to register their update methods to when they load, and then just fire that event every "x" seconds?

      My disconnect comes from my overall lack of knowledge of jQuery in general.

      Now, my goal here is to not have to "seed" a script call in EVERY div in the page but rather create three or one universal function in jquery that will grab every instance that needs updating and use some calls to pull the unique data to make the calls

      e.g i've stated I have three data types, A,B and C

      Respectively each of these are a container with a class of A,B,C

      <div class="a" id="unique_id"></div>

      so i'd basically want to grab every class "a" grab the "id" and some other bits of data and then hand it off to the ajax handler in jquery and push the data back BUT not in a way thats sequential (read: a procedural for loop) but naturally

      i have some stats where the data will come back instantly but others that must traverse networks and calculate, so i dont want that ajax call in a loop to hold up the other calls

      but how do i do that in jQuery without making separate instantiations / dupes of the same function method for EACH item on my page

        scrupul0us wrote:

        so i dont want that ajax call in a loop to hold up the other calls

        Well it won't unless you explicitly tell it to (using the jQuery.ajax async setting) - so don't tell it to.

          Ok that seems reasonable =)

          I'm gunna putz around with a few things and see how it goes.

          Thanks as always for being a soundboard, just having someone to chat ideas through helps tremendously.

            I would try something like:

            $(document).ready(function()
{
	$('div.reload').each(function()
	{
		$.post($(this).attr('id') + '.php', function(data)
		{
			//Handle the JSON response
		}, 'json');
	});
});

            Assign all the divs that are to be reloaded a common class, and give each one a unique ID that you can then use to call the appropriate PHP script. Or if this would require the IDs to repeat you can give the divs a second class and then test for that to determine which PHP script to call. jQuery handles all this wonderfully.

              @:

              that's essentially EXACTLY what I did

              i created three functions to handle each different stat type and with a little massaging and research I've got it basically working great now =)

              Thanks guys

                Just glancing at the jQuery API documentation now, I notice that it's changed a bit since I last used it. I disliked the event mechanism at the time, but it looks like it's a bit cleaner now.

                $('body').on('reloadTimeout', 'div.reload', function(event){[get information about current div element via $(this), do Ajax, ???, profit!]});
window.setInterval(function(){ body.trigger('reloadTimeout'); }, 30*1000);

                I guess from what I've gathered looking at the docs. To be honest, last time I had to do periodic Ajax updates, it meant using Ajax.PeriodicalUpdater.

                  Weedpacket;11006643 wrote:

                  Just glancing at the jQuery API documentation now, I notice that it's changed a bit since I last used it. I disliked the event mechanism at the time, but it looks like it's a bit cleaner now.

                  $('body').on('reloadTimeout', 'div.reload', function(event){[get information about current div element via $(this), do Ajax, ???, profit!]});
window.setInterval(function(){ body.trigger('reloadTimeout'); }, 30*1000);

                  I guess from what I've gathered looking at the docs. To be honest, last time I had to do periodic Ajax updates, it meant using Ajax.PeriodicalUpdater.

                  Yeah they simplified all their event handling into .on() and .off() functions as of 1.7, which cleans things up nicely and simplifies everything.

                    Write a Reply...