Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Using jQuery to stop href get request.

I'm building a simple JavaScript app in jQuery to make dynamic content on a page without causing a reload, but whenever I click the link, it changes the URL and loads the page rather than displaying it in the <div id="content"> on the homepage.

Loading just the home page works fine and loads one.html into the div as expected. But clicking on menu items navigates users off the home page. 

<script>
$(document).ready(function() {
    $('#content').load('one.html');
});

$('a').click(function(){
    var page = $this.attr('href'); 
    $('#content').load(page); 
    return false; 
});
</script>

You guys have any ideas?

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Stephen,

Your initial problem was not because the script wasn't located at the bottom of the page (although it is faster). Your problems were a couple of things: 1) $(document).ready should encapsulate all of your JavaScript when your code is in the header, not just one snippet of code. 

$(document).ready(function () {
  $('a').click( function(e){
    e.preventDefault();
    var page = $(this).attr('href'); 
    $('#content').load(page); 
    //Return statement unnecessary here
  });
});

2) As Colin found out, $this was incorrectly used and should have been $(this) as a jQuery object.

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Adding a preventDefault() method called on the event should work:

$('a').click( function( e ){
    e.preventDefault();

    var page = $this.attr('href'); 
    $('#content').load(page); 
    return false; 
});
Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Colin,

Thanks for your help! I gave that a try. For some reason, it's still changing the URL and loading a new page. Any idea why that could be? I have simplified this code as much as I can trying to fix this... here's index.html; am I missing something here? 

<div class = "row"> 
    <div class = "three columns">
      <ul>
        <li><a href="one.html">Thing 1</a></li>
        <li><a href="two.html">Thing 2</a></li>
        <li><a href="three.html">Thing 3</a></li>
      </ul>
    </div> 
    <div id = "content" class = "nine columns"> 
    </div> 
  </div>
Colin Bell
Colin Bell
29,679 Points

Try wrapping the this in $this in parentheses: $(this)

$('a').click( function( e ){
    e.preventDefault();

    var page = $(this).attr('href'); 
    $('#content').load(page); 
    return false; 
});

Typically you'll see:

var $(this) = $this;

But unless you actually declare that, then $this is just an undeclared variable. I should've caught that on the first go around, but I guess I wasn't really paying attention.

codepen: I changed load() to html() so you can see that it's actually changing the content div.

Hopefully this does the trick, but let me know if it still doesn't work.

Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Still not working for me in the browser, but thank you for the codepen-- I copied and pasted it into my dev file and I'm still having the same issue. It has to be a simple thing that I am overlooking. Any other thoughts?

Colin Bell
Colin Bell
29,679 Points

Are you getting any console errors when clicking the links or even just in general?

Stephen Van Delinder
Stephen Van Delinder
21,457 Points

None. And what's weirder to me is I can execute the jQuery from the command line to change what comes up in the content div using the code directly from the js file. I tried a couple browsers and cleared my cache...

Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Colin,

Thanks again for your assistance. Five minutes into the jQuery course, I learned that you should really load your JS files at the bottom of the page, and this fixed the issue.

Colin Bell
Colin Bell
29,679 Points

Sorry about leaving you hanging. Went to bed and meant to continue in the morning and completely forgot.

Glad you got it figured out though. I didn't realize that you had the script at the top. The reason why it doesn't work is because it goes through and adds the event handler before the DOM is loaded. That is, it's going through and adding the click handler to a tags that don't exist in the DOM yet. Putting it at the bottom loads the script after those elements have been created so it actually has elements to bind that handler to.