Replacing href click behavior with jquery

Question

As an exercise, I'm trying to make my links in the navbar contract the content div, load the page in #content using ajaxpage() and then slide it back down. I'm using the following:

EDIT: I realized that I probably needed everything in a callback function, so I fixed that. The call still isn't working, though.

$(document).ready(function()
  {
  $("a.link").click(function() { 
    //...
    return false;
});
  $("#navbar a").click(function(){
    $("#content").slideUp(500,function(){
        var a_href = $(this).attr('href');
        ajaxpage(a_href, 'content');
        $("#content").slideDown(500);
        });
  });
});

With the link being:

<a class="link" href="home.php">Home</a>

When I test it, the content div correctly slides up, but then it stays there and nothing else happens. What did I do wrong here?

EDIT: After some debugging, it seems like this is the culprit:

var a_href = $(this).attr('href');

When I declare that variable and send it through an alert(), it says "undefined". I'm guessing I'm not grabbing the attribute properly, so this is where it's hanging up! How would I properly go about grabbing the href attribute of the link that you click?

Your AJAX call is probably failing, post code for ajaxpage function. I can also tell you the call is probably asynchronous, so your slideDown should be in the AJAX callback. — tymeJV
– tymeJV, Commented Jul 29, 2013 at 2:08
Yep, I was just fixing that! The ajax call works fine, since I can use it in a href without fail: href="javascript:ajaxpage('home.php', 'content')" — Rein
– Rein, Commented Jul 29, 2013 at 2:13

Ohgodwhy · Accepted Answer · 2013-07-29 02:26:48Z

2

I'm pretty sure what you really want is to capture the href of the element that was clicked.

$("#navbar a").click(function(){
    var a_href = $(this).prop('href');
    $("#content").slideUp(500,function(){
        ajaxpage(a_href, 'content');
        $("#content").slideDown(500);
    });
});

But just so we're clear, before the ajax call returns any data, the $('#content').slideDown(500); is going to fire off. You need to add a callback to ajaxpage to accept as the success function of the $.ajax() so you can determine when to slideDown().

answered Jul 29, 2013 at 2:26

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

Comments

akbarbin · Accepted Answer · 2013-07-29 02:29:49Z

0

when you determine href you should after on click using attr().

$("#navbar a").click(function(){
    var a_href = $(this).attr('href');
    $("#content").slideUp(500,function(){
        ajaxpage(a_href, 'content');
        $("#content").slideDown(500);
        });
  });

answered Jul 29, 2013 at 2:29

akbarbin

5,1051 gold badge31 silver badges31 bronze badges

Collectives™ on Stack Overflow

Replacing href click behavior with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related