jQuery Load() not loading within div

Question

I am trying to use jQuery to open an href inside a div, rather than simply linking to the new page. I have viewed a number of tutorials but the load() function does not seem to be working for me.

Please take a look at my code and let me know what piece of puzzle is missing.

Here is my HTML page:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Jquery</title>
</head>
<body>
<!-- nav links to open in div#content area -->
<a class="menu_top" href="pages/home.php">Home</a> | <a class="menu_top" href="pages/about.php">About</a> | <a class="menu_top" href="pages/contact.php">Contact</a>

<!-- div for links to open in -->
<div id="content-area"></div>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>

And my jQuery Javascript:

$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content_area').load(href);
//return false;
 });

I added alert to make sure the URL was being retrieved, and it is, then it would completely load then new page. So I added "return false" and it did nothing after the alert suggesting that the load() was not working.

Initially was running this through WAMP so I tried running the page directly from the folder and the browser tried to download the linked pages instead of opening them. I also tried uploading to a remote web site and got the same result as on WAMP.

You use "content_area" in the JavaScript, but "content-area" in the HTML. — Pointy
– Pointy, Commented Aug 10, 2013 at 18:21

putvande · Accepted Answer · 2013-08-10 18:21:29Z

4

Try:

$('.menu_top').click(function() {
    var href=$(this).attr('href');
    alert (href);
    $('#content-area').load(href);
    //return false;
});

Because your div is called #content-area, not #content_area.

answered Aug 10, 2013 at 18:21

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Zapor Over a year ago

Thanks both of you for your help. As I was trying your suggestions, I grasped at a few more straws myself and found that when I uncommented the "return false" it worked.

Collectives™ on Stack Overflow

jQuery Load() not loading within div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related