javascript - Ajax not working. I need the header and footer not to reload every time. Can you help me? -
i need header , footer not change in webpages simple ajax code have copied stackoverflow.com. not working. please me.
<html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#activities").click(function(){ $("#body").load("activities.html"); }); }); </script> </head> <body> <div id="header"> <a href="#" id="#activities">activities</a> header. </div> <div id="body"> <p> body. <p> </div> <div id="footer"> footer. </div> </body> </html>
you need change
<a href="#" id="#activities">activities</a> to
<a href="#" id="activities">activities</a> <!.............^.......................--> note : character "#" not allowed in value of attribute "id"
then add e.preventdefault() prevent browser default action on click event
$(document).ready(function() { $("#activities").click(function(e) { e.preventdefault(); $("#body").load("activities.html"); }); });
Comments
Post a Comment