Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
142 views
in Technique[技术] by (71.8m points)

javascript - trying to get jquery load to work

When I navigate through the menu I want only the contentarea div to change and not reload the whole page. I want to use the jquery load function to read a div from another page (from members.html div colTwo) and insert it onto the page (into div contentarea). I have been trying but couldn't get it to work.

Any help editing this script would be 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 At This Time</strong> </p>
        </div>
    </div>

    <div id="contentarea"><h2>Starting Text</h2></div>
    <div style="clear: both;">&nbsp;</div>
</div>

</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The problem is that you've declared your memberspage() function inside a document ready handler, which means that it is not in scope when you try to call it from an inline onclick handler on your anchor element - inline attributes like that can only access global functions.

You can fix this by moving the function declaration out of the document ready (making it global), but a better option would be to bind the click handler with jQuery:

$(document).ready(function() {
    $("#menu1 a").click(function(e){
        $('#contentarea').load('members.html #colTwo');
        e.preventDefault();
    });
});

I've added e.preventDefault() to stop the default behaviour on the anchor click which might otherwise scroll back to the top of the page. (In an inline handler you would get the same effect by returning false.)

Note also that your <script> element that includes jquery.js is missing a closing > right before the closing </script>.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...