CODEWITHSUNDEEP
javascriptjqueryhtmlload
jbarradas
jbarradas

Reputation: 2161

load external page into a div with html or jquery

So, I have this code in index.html:

<td><a id="link" href="">Vídeos</a></td>

and then

<div name="content" id="content"></div>

I want to load a page named vid_content.html

I tried a lot of code I found everywhere but nothing went right..

PS: all the pages are local in the same folder!

The last thing I tried was:

$(document).ready(function(){ 
    $("#link").click(function(){ 
        $("#content").load("vid_content.html");
    });
}

Upvotes: 0

Views: 3288

Answers (5)

flexicon
flexicon

Reputation: 102

Save this into "firstpage.php". with -> jQuery v2.2.3

$(document).ready(function() {

    $('#content').load("secondPage.php", function() {
        //do something
    });

    $(document).on('click','#third',function(){
        $('#content').load("thirdPage.php", function() {
            //do something
        });
    });

});

Into secondPage.php

page 2<br>
----------------------<br>
<a href="#" id="third">load third</a>

Into thirdPage.php

hello world

Upvotes: 0

jbarradas
jbarradas

Reputation: 2161

Already got a solution!

Done it this way:

function load_vids(){ document.getElementById("content").innerHTML='<object type="text/html" data="vid_content.html #content" style="width:811px; height:570px"></object>'; }

And this:

<td><a id="link" href="#" onclick="load_vids()">Videos</a></td>

Thank you all for help!

Upvotes: 0

scf1001
scf1001

Reputation: 251

There's a few problems with the code. Firstly, the Ajax request won't work unless you're running this on a local server. Simply opening the HTML file in Chrome won't work. Secondly, you need to pass in the event object to the click handler so that you can stop the page reloading when you click on the link, like so:

$(document).ready(function(){ 
    $("#link").click(function(e){ 
        $("#content").load("vid_content.html");
        e.preventDefault();
    });
});

Lastly, you were missing the final closing bracket from the jQuery ready function.

Upvotes: 0

droessmj
droessmj

Reputation: 1

You should be able to make use of .html() within jQuery to define what the html contained within the div is.

    $(document).ready(function(){ 
      $("#link").click(function(){ 
        $("#content").html("vid_content.html");
      });
    }

Upvotes: 0

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

use this

 $('#content').load('/path/to/vid_content.html');

Upvotes: 1

Related Questions