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..
6 answers
solution1
9 2013-03-10 07:29:57
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.
solution2
2 2013-03-10 07:19:44
$(document).ready(function(){ $('#btn').click(function(){ $('#div_content').load('html.page'); }); });solution3
2 2013-03-10 07:20:10
$('#div_content').load("page.html");solution4
0 2013-03-10 07:20:16
Try this:
$(document).ready(function(){ $('#btn').click(function(){ $.get('page.html').success(function(data) { $('#div_content').html(data); }); }); });
Replace page.html with your page
solution5
0 2013-03-10 07:20:28
Try this..
$(document).ready(function(){
$('#btn').click(function(){
$('#div_content').html('page.html');
});
});
solution6
0 2013-03-12 13:33:52
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.