global variable from jquery .load() page not recognized by remote javascript file function

Question

EDIT

To make it easier to read I've rewritten my explanation here.

In short, a function in remote .js file requires a global variable. A previous function in remote .js file brings that var into the page with the jQuery .load(), but the function that requires the variable is not finding it after the .load() has brought it into the page. Below functions are in chronological order.

The remote .js file is loaded into the main page before the .load() page is.

Below is the code that I have:

Function Loads Remote Page Into Main Page (in remote .js file)

$(".activity_choice").live('click',function(e) {
    var selection = $(this).attr('id');
    var address = my_url + "pg/course/activity_form?style=" + selection + "&activity=" + activity;
    $("#stage_choice_holder").load(address,function(){
    });
});

The Global Var Coming In With Loaded Page

var controls_setup = $.parseJSON('<?php echo json_encode($setup);?>');

The Final Function That Should Save Things Using This Variable (in remote .js file)

$("#save_controls").live('click',function(e) {
    datastr = "&activity=" + activity;
    $.each(controls_setup, function (i,elem) {
        datastr += "&"+elem+"=" + $("#"+elem).attr('value');
    });
    $.ajax({
        type: "POST",
        url: my_url + "action/course/saveactivitycontrols",
        data: datastr,
        dataType: "json",
        success: function(msg){
        }
    }); 
});

The global variable controls_setup is not being recognized (I think), because when the $(".activity_choice").live('click',function(e) { is clicked the main page is already rendered with the remote .js file in it. This function brings the global variable in, but I'm guessing the DOM isn't picking it up. So the final function that requires this var can't find it.

Hope this is clearer. Any help much appreciated. I am a somewhat novice with jQuery.

MUCH easier to understand, thank you. I think I worked it out (I was editing while you were editing), see updated answer. — T.J. Crowder
– T.J. Crowder, Commented Dec 18, 2011 at 9:17

T.J. Crowder · Accepted Answer · 2011-12-18 09:17:38Z

1

~~It's very hard to tell exactly what's going on in that code, because there's lots of code quoted which is unrelated to the problem, and (conversely) it's quoted in somewhat disconnected bits.~~ (You've fixed that, nice one.)

But if I understand you correctly, this call from your first code block:

$("#stage_choice_holder").load(...);

...is loading HTML with embedded script elements from a PHP page, and in a script element on that page you have:

var controls_setup = $.parseJSON('<?php echo json_encode($setup);?>');

First off, you don't want that parseJSON call, simply this:

var controls_setup = <?php echo json_encode($setup);?>;

json_encode will return valid JSON, which conveniently (and intentionally) is a subset of JavaScript object literal notation, so the end result there is that controls_setup will receive a reference to an object. This may actually be the problem, because throwing single quotes around the output of json_encode may well result in a syntax error (if there are any single quotes in the material output by json_encode, or line breaks).

Then in code later, you're trying to access controls_setup and not seeing it.

Although not best practice, that should work because of the way jQuery ensures things get loaded. Here's a very simple example of it (live copy):

jQuery(function($) {

  display("Before: " + typeof foo);
  $("#target").load("http://jsbin.com/uwigok", function() {
    display("After: " + typeof foo);
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

...which loads

<div>Snippet</div>
<script>
  var foo = "bar";
</script>

So it could be as simple as removing the parseJSON call per the above.

edited Dec 18, 2011 at 9:17

answered Dec 18, 2011 at 8:49

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Allerion Over a year ago

thanks for your reply. I have had issues with the parseJSON, but that doesn't seem to be the issue. I've tried your recommendation and I'm still getting a "controls_setup is not defined". I still think it's because perhaps I'm not defining it properly as a global var, or that because the function thath uses it is already rendered before the global var comes into the page, the function can't find it

Allerion Over a year ago

if I put the function that uses the variable into the page that comes in with .load() the function can find the variable. It seems to be because it's in the remote .js file that it has difficulty finding the incoming var.

T.J. Crowder Over a year ago

@Trajan: No, all scripts end up sharing the same global space, it doesn't matter whether they're external or embedded in the page. That makes literally no difference. If you're seeing a difference when you do that, it means you're changing something else at the same time (like the location of the scripts relative to each other).

Allerion Over a year ago

ok, I'll keep plugging away at it and see if I can come up with some more information.

T.J. Crowder Over a year ago

@Trajan: Here's an updated version of my example using an external script: jsbin.com/afihiz/2 What you'll need to do is walk through the code with a debugger so you can see what's going on. All major browsers now have debuggers built in. I quite like Chrome's Dev Tools (Ctrl+Shift+I will show them), but again, all the major browsers have them now.

|

Collectives™ on Stack Overflow

global variable from jquery .load() page not recognized by remote javascript file function

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related