jQuery appends # at the end of url even if I return false;

Question

I have this code which I plastered with return false; so that it wouldn't append the # at the end of a url after it executes, but it still does that. Any idea what I am doing wrong and how/where is best to return false?

    // Called right away after someone clicks on the vote up link
    $('.vote_up').mouseup(function() 
    {        
        $("#loading").show();
        var problem_id = $(this).attr("data-problem_id");

        vote(problem_id , 1);

        //Return false to prevent page navigation
        return false;       
    });

    $('.vote_down').mouseup(function() 
    {
        $("#loading").show();
        problem_id = $(this).attr("data-problem_id");

        vote ( problem_id , -1 );

        //Return false to prevent page navigation
        return false;
    });       

// Global function
var vote = function(problem_id , vote) 
{
    var dataString = 'problem_id=' + problem_id + '&vote=' + vote;

    // The person is actually logged in so lets have him vote
    $.ajax({
        type: "POST",
        url: "/auth/check_login.php",
        dataType: "json",
        success: function(data)
        {
            $.ajax({    
                type: "POST",
                url: "/problems/vote.php",
                data: dataString,
                success: function(html)
                      { 
                           $("#loading").hide();
                           if ( html == "not_logged_in" )
                           {
                               queue.login = false;

                               //set the current problem id to the one within the dialog
                               $problemId.val(problem_id);                  

                               // Try to create the popup that asks user to log in.
                               $("#loginpopup").dialog(  {title: 'Please Login To Vote'} );  // title: 'Login Dialog'

                               // prevent the default action, e.g., following a link
                               return false;
                           }
                           else
                           if ( html == "already_voted" )
                           {
                               // Display a dialog box saying that the user already voted
                               $('<div>You already voted this way on this problem.</div>').dialog( {title: 'Already Voted'});
                               // show div which says un-important, hide div which says important

                               $("#support").hide();
                               $("#dont_support").show(); 

                               return false;                              
                           }
                           else
                           if (  html == "error_getting_vote" )
                           {
                               $('<div />').html('Error getting existing votes.').dialog();
                           }
                           else
                           {
                               if ( vote == -1 )
                               {
                                   $("#support").show();
                                   $("#dont_support").hide();                                                              
                               }
                               else
                               {
                                   $("#support").hide();
                                   $("#dont_support").show();                                                              
                               }

                               // Now make a call to AJAX to get the count of votes
                               $.ajax({    
                                   type: "POST",
                                   url: "/problems/get_vote_count.php",
                                   data: dataString,
                                   success: function(html)   
                                   {
                                       var class_name = ".votes_"+problem_id;

                                       $(class_name).text(html);

                                       return false;                                   
                                   }
                                });    

                                return false;                            
                           }                        
                      },
                      error: function(html) 
                      {
                          $("#loading").hide();

                          return false;
                      } // End of error case    
                }); // Closing inner AJAX call.
            },
            error: function(data)
            {
                $("#loading").hide();
                $("#loginpopup").dialog( {title: 'Please Login To Vote'} );

                return false;
            } // End of error
        }); // End of outer AJAX.

        return false;
};    

Answer 1

Change your link syntax from <a href="#"> to <a href="javascript:void(0);" /> without changing your js code.

Answer 2

You should bind the event listener to the click event instead of mouseup. When mouseup is triggered, the default behaviour has already occurred, and cannot be cancelled any more.

$('.vote_down').click(function(e) {
    e.preventDefault();
    // Rest of code

PS. Judging by your code, you've got separate pages to vote:

• AJAX request - Is logged in?
• AJAX request - Vote

This model is very insecure, if the voting page does not contain some kind of authentication. Users can easily bypass the login page by creating an artificial request to the voting page.

You should merge the login, and voting page.