i've came across a really annoying issue.
So, my plan is to have a UL-menu containing different ammounts of Li inside of it. And when i click each of them i want to load a new HTML-page into my "Content-DIV".
I've done alot of research and i found out about Ajax and Jquery. I've tried so many different codes to make it work, and i've managed to link my .js file to my index file sucessfully. I tried it out with a simpel Alert command. But then when i try to load my page into my DIV, it doesnt work at all, and i have no idea whats wrong! I found a link here on stackoverflow which were almost the same, tho they didnt use a menu to open up the pages.
So here is my index:
<div id="Left">
<ul id="nav" >
<li><a href="Home.html id="load_home">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
</ul>
</div>
<div id="content">
</div>
<script>$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("Home.html");
});
});
</script>
Any ideas? Any answers would be much appreciated. Thank you.
/Martin
You wrote the jQuery code in wrong manners Also please make sure you've are calling jQuery library file.
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
<div id="Left">
<ul id="nav">
<li><a href="page1.html">Home</a></li>
<li><a href="page2.html">Page 1</a></li>
<li><a href="page3.html">Page 2</a></li>
</ul>
</div>
<div id="content">The page will display here</div>
you will try this code instead
$(document).ready( function() {
$.get('Home.html', function(data) {
$("#content").html(data);
});
});
well from your above code i couldn't see you have created any DIV with the ID : - content So jquery is ok but from the above code i can say....jquery is not able to find the #content div.....
Please see below example which might help in your case : -
<ul>
<li><a id="page1" href="#">About</a></li>
<li><a id="page2" href="#">Community</a></li>
<li><a id="page3" href="#">Sponsor</a></li>
</ul>
<div id="result" style="clear:both;">
</div>
At the head part, we need to include JQuery library.
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
Add the following code to head part.
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('pages/page1.html');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('pages/page2.html');
//alert("Thanks for visiting!");
});
});
</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.