CODEWITHSUNDEEP
jquery
Milacay
Milacay

Reputation: 1497

Jquery - Load Extermal Page In The DIV

I need help on this loading a external URL into a DIV. It is not just $("#DIV-ID").load(URL), but a little bit more to that, so let me explain what I want to accomplish.

Says, I have a main.html page looks like this (I skipped the jquery include and misc stuff so it won't confuse everyone)

<!-- main.html -->
<script>
$(function(){ // document ready

    loadPage1 = function()
    {
        //alert("submit");
        var url = "page1.html"
        $("#content").load(url); 

    }
});
</script>

<div id="left">
    <a href="javascript:loadPage1()">Load Page 1</a>
</div>

The code above (main.html) works fine. When I click the "Load Page 1" link, it will load the external page1.html (below) into the DIV "content".

<!-- page1.html -->
<script>
$(function(){ // document ready
    $("#content").load("leftMenu.asp"); 

    loadPage2 = function()
    {
        //alert("submit");
        var url = "page2.html"
        $("#content").load(url); 

    }
});
</script>
<div>
    <a href="javascript:loadPage2()">Load Page 2</a>
</div>

Now, I am still viewing the main.html with a new content loaded from the page1.html which has a link "Load Page 2". The problem is when I click on the link "Load Page 2", it opens in the parent page and no longer stay in the main.html page.

What I would like to do is that when I click "Load Page 2" from page1.html, it just reload the page2.html in the same DIV "content" without refreshing entire page or opens in the parent window.

Please help. Thanks!

Upvotes: 0

Views: 785

Answers (2)

Ralph Smith
Ralph Smith

Reputation: 73

In your loadpage object, the var content = I think but want to be sure that you could have named that anything; it's not related to #content I presume. Thanks.

Upvotes: 0

CreMedian
CreMedian

Reputation: 803

Try defining your function one time (in main.html) and making it flexible enough to take the href parameter from the links in dynamically loaded pages. This means you will have to put the actual URL of the page you want to load in the href instead of your function reference, then just make a new function for your anchor tags. I will show this using the .get() method instead of the .load() method:

HTML for main.html:

<!-- main.html -->
<div id="content"><h1>This is the main page content</h1></div>
<div id="left">
    <a href="page1.html">Load Page 1</a>
</div>
<script>
$(window).load(function(){
    loadPage = function(URL)
    {
    var content = $.get(URL, function(data){
        $('#content').html(data);
    });

    }
    //function to detect your link clicks (links should probably have some kind of class or ID, but I am keeping this simple to illustrate
    $('a').click(function(){
        var URL = $(this).attr('href');
        loadPage(URL);
        return false;
    });
});
</script>

Then, page1.html will not need any script, just the link to load the next page you want:

<!-- page1.html -->
<h1>This is Page 1 content!</h1>
<div>
    <a href="page2.html">Load Page 2</a>
</div>

Upvotes: 1

Related Questions