Using ajax to load paired html & js files and keeping order

Question

I have a page that uses ajax to load in sections of a page. Each section consists of a html files and a javascript file that defines events for just that bit of html.

What I am trying to do is figure a method of managing the file loading that can bind keep the two files bound together.

Here is pseudo code of how I am attempting to make it work now but I dont know if there is a more organized way.

pseudo code: (using jquery)

1. Cycle through list of html/js file pairs that need loaded.
2. Add an object to the an array that uniquly identifies the pair of files. This object will eventually hold the container for the html and the js object
3. Start loading of html. When html returns, append content to the page and record the id in the array object
   • This is easy because I use the content for the jquery get callback directly.
4. Start loading the js. When the file loads, the js executes and updates the object in the array with a reference to the files return value.
   • *This is the hard part. jQuery.getScript() automatically executes the script when it completes, so I cant use the return value because its already created. Since I cant use the ajax response I have to have the js file already know the object it will be adding itself to

So, I was hoping there was some js lib already available that does some databinding between pairs of html & js.

Also, I wasnt sure how to structure the object manager. Each object in the js files are going to have the same events bound that get called when you move to that section.

Sorry this is kind of a loaded question.

Answer 1

I think my AJAX library might help:

http://depressedpress.com/javascript-extensions/dp_ajax/

One of the most useful features is the ability to define a single "request" (which fires a single handler) with multiple "calls" (individual HTTP calls). You can thus define a single request to contain both the call for the script and a second call for the HTML. When both calls are complete the defined handler will be called and get the results passed to it in the correct order.

The request pool used to process the requests can be instantiated with multiple background objects (allowing multi-threading) so that while the requests get all your data before calling your handlers they're not forced to waste time by single threading (although you can do that as well if you like).

Here's a simple example of how it might be used:

    // The handler function
function AddUp(Nums) { alert(Nums[1] + Nums[2] + Nums[3]) };

    // Create the pool
myPool = DP_AJAX.createPool();

    // Create the request
myRequest = DP_AJAX.createRequest(AddUp);

    // Add the calls to the request
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [5,10]);
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [4,6]);
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [7,13]);

    // Add the request to the pool
myPool.addRequest(myRequest);

"myRequest" defines the handler. The addCall() methods add multiple calls. Once all three are results will be sent to the handler as an array of three responses (in the same order that the calls were added).

You could calls your files in pairs or even call them all bundled into a single request - up to you.

Hope this helps!