load external page into a div with html or jquery

Question

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");
    });
}

Answer 1

用这个

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

Answer 2

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");
      });
    }

Answer 3

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.

Answer 4

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!

Answer 5

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