How to place a jQuery snippet into a global file

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开发者_如何学JAVA 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!!

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.

Be sure your page is finding the jquery file BEFORE this file is included in the page. If jquery is not there first you will get function not defined. Otherwise, you might have other things conflicting with your jquery, I would look into jquery noConflict.

var j = jQuery.noConflict();

as seen here:

http://api.jquery.com/jQuery.noConflict/

Happy haxin

_wryteowl

Extending what KreeK has already provided: there's no need to define your "myApp" within the document ready function. Without testing, I don't know off the top of my head if doing so is a potential source for scope issues. However, I CAN say that the pattern below will not have scope problems. If this doesn't work, the undefined is possibly a script-loading issue (loading in the right order, for example) rather than scope.

var myApp = myApp || {}; // just adds extra insurance, making sure "myApp" isn't taken

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

$(function() { // or whatever syntax you prefer for document ready
  $('.vote_up').click(function(e) {
    e.preventDefault();
    myApp.voteUp();
  });
});