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

look at: http://stackoverflow.com/questions/10642289/return-html-content-as-a-string-given-url-javascript-function — Avitus, Jan 16 '14 at 20:38
Depending on what you want to do, maybe an iframe is enough: `` — OnlyThenDidIReckonMyCurse, Jan 16 '14 at 20:42
@Jason P - The last think I tried was: $(document).ready(function(){ $("#link").click(function(){ $("#content").load("vid_content.html"); }); } This seems basic, but it won't work. — jbarradas, Jan 16 '14 at 20:45
@Avitus, that doesn't work for me, because I don't want to get a url but an html file — jbarradas, Jan 16 '14 at 20:46
That code looks correct. Are there any errors in your browser's javascript console? Everything look right on the network tab? — Jason P, Jan 16 '14 at 20:48
@AlexShilman: jQuery is loaded and working. The file is in the same directory as the index.html — jbarradas, Jan 16 '14 at 20:58
What about your network tab in the debugger, what does that say? — Alex Shilman, Jan 16 '14 at 20:58
@jbarradas After you do the ajax, In the network tab of your debugger, you should see the status, if it's 200 or 404 or any. What does it say? — Alex Shilman, Jan 16 '14 at 21:05

score 1 · Answer 1 · answered Jan 16 '14 at 20:40

1

use this

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

answered Jan 16 '14 at 20:40

Rohit Agrawal

5,372
5
19
30

Don't forget to mention you need to be on at least a local server (appache with mamp or xamp). If not, you'll have an error. – Rum Jeremy Jan 16 '14 at 20:42
@Seb server is not needed for the task – Rohit Agrawal Jan 16 '14 at 20:49
@Rohit Agrawal, there's browser restriction for ajax .load() with Chrome. Firefox seems to work tho. – Rum Jeremy Jan 16 '14 at 21:19
Just for fun, try it in firefox. Just for the thrill. – Rum Jeremy Jan 16 '14 at 21:35

score 0 · Answer 2 · answered Jan 16 '14 at 21:11

0

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

answered Jan 16 '14 at 21:11

droessmj

1
1

what should i put in href="" ? – jbarradas Jan 16 '14 at 21:20
You shouldn't need anything there as you are not referencing another page. You are loading into the page you are currently on. – droessmj Jan 17 '14 at 17:42

score 0 · Answer 3 · answered Jan 16 '14 at 21:39

0

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.

answered Jan 16 '14 at 21:39

scf1001

251
1
5

what should I put in href of the #link ? I will put it online on a free domain to test it. – jbarradas Jan 16 '14 at 21:53
Just put a # for the href. It's not being used because the javascript is working instead. Alternatively you could make the href point to the `vid_content.html` file, and then the javascript can use the href for the Ajax request. – scf1001 Jan 16 '14 at 21:56

score 0 · Answer 4 · answered Jan 18 '14 at 00:53

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!

score 0 · Answer 5 · answered May 09 '16 at 22:35

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

load external page into a div with html or jquery

5 Answers5