JQuery/AJAX: Loading external DIVs using dynamic content

Question

I need to create a page that will load divs from an external page using Jquery and AJAX.

I have come across a few good tutorials, but they are all based on static content, my links and content are generated by PHP.

The main tutorial I am basing my code on is from:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

The exact function i need is as follows:

1. Main page contains a permanent div listing some links containing a parameter.
2. Upon click, link passes parameter to external page.
3. External page filters recordset against parameter and populates div with results.
4. The new div contains a new set of links with new parameters.
5. The external div is loaded underneath the main pages first div.
6. Process can then be repeated creating a chain of divs under each other.
7. The last div in the chain will then direct to a new page collating all the previously used querystrings.

I can handle all of the PHP work with populating the divs on the main and external pages.
It's the JQuery and AJAX part i'm struggling with.

$(document).ready(function(){
    var sections = $('a[id^=link_]'); // Link that passes parameter to external page
    var content = $('div[id^=content_]'); // Where external div is loaded to

    sections.click(function(){ 
     //load selected section
     switch(this.id){
      case "div01":
       content.load("external.php?param=1 #section_div01");
       break;
      case "div02":
       content.load("external.php?param=2 #section_div02");
       break;   
     }
});

The problem I am having is getting JQuery to pass the dynamically generated parameters to the external page and then retrieve the new div.
I can currently only do this with static links (As above).

Answer 1

You can use the optional data argument to pass parameters to the GET request. Read the documentation. This is far better than building the URL yourself. You can of course add dynamic generated data to the parameters list.

Answer 2

var params = {
    param: 1,
    otherParam: 2
};
content.load("external.php #section_div01", params);

will load "external.php?param=1&otherParam=2"

Answer 3

function loadDiv(evt)
{
    // these params will be accessible in php-script as $_POST['varname'];
    var params = {name:'myDiv', var1:123, var2:'qwer'};
    $.post('http://host/divscript.php', params, onLoadDiv);
}
function onLoadDiv(data)
{
   $('#myContainer').html(data);
}
$(document).ready(function() { 
    $('#divButton').click(loadDiv); 
});

In this example server-side script should return inner content of your div. Sure you can return XML-serialized data or JS to eval etc... it depends on task. The example is simplified, so extend it to fit your needs.

Answer 4

I'm not sure if you've solved this already, but I'm surprised no one's mentioned to use the ajax() function.

This would allow you to define the request type as GET:

function loadContent(id) {

    $.ajax({
     type: "GET",
     url: "external.php",
     dataType: 'html',
     data: {param: id},

     success: function(html){
                 $("#container").html(html);
     },

     error: function(){
     },

     complete: function(){
     }
    });

}

Just call this function instead of using load. Obviously you'll have to tinker with the code (mainly what goes in the success function) a little, but this should give you a good starting point.

Answer 5

This tutorial on loading AJAX content is good:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Especially the part explaining how to read the results with Firebug.