Retrieving HTML through JQuery

[9three]

Hi,

 

I currently have a section where I just do a while loop and load all rows within there. What I would like to do now is load that while loop only when the user clicks on the link(through AJAX). Is there a function and/or tutorial anyone knows about that could accomplish this?

 

I've never passed this type of information through AJAX.

[trq]

Your question is pretty vague I'm afraid.

[9three]

hm..

 

Basically this is what I have:

 

<div class="section">
<?php 
while ($row = $objStatement->fetch()) {
  echo '<div class="1">'.$row['id'].'</div> <div class="2">'.$row['name'].'</div> <div class="3">'.$row['ph'].'</div>';
}
?>
</div>

 

Now this loads all my data in that order.

 

What I want to do now is do now is load that loop when the user clicks on a link that pertains to that section instead of loading when the user gets to the page.

 

Is that better?

 

EDIT:

 

So instead do this:

<a href="#" onclick="LoadSection1();">Section1</a>
<div class="section">
//HTML/While Loop would load through here
</div>

[trq]

Ok, then your php might look something like....

 

// make query

$array = array();
while ($row = $objStatement->fetch()) {
  $array[] = $row;
}
echo json_encode($array);

 

Your html like....

 

<a href="#" id="section1">Section1</a>
<div class="section">
</div>

 

And your js something like...

 

$(document).ready(function() {
    $("#section1").click(function() {
        $.ajax({
            type: "GET",
            url: 'yourphppage.php',
            dataType: "json",
            success: function(d) {
                var html = '';
                for (i=0;i<=d.length;i++) {
                    html += '<div class="1">'+d[i].id+'</div> <div class="2">'+d[i].name+'</div> <div class="3">'+d[i].ph+'</div>';
                }
            }
            $("section").html(html)
    });
});

 

Take a look at the man page for jQuery's ajax object if you need more details.

[9three]

thanks!