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..
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..
Share Improve this question edited Jan 4, 2014 at 15:52 BenMorel 36.5k51 gold badges205 silver badges335 bronze badges asked Mar 10, 2013 at 7:17 HariHari 1373 gold badges5 silver badges14 bronze badges 7- Are you testing this on a web server? – Daedalus Commented Mar 10, 2013 at 7:51
- i tested.. Browser displaying the following error "Uncaught SyntaxError: Unexpected token {" – Hari Commented Mar 10, 2013 at 8:15
- Show us all your code then, please. The the block you have above isn't the issue. – Daedalus Commented Mar 10, 2013 at 9:10
- <html><head> <title>Untitled Document</title> </head> <script type="text/javascript"> $(document).ready(funtion(){ $('#btn').click(funtion(){ $('#div_content').html('C:/xampp/htdocs/ex1.html'); }); }); </script> <body> <input type="button" id="btn" value="Load" /> <div id="d_content"> </div> </body> </html> – Hari Commented Mar 10, 2013 at 9:32
- See my answer below, I've expanded it detailing what you've done wrong. – Daedalus Commented Mar 10, 2013 at 9:51
6 Answers
Reset to default 9The 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.
$('#div_content').load("page.html");
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').load('html.page');
});
});
Try this:
$(document).ready(function(){
$('#btn').click(function(){
$.get('page.html').success(function(data)
{
$('#div_content').html(data);
});
});
});
Replace page.html with your page
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>
Try this..
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').html('page.html');
});
});