prevent page jump on .html and .append?

Question

when i use jquery .html or .append to add elements in the DOM the page jumps to that location.

how can i make it not jumping, cause i want my users to be able to click on "save thread to favourites" and it wont jump to "my saved threads" cause then the user has to navigate down in the list with threads again.

EDIT: i have used this:

 // save thread
    $("a.save_thread").live("click", function(event) {
        event.preventDefault();
        $.post('controllers/ajaxcalls/threads.php', {method: 'save_thread', thread_id: event.target.id}, function(data) {
        }, 'json');
        return false;
    });

but the return false didnt do anything. and actually, although it doesnt use append() or html() it still jumps to page start.

Answer 1

I don't think it's .html() or .append() that do the jump. Rather more, check that the function you are executing returns false:

$('a.pseudolink').click(function () {
    $(this).html('foobar!');
    return false; // !!!
});

This prevents that, clicking on <a class="pseudolink" href="#newcontent">, the link target is activated.

Answer 2

return false or preventDefault is the right thing to do to stop the link being followed. Check your JavaScript error console. If there is an exception in the handler function, it won't get to returning false and the link will get followed.

However, you should consider changing your link to a <button>. What you have here is not a link, not a connection to any place in particular; it is an action. A button is a much better way of modelling that, because it doesn't have the behaviours of following a link, or allowing the user to middle-click to open the target of the link in a new tab, or right-click-add-to-bookmarks (and so on). As a consequence, you don't have to worry about preventing the default action to stop the page moving.

If you don't want it to look like a 3D button you can always use CSS to restyle it, eg. border: none; background: white; color: blue; text-decoration: underline;. Whilst you can't totally restyle it in IE which erroneously adds a little extra padding, that typically doesn't matter.

Answer 3

a real kludge to prevent this would be to remove the href attribute from the element before making the post like this:

$("a.save_thread").live("click", function(event) {
  $(this).removeAttr("href");
  $.post('controllers/ajaxcalls/threads.php', {method: 'save_thread', thread_id: event.target.id}, function(data) {}, 'json');        
});

You could also reinstate the href by saving it and adding it back in after you have finished your action.

var href = $(this).attr('href');
//do actions 
$(this).attr('href', href);

I have used this previously with success in my own development, see if it fits your purpose though.