Question

I have a JavaScript file here http://www.problemio.com/js/problemio.js and I am trying to place some jQuery code into it that looks like this:

$(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=+';

        if ( queue.login = false) 
        {
            // Call the ajax to try to log in...or the dialog box to log in. requireLogin()
        } 
        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" )
                    {
                        //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');

                        alert ("after dialog was open");

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





            }); // Closing AJAX 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());
                }
            });
        });    
});
</script>

There are two reasons why I am trying to do that:

1) I am guessing this is just good practice (hopefully it will be easier to keep track of my global variables, etc.
2) More importantly, I am trying to call the voteUp(someId) function in the original code from the problemio.js file, and I am getting an error that it is an undefined function, so I figured I’d have better luck calling that function if it was in a global scope. Am I correct in my approach?

So can I just copy/paste the code I placed into this question into the problemio.js file, or do I have to remove certain parts of it like the opening/closing tags? What about the document.ready() function? Should I just have one of those in the global file? Or should I have multiple of them and that won’t hurt?

Thanks!!

Answer 1

1) I am guessing this is just good practice (hopefully it will be
easier to keep track of my global variables, etc.

Yes and no, you now have your ‘global’ variables in one spot but the chances that you’re going to collide with ‘Global’ variables (ie those defined by the browser) have increased 100% 🙂

For example say you decided to have a variable called location, as soon as you give that variable a value the browser decides to fly off to another URL because location is a reserved word for redirecting.

The solution to this is to use namespacing, as described here

2) More importantly, I am trying to call the voteUp(someId) function
in the original code from the problemio.js file, and I am getting an
error that it is an undefined function, so I figured I’d have better
luck calling that function if it was in a global scope. Am I correct
in my approach?

Here’s an example using namespacing that will call the voteUp function:

(function($) {

    var myApp = {};

    $('.vote_up').click(function(e) {
        e.preventDefault();
        myApp.voteUp();
    });

    myApp.voteUp = function() {
        console.log("vote!");
    }

})(jQuery);

What about the document.ready() function? Should I just have one of
those in the global file? Or should I have multiple of them and that
won’t hurt?

You can have as many document.ready listeners as you need, you are not overriding document.ready you are listening for that event to fire and then defining what will happen. You could even have them in separate javascript files.