CODEWITHSUNDEEP
phpjquery
Jean-Dominick da Silva
Jean-Dominick da Silva

Reputation: 27

Load div from another page within an AJAX loaded page

I'm using jQuery address to enable loading specific content from other pages and to change the URL in the address bar.

I'm working on a little Social Network alike website, so I'm reading out the IDs of the posts table of my MySQL database via PHP. I want to use the possibilities of jQuery and AJAX to read everything out dynamically.

I found out, that I have to use live() (which turned out to be old), delegate() (which also turned out to be old in 1.7.1) or on() (which turns out to be the best possibility to make events work inside of dynamically loaded content via jQuery + AJAX).

I also read somewhere, that I can't use load() or get() to load new content from another page inside of an already loaded content, because it doesn't "bubble" (I don't even know what that means).

What do I have to do to load new content within an AJAX loaded page?

Here's a snippet I tried to work with (included on the loaded page):

<?php 
    if(exist('`posts`')) {
        $load = mysql_query('SELECT `id` FROM `posts` ORDER BY `id` DESC LIMIT 10');
        while($row = mysql_fetch_object($load)) {
?>
            <script type="text/javascript">
                $('body').on('body', 'load', function() {
                    $.get('getpost.php', { pid: <?= $row->id ?> }, function (data) {
                        $('#posts').html($('#post_<?= $row->id ?>', data).html()).show();
                    });
                    $('#posts').off('load');
                });
            </script>
<?php
        }
    }
    else {
?>
    <div align="center">No posts yet.</div>
<?php
    }
?>

getpost.php is my file from which I can get the div_$row->id so that it appears on the start page.

PLUS (Just adding for your knowledge) I want the content to load the content without a mouseover, click or blur event.

Thanks.

Upvotes: 2

Views: 693

Answers (2)

satoshi
satoshi

Reputation: 4113

Am I the only one who thinks that this approach is completely wrong? You're making an ajax request for each post, this could end up in making way too much requests, heavily slowing down the loading time. I can't see any reason why you don't want to directly write the posts' HTML inside the PHP while loop.

Upvotes: 0

technomage
technomage

Reputation: 10069

You want to use ".live()" if you want a particular event mapping to be applied dynamically to any new DOM elements which match its selector. Alternatively, you can attach the behavior to each chunk of content loaded.

Write and develop your ajax load independently of your DB lookup to make things simpler. The following snippet triggers another ajax call after each element loads.

<?php
$id = 'div'.mt_rand();
$counter = isset($_REQUEST['counter']) ? $_REQUEST['counter'] : 0;
$next = $counter + 1;
echo <<<END
<div id="{$id}">{$counter}
<script>
$(function() {
   $.ajax('/url?counter={$next}', function(html) {
       $(html).appendTo($('#{$id}').parent()); // or whatever your favorite method is for adding a sibling
   });
});
</script>
</div>
END;
?>

Upvotes: 1

Related Questions