1

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.

| improve this question | |
  • I do not know but if I put your code in a tester with 2 abstract php arrays, it works without any problem... (this looks like that the answer is going to be on this question, something like: "ohh, I was just stupid because so and so...) – Zollie May 8 '19 at 5:49
  • You can check your code working here, open your console for logs, and select any car: main.xfiddle.com/462fc245/cars1.php -- the PHP arrays stays defined in onchange function too... – Zollie May 8 '19 at 6:24
  • Quick question. Why did you decide to go with global variables? Are you trying to access them in a se0arate Javascript file? – Lodder May 8 '19 at 6:31
  • I tried going with a global variable as I"m at a loss at why the php variable is displaying properly in php, but when I call it from javascript it is the variable from a prior load of the page. I'm using a top drop down div with a report div that is populated by a jQuery("#report").load(link) call. All the code above is in the link. I would 'assume' it should refresh the page and clear variables (as it does in php). But the javascript call gets the wrong values. – Charles Wilkins IV May 8 '19 at 12:33
  • The problem only occurs when I refresh from the drop downs. If it is the first time to the page, it loads the proper PHP variables into javascript. – Charles Wilkins IV May 8 '19 at 12:33
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.

| improve this answer | |
  • Very useful and helpful info on javascript namespacing, thank you! – Zollie May 8 '19 at 19:11
0

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...

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.