CODEWITHSUNDEEP
javascriptphpjquery
Ronnie Oosting
Ronnie Oosting

Reputation: 1252

How to use javascript load function twice? (load in load)

I've created a page where i use the onclick load function to load a php file into a div. Now I want to load another file into another div from the file i imported before.

So for example:
[ Category 1 | Category 2 | Category 3 | Category 4]
[ here got file 1 imported from a pressed Category which contains a href] [Here is the second div which will import another file from the href which is clicked from the first imported file]

Somehow, I cant get it working for the second import. First import works. I use the same code from the first import for the second import (just other id's (#)).

Part of First file to import:

<li ><a href="#" id="campaign" >Campaign</a ></li >
<li ><a href="#" id="resources" >Resources</a ></li >
<li ><a href="#" id="gang" >Gang</a ></li >
<li ><a href="#" id="gambling" >Gambling</a ></li >
<li ><a href="#" id="off-topic" >Off-Topic</a ></li >

<script >

$(document).ready(function () {
    // Forum categories
    $("#campaign").on("click", function () {
        $("#main").load("forum/campaign.php");
    });

    $("#resources").on("click", function () {
        $("#main").load("forum/resources.php");
    });

    $("#gang").on("click", function () {
        $("#main").load("forum/gang.php");
    });

    $("#gambling").on("click", function () {
        $("#main").load("forum/gambling.php");
    });

    $("#off-topic").on("click", function () {
        $("#main").load("forum/off-topic.php");
    });

    });
</script >

Part of Second file to import:

<a href="#" class="list-group-item small" id="message" style="background-color:black; color:white;" ><span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span > | <?php echo $sticky['header']; ?> </a >

    <script >
    $(document).ready(function () {
        // Forum categories
        $("#message").on("click", function () {
            $("#getmessage").load("forum/getmessage.php");
        });
</script >

Upvotes: 0

Views: 379

Answers (2)

Blueline
Blueline

Reputation: 408

A common issue with dynamically created content.

You've probably had the issue of forgetting to include $document.ready(func... at some point and you code doesn't work? This is essentially the same issue. When you run code without calling on 'ready' the id your script calls isn't on the page so it can't find it. When you dynamically create the new element it's not on the page when your script first runs so it can't 'see' it.

The easy workaround is to select an element on the page that does exist when the page is ready and then look inside that later on. Assuming that #main is initially loaded in your file and #message is some dynamic content you want to click on after it loads, this should do the trick. 

$(document).ready(function () {
        // Forum categories
        $("#main").on("click", "#message", function () {
            $("#getmessage").load("forum/getmessage.php");
        });
});

You can also use any other higher level element, like 'document' or 'body, etc. But the less of the page jquery has to look at the faster things should run. There are many, many other stack overflow questions that address the issue. Here are two towards the top of the Google results:

Jquery event handler not working on dynamic content

jquery events on dynamically loaded content

Upvotes: 1

OmerM25
OmerM25

Reputation: 253

A simple elegant solution would be creating a function that will handle all the events:

var myFunc = function ()
{
$("#campaign").on("click", function () { $
("#main").load("forum/campaign.php"); }); 
$("#resources").on("click", function () { $.    ("#main").load("forum/resources.php"); }); 
$("#gang").on("click", function () { $("#main").load("forum/gang.php"); }); 
$("#gambling").on("click", function () { $("#main").load("forum/gambling.php"); }); 
$("#off-topic").on("click", function () { $("#main").load("forum/off-topic.php"); });

}

Then from the $(document).ready you can call to myFunc

And from the $("message").on you can call myFunc again

Upvotes: 0

Related Questions