StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery/AJAX: Loading external DIVs using dynamic content
text
Body
copied!<p>I need to create a page that will load divs from an external page using Jquery and AJAX.</p> <p>I have come across a few good tutorials, but they are all based on static content, my links and content are generated by PHP.</p> <p>The main tutorial I am basing my code on is from:<br/> <a href="http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/" rel="nofollow noreferrer" title="http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/">http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/</a></p> <p>The exact function i need is as follows:</p> <ol> <li>Main page contains a permanent div listing some links containing a parameter.</li> <li>Upon click, link passes parameter to external page.</li> <li>External page filters recordset against parameter and populates div with results.</li> <li>The new div contains a new set of links with new parameters.</li> <li>The external div is loaded underneath the main pages first div.</li> <li>Process can then be repeated creating a chain of divs under each other.</li> <li>The last div in the chain will then direct to a new page collating all the previously used querystrings.</li> </ol> <p>I can handle all of the PHP work with populating the divs on the main and external pages.<br/> It's the JQuery and AJAX part i'm struggling with.</p> <pre><code>$(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; } }); </code></pre> <p>The problem I am having is getting JQuery to pass the dynamically generated parameters to the external page and then retrieve the new div.<br/> I can currently only do this with static links (As above).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload