Javascript prevent default not being executed

Question

I am new to javascript and I have been playing around with prevent default command for ajax pagination and I have the following code:

http://jsfiddle.net/6pqfH/2/

$('.pagination').click(function(e){
    e.preventDefault();
    // fade out current content
    $('.results').css("opacity", "0.5");
    // load new content
    // ....
    // unfade
    $('.results').css("opacity", "1");
    // go back up to top of the page
    $('html,body').scrollTop(0);
});

However, it doesn't seem to be working, it links to a new page instead of executing the fade in and out and bringing it back to the top of the page. I have checked the code for the opacity and scoll and it seems to be right so where am I going wrong here?

From my console: SyntaxError: illegal character @ http://fiddle.jshell.net/_display/:27 (# isn't a JavaScript comment character.) Your console (Ctrl+K in FF, Ctrl+J in Chrome, F12 in IE) should be your first stop for diagnosing errors. — apsillers
– apsillers, Commented May 8, 2013 at 12:49
@apsillers: typical programmers mistake dude, just replace them with // and proceed with your analysis — dreamweiver
– dreamweiver, Commented May 8, 2013 at 12:52
Thank you for the tip, it seemed to show it as a comment in jfiddle but I have learnt something now. — Jimmy
– Jimmy, Commented May 8, 2013 at 13:05

epascarello · Accepted Answer · 2013-05-08 12:53:59Z

2

It does both steps, The reason why you do not see it is that it does it right away. You need to add a delay or animation to break it up.

$('.pagination').click(function(e){
    e.preventDefault();
    // fade out current content
    $('.results').css("opacity", "0.5");
    // load new content
    // ....
    // unfade
    $('.results').fadeTo('slow', 1, function() {
      $('html,body').scrollTop(0);
    });

});

answered May 8, 2013 at 12:53

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

CodeBird · Accepted Answer · 2013-05-08 13:03:03Z

0

here's what I think you want:

http://jsfiddle.net/6pqfH/6/

<a class="pagination" id="num" href="#">4</a>

I replaced the hred="/test" by href="#" this way the a will take you to the top alone.

answered May 8, 2013 at 13:03

CodeBird

3,8132 gold badges22 silver badges38 bronze badges

Collectives™ on Stack Overflow

Javascript prevent default not being executed

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