jQuery global array showing as undefined

Question

I have set a couple of global variables on page load as follows:

jQuery(document).ready(function() {
    console.log("Onload PHP vis_options:"+JSON.stringify(<?php echo 
    json_encode($vis_options); ?>)+"\r\n");
    var vis_options = <?php echo json_encode($vis_options); ?>;
    var home_options = <?php echo json_encode($home_options); ?>;
    console.log("Onchange PHP vis_options:"+JSON.stringify(vis_options)+"\r\n");
    var ind_pts_game = Number(jQuery("#ind_pts_game").val());

    jQuery(document.body).on("change", '#bowl1v, #bowl2v, #bowl3v, #bowl4v, #bowl1h, #bowl2h, #bowl3h, #bowl4h', function(e) {
        console.log("ind_pts_game:"+ind_pts_game+"\r\n")
        console.log("Onchange PHP vis_options:"+JSON.stringify(vis_options)+"\r\n");
        console.log("Onchange PHP home_options:"+JSON.stringify(home_options)+"\r\n");
        return;
    });

});

When changing one of the ids in the onchange function, the ind_pts_game will display in the console. However, the vis_options & hope_options report as undefined.

Any insight on how to pass these correctly would be appreciated. They do display properly on page load, just not within the change function.

Answer 1

Try using window.vis_options and window.home_options. The declaration

var vis_options

declares vis_options to be a member of the global object, which is window when you're running in a browser.

"Globals" in javascript can be a little tricky; visibility is handled differently than most other languages. Pretty much every variable is globally visible and can be globally referenced; you have to go to great lengths to prevent a variable from being able to be referenced that way. To keep that accessibility from causing issues, pretty much everything is also namespaced by default into a global object of some sort (the exact name of the object varies with execution context).

When declared by using var, the variables become members of that global object; when declared without using var they themselves also become global objects. In both cases they are visible to every other script in the system.

This means I would expect either adding "window." to the variables when referencing them in the event handler to work when run in the browser, or I would expect the event handler as written to work, if you remove the "var " declaration from them. But not the particular syntax you chose.

Of the two, BTW, using "window." would be cleaner, as it wouldn't litter the root-level global space with terms that might interfere with other javascript code. The drawback to that approach is the name of the global object changes depending upon the execution context (it's window in the browser, global in node, and something else when running in a worker).

The cleanest approach would be to declare your own Global object to contain that information, such as CWGame, and make those variables members of it. Then it would not interfere with other scripts, and the variables would always be globally accessible by the same reference, regardless of execution context.

Addy Osmani has a great piece on the basics of namespacing.

Answer 2

Ok.. I've changed it from a global variable back to the actual function.

I changed

jQuery(document.body).on("change", 'select.bowler', function(e) {

to be

jQuery(document.body).unbind().on("change", 'select.bowler', function(e) {

and it appears to be working...