Question

I have a JavaScript file which has a function that I reference. When I call the function from one part of the code, it works, and from another, it doesn’t. Placing the function code above or below the call seems not to make any difference.

The error happens when I call the voteUp function.

Below is the entire JS file. Any idea why the two different calls to that function would have such different results? The call from the code above gives error: undefined function.

$(function()
{
    $("#login_div input[type=submit]").click(function()
    {
        var email = $("#email").val();
        var password = $("#user_pass").val();

        //alert("Email: " + email);
        //alert("password: " + password);

        var dataString = 'email='+ email + '&password=' + password;

        if( !email )
        {   
            alert ("1");
            $('.login_success_email_empty').fadeOut(200).hide();
            $('.login_error_email_empty').fadeOut(200).show();
        }       
        else        
        if( !password || password.length < 5)
        {alert ("2");
            $('.password_success').fadeOut(200).hide();
            $('.password_error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../auth/login_ajax.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {
                    $('.password_error').fadeOut(200).hide();
                    $('.no_such_user').fadeOut(200).hide(); 
                    $('.login_success_email_empty').fadeOut(200).hide();
                    $('.login_success').fadeIn(200).show();                                 

                    // Closing the dialog bosx
                    $('#loginpopup').dialog('close');

                    // Swapping out the header div
                    $('#header_logged_out').hide();
                    $('#header_logged_in').show();  

                    queue.login = true;

                    if (queue.voteUp) 
                    {
                        alert("in vote up queue: " + queue.voteUp + " and login: " + queue.login );
                        voteUp(queue.voteUp);
                    } 

                    // Now also need to retrieve the problem_id                 
                    //problem_id = $("#problem_id").val();
                    //$problemId = $('#theProblemId', '#loginpopup').val();         


//                  var $problemId = $('#theProblemId', '#loginpopup');
//                  alert ("After login, problem_id: " + problem_id + " and problemId was: " + $problemId);
                },
                error : function(json)
                {
                    queue.login = false;
                    alert ("error");

                    // Output the result.
                    errorMessage = json.responseText;

                    alert ("ErrorMessage: " + errorMessage );

                    if ( errorMessage == 'no_such_user' )
                    {
                        $('.no_such_user').fadeOut(200).hide();
                        $('.no_such_user').fadeOut(200).show();                 
                    }
                }
            });
        }

        return false;
    });
});



$(document).ready(function() 
{
    queue = new Object; 
//  queue.login = false; 

     var $dialog = $('#loginpopup')
       .dialog({
         autoOpen: false,
         title: 'Login Dialog'
       }); 

       var $problemId = $('#theProblemId', '#loginpopup');

        $("#newprofile").click(function () 
        {
          $("#login_div").hide();
          $("#newprofileform").show();
        });

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

        voteUp(problem_id);

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

    var voteUp = function(problem_id) 
    {
        alert ("In vote up function, problem_id: " + problem_id );
        queue.voteUp = problem_id;

        var dataString = 'problem_id=' + problem_id + '&vote=+';

        alert ("login status: " + queue.login );

        if ( queue.login == false ) 
        {
            // Call the ajax to try to log in...or the dialog box to log in. requireLogin()

            $dialog.dialog('open');

            alert ("after dialog was open - in false case of being logged in.");

            // prevent the default action, e.g., following a link
            return false;           
        } 
        else 
        {
            // The person is actually logged in so lets have him vote
            $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data)
                {           
                    alert ("vote success, data: " + data);

                    // Try to update the vote count on the page
                    //$('p').each(function() 
                    //{ 
                        //on each paragraph in the page:
                      //  $(this).find('span').each() 
                      //  { 
                            //find each span within the paragraph being iterated over

                       // }
                     //}                      

                },
                error : function(data) 
                {
                    alert ("vote error");
                    errorMessage = data.responseText;

                    if ( errorMessage == "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.
                        $dialog.dialog('open');

                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    {
                        alert ("not");
                    }    
                } // End of error case  
            }); // Closing AJAX call.
        } // Closing the else call
    };

    //$('.vote_down').click(function() 
    //{
     //   alert("down");

   //   problem_id = $(this).attr("data-problem_id");
//
 //     var dataString = 'problem_id='+ problem_id + '&vote=-';        

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

 //   $('#loginButton', '#loginpopup').click(function() 
 //   {
   ///  alert("in login button fnction");
     //       $.ajax({
     //           url:'url to do the login',
      //          success:function() 
      //          {
                    //now call cote up 
         //           voteUp($problemId.val());
        //        }
        //    });  // Closing AJAX call.
    //});    

}); // End of document.ready() check

Answer 1

The function is declared as a local variable inside your second “ready” handler. Nothing outside that context will be able to call it.

You could make it a global function, maybe, but it depends on whether “queue” is really supposed to be global or not. If it is, it really should be explicitly declared as global (that is, with a var declaration outside the initialization code) because what you’ve got now is not valid with “strict” mode anyway.