JQuery/AJAX: Loading external DIVs using dynamic content
        Posted  
        
            by ticallian
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by ticallian
        
        
        
        Published on 2009-05-28T08:01:24Z
        Indexed on 
            2010/04/03
            14:03 UTC
        
        
        Read the original article
        Hit count: 211
        
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:
- Main page contains a permanent div listing some links containing a parameter.
- Upon click, link passes parameter to external page.
- External page filters recordset against parameter and populates div with results.
- The new div contains a new set of links with new parameters.
- The external div is loaded underneath the main pages first div.
- Process can then be repeated creating a chain of divs under each other.
- 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).
© Stack Overflow or respective owner