CODEWITHSUNDEEP
javascriptjqueryajax
John
John

Reputation: 356

How can I use jQuery's load function to get only one element instead of the whole page?

I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.

I see the code from the jquery website:

$('#result').load('ajax/test.html #container');

But I don't understand how to make the function do this.

<!DOCTYPE html>
<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 ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">


    $(function(){
        $('#menu li a').on('click', function(e){
            e.preventDefault();
            var page_url=$(this).prop('href');
            $('#colTwo').load(page_url);
        });
    });


</script>
<body>
<div id="header">
    <h1>My Title</h1>
</div>
<div id="content">
    
    <div id="colOne">
        
        <div id="menu1">
            <ul id="menu">
                <li><a href="members.html">Members</a></li>
                <li><a href="about.html">About</a></li>

            </ul>
        </div>
        <div class="margin-news">
            <h2>Recent Updates</h2>
            <p><strong>None At This Time</strong> </p>
        </div>
    </div>

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

</body>
</html>

Upvotes: 4

Views: 12966

Answers (1)

Evan Davis
Evan Davis

Reputation: 36602

Kevin B is correct:

$('#colTwo').load(page_url + ' #colTwo');

Just add the selector as a string to the URL, and don't forget the space!

Upvotes: 8

Related Questions