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

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.