Geek Answers Handbook

JQuery / AJAX: loading external DIVs using dynamic content

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

I came across some good tutorials, but they are all based on static content, my links and content are generated by PHP.

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

The exact function I need is as follows:

  • The main page contains a permanent list containing some links containing the parameter.
  • After clicking, the link passes the parameter to the external page.
  • The external page filters the entries by parameter and fills the div with the results.
  • The new div contains a new set of links with new parameters.
  • The outer div is loaded under the main pages of the first div.
  • Then the process can be repeated, creating a chain of divs under each other.
  • The last div in the chain will then direct to a new page, matching all previously used queries.

I can handle all the work of PHP with filling the div on the main and external pages.
This is the part of jQuery and AJAX that I'm afraid of.

$(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 ran into is getting JQuery to pass dynamically generated parameters to an external page and then fetch a new div.
Currently, I can only do this with static links (as mentioned above).

+4
source share
6 answers

I'm not sure that you have already decided this, but I am surprised that no one has mentioned the use of the ajax () function.

This will allow you to define the type of request 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 loading. Obviously, you will have to work a bit with the code (basically, which is part of the success function), but this should give you a good starting point.

+6
source

You can use an optional data argument to pass parameters to a GET request. Read the documentation. This is much better than creating the URL yourself. You can, of course, add dynamically generated data to the parameter list.

+2
source 
 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, the server side of the script should return the internal content of your div. Of course, you can return XML-serialized data or JS for evaluation, etc ... it depends on the task. The example is simplified, so expand it to suit your needs.

0
source

This AJAX content download tutorial is good:

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

In particular, the part explaining how to read the results with Firebug.

0
source

Use this:

 function GetDiv(id) { $.ajax({ type: "GET", url: "external.php" dataType: 'html', data:id, success: function(html){ $("#container").append(html); }, }); }
0
source 
 var params = { param: 1, otherParam: 2 }; content.load("external.php #section_div01", params);

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

-1
source

More articles:


All Articles