load html page in div tag using jquery dynamically

Question

Dynamically load the html page inside div tag using JavaScript or jQuery.

<html>
<head>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('C:/xampp/htdocs/ex1.html');
    });
});
</script>
<body>
<input type="button" id="btn" value="Load" />
<div id="d_content">
</div>
</body>
</html>

But it not working..

i tested.. Browser displaying the following error "Uncaught SyntaxError: Unexpected token {" — Hari, Mar 10 '13 at 08:15
Show us all your code then, please. The the block you have above isn't the issue. — Daedalus, Mar 10 '13 at 09:10
See my answer below, I've expanded it detailing what you've done wrong. — Daedalus, Mar 10 '13 at 09:51
possible duplicate of [Load HTML page dynamically into div with jQuery](http://stackoverflow.com/questions/14735762/load-html-page-dynamically-into-div-with-jquery) — Saeed Hashemi, Sep 29 '13 at 12:09
http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript Solution in this thread worked for me! — Quaking-Mess, Sep 24 '14 at 14:16

Daedalus · Answer 1 · 2013-03-10T09:51:31.557

The problem you are experiencing is the fact that the javascript is treating page.html as an object, accessing the property html. What you need to do is quote the string, so it is treated how it was intended.. as a string:

$('#div_content').load('page.html');

Update 1:

First of all, what you have above is called jQuery. jQuery is a javascript library, which you must include in your head tag before you can use any of the jquery object's methods:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

You must include the above line in your document head, to gain access to the methods and properties of the jQuery $ object.

The fact that you are not currently doing so is why your code is broken and refuses to work. Also, depending on your setup, you may wish to serve the jquery file yourself, in which case you would download it and put it somewhere on your server.

Secondly, C:\ is not your web root. localhost is, so to get that bit to work you would have to use the url of 'ex1.html'. That's it. Since your document is already in the web root(or at least I think it is), it should have access to any adjacent files... else..

Say your index file is in htdocs. Your index's url would then be localhost/index.ext(with ext being whatever file extension you used). And then ex1.html was in a different folder, say 'folder1'. To access it correctly in your jquery code.. folder1/ex1.html.

Finally, script tags go in either the head or the body.. not neither.

@user1709672 Before I do that, please update your question with your current code. — Daedalus, Mar 10 '13 at 21:29

score 2 · Answer 2 · edited Dec 29 '13 at 13:08

2

$(document).ready(function(){
    $('#btn').click(function(){   
        $('#div_content').load('html.page');
     });
});

edited Dec 29 '13 at 13:08

BenMorel

34,448
50
182
322

answered Mar 10 '13 at 07:19

Amrendra

2,019
2
18
36

score 2 · Answer 3 · edited Mar 10 '13 at 07:27

2

$('#div_content').load("page.html");

edited Mar 10 '13 at 07:27

Daedalus

7,586
5
36
61

answered Mar 10 '13 at 07:20

Juan Gonzales

1,967
2
22
36

Hari krishnan · Answer 4 · 2013-03-10T07:46:37.143

0

Try this:

$(document).ready(function(){
$('#btn').click(function(){
$.get('page.html').success(function(data)
 {
     $('#div_content').html(data);
 });
 });
 });

Replace page.html with your page

edited Mar 10 '13 at 07:46

answered Mar 10 '13 at 07:20

Hari krishnan

2,060
4
18
27

score 0 · Answer 5 · edited Dec 29 '13 at 13:08

0

Try this..

$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('page.html');
    });
});

edited Dec 29 '13 at 13:08

BenMorel

34,448
50
182
322

answered Mar 10 '13 at 07:20

Purus

5,701
9
50
89

Provided $htmlcontent exists, and contains the content.. this would work, but that isn't what the question is asking. – Daedalus Mar 10 '13 at 07:27

score 0 · Answer 6 · answered Mar 12 '13 at 13:33

main.html

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
</head>
<script>

function check(){
$('#tar').load('test.html #target');  // here 'test.html' is a page and 'target' id a id of 'test.html'
}
  </script>

<body>
<input type="button" id="btn" value="Go"  onclick="check();"/>
<div id="tar">
</div>
</body>
</html>

test.html

<html>
<head></head>
<body>
<div id='target'>
 I am from test page.
</div>
</body>
</html>

Here i wrote 2 html programs. The problem was occurred on function only. i corrected that & now its working perfectly. We can load txt file also: Example:

function check(){
    $('#tar').load('test.txt');  // here 'test.txt' is a text file
    }
      </script>

load html page in div tag using jquery dynamically

6 Answers6

Linked