javascript - trying to get jquery load to work -
when navigate through menu want contentarea div change , not reload whole page. want use jquery load function read div page (from members.html div coltwo) , insert onto page (into div contentarea). have been trying couldn't work.
any editing script helpful!
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>my title</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <script type="text/javascript" src ='http://code.jquery.com/jquery-1.9.1.min.js'</script> <script type="text/javascript"> $(document).ready(function() { function memberspage(){ $('#contentarea').load('members.html #coltwo'); } }); </script> <body> <div id="header"> <h1>my title</h1> </div> <div id="content"> <div id="colone"> <div id="menu1"> <ul> <li><a href="#" onclick='memberspage()'>members</a></li> </ul> </div> <div class="margin-news"> <h2>recent updates</h2> <p><strong>none @ time</strong> </p> </div> </div> <div id="contentarea"><h2>starting text</h2></div> <div style="clear: both;"> </div> </div> </body> </html>
the problem you've declared memberspage() function inside document ready handler, means not in scope when try call inline onclick handler on anchor element - inline attributes can access global functions.
you can fix moving function declaration out of document ready (making global), better option bind click handler jquery:
$(document).ready(function() { $("#menu1 a").click(function(e){ $('#contentarea').load('members.html #coltwo'); e.preventdefault(); }); }); i've added e.preventdefault() stop default behaviour on anchor click might otherwise scroll top of page. (in inline handler same effect returning false.)
note <script> element includes jquery.js missing closing > right before closing </script>.
Comments
Post a Comment