CODEWITHSUNDEEP
phpjqueryhtml
user1542143
user1542143

Reputation: 23

JQuery Loading Dynamic Content off Dynamic Content

I was wondering if someone would be able to help or point me in a direction. I am looking to make a web application like a quiz. What I need is to be able to load dynamic content off a dynamical created button or href in this case that will link to the other content. So far it doesnt seem to be functioning in that i get a page not found every time i click the button. doesnt seem to be passing the .php through the name. I have tested this outside of the dynmaic content div and it works fine but i really need it to work inside. What I have so far:

index.php

<body>
<div class="container_12">

    <div id="content">
    <!--dynamic content loads here-->
    </div>
</div>  

</body>

Login.php

<h1> Login Page </h1>
    <p> this is a test to c if works </p> 
        <a href='Suitable'>Hello</a> <!--button that doesnt work-->

general.js 

$(document).ready(function() {

//initial
    $('#content').load('Login.php');

    //Handle widget Clicks 
    $('div#content a').click(function() {
        var page = $(this).attr('href');
        $('#content').load('pages/' + page +'.php');
        return false;

    });
});

Suitable.php

<h1> Working </h1>
<!-- content thats not loading off button-->

Upvotes: 2

Views: 493

Answers (3)

Majid Fouladpour
Majid Fouladpour

Reputation: 30282

$(document).ready(function() {

    //initial
    $('#content').load('Login.php', function(){
        //Handle widget Clicks 
        $('div#content a').click(function() {
            var page = $(this).attr('href');
            $('#content').load('pages/' + page +'.php');
            return false;

        });

    });

});

Explanation:

load is asynchronous. JS engine does not wait for it to complete before it goes to the next line. The result is that when your click binding executes there is no a in div#content, so the selector returns an empty array and no binding happens.

Upvotes: 0

Ram
Ram

Reputation: 144739

you should delegate the click event for dynamically loaded elements, try the following:

$('#content').on('click', 'a', function(e) {
    e.preventDefault()
    var page = $(this).attr('href');
    $('#content').load('pages/' + page +'.php');
});

Upvotes: 2

Pathik Gandhi
Pathik Gandhi

Reputation: 1344

Try Live instead of click

//Handle widget Clicks 

$('div#content a').live('click',function() {
    var page = $(this).attr('href');
    $('#content').load('pages/' + page +'.php');
    return false;

});

Upvotes: -1

Related Questions