N0lf
N0lf

Reputation: 138

JQuery .load in jQuery loaded page/snippit

I got this problem which I tried to fix already a couple of times, but without succes.

Here's what I got :

1/ when clicking on an item in page#1 I execute the following code :

$('.row').click(function() {
    $('#content').load('detail.php', function() {
        // some extra binding code
    });
});

detail.php is a PHP file with PHP code and HTML snippit (so no complete HTML page)

2/ This is a snippit of the content of detail.php :

<script type="text/javascript">
    $(document).ready(function() {
        $('#detail_content').load('subdetail.php');  <--- problem is here
    });
</script>
<section id='detail_content'>
</section>

This second load doesn't want to work. I found out why, but I don't understand why it won't work. If I put an alert as first jQuery statement that check's if the element 'detail_content' exists, then it returns false. So this is the reason why the second load can't work. However, I don't understand why jQuery can't seem to find that element a that specific time ? I am executing it in a $(document).ready(...) - block, so this code should only execute when the DOM is loaded, right ?

Anybody knows why this isn't working and how i can fix it ?

Tia !

Upvotes: 0

Views: 90

Answers (1)

Robin Heller
Robin Heller

Reputation: 420

your DOM is ready after the page load is done. Loading a page via methods like jQuery.load, jQuery.get and so on won't trigger another DOM Ready event, as the DOM is only being manipulated (= new content is being inserted), but not re-generated (and thus the DOM stays ready throughout the whole AJAX load process).

A possible solution would be, to just execute your code within the callback of

    $('#detail_content').load('subdetail.php');

example code:

$('#detail_content').load('subdetail.php', function(){
    alert('page fetched!');
});

should work and an alert should be triggered as soon as your page is loaded.

greets,

Robin Heller

Upvotes: 1

Related Questions