Create/access Javascript global variable created on AJAX call

Question

How do I create a Javascript global variable from an AJAX call? I'm currently getting a undefined error. I've cut the code to just relevant sections. I'll add more if requested.

#index.php
#(Calls form.php)
  if(ajaxRequest.status == 200){
    document.getElementById("response").innerHTML = "<script">; #new
    document.getElementById("response").innerHTML += ajaxRequest.responseText;
    document.getElementById("response").innerHTML += "</script">; #new
  }



#form.php
  print("<script>var message = 'Hello World';</script>");
  print("<input type=\"button\" onClick=\"printMessage()\" />");

#index.js
#(Sent to the browser before AJAX. Executed after AJAX call.)
  function printMessage(){
    alert(message);
  }

I'd suspect that the code defining 'var message' is being executed after the index.js is loaded and as a result can't see the variable. If as a test you put 'var message = 'Test'; in your index.js does it work as expected? — dougajmcdonald, Apr 30 '12 at 07:16
Yes, thats how it currently works. Since it seems like a scope issue, is there a way to add the var to document? — , Apr 30 '12 at 07:18
You're probably doing this wrong. Why not just use [JSONP][1]? [1]: http://en.wikipedia.org/wiki/JSONP — Visionary Software Solutions, Apr 30 '12 at 07:22
It's a bit of a bodge, but you 'could' put a hidden HTML element on the page and set it's value in form.php and retrieve it again during printMessage using getElementById() — dougajmcdonald, Apr 30 '12 at 07:23
If I put the function in its own file, then print a JS file include inside innerHTML, would that work? — , Apr 30 '12 at 07:43

score 1 · Accepted Answer · edited May 23 '17 at 12:11

The problem is that <script> tags added via innerHTML don't get executed.

Have a look at: Can scripts be inserted with innerHTML?

If you can use JQuery, this would work:

$('#response').html(ajaxRequest.responseText);

You could also create the <script> tag using JavaScript like this:

var ajax_response='var message="Hello World!";';

var sc=document.createElement('script');
sc.text=ajax_response;

document.body.appendChild(sc);

alert(message);

Demo: http://jsfiddle.net/6ChZG/

Something like this should work:

#index.php
#(Calls form.php)
  if(ajaxRequest.status == 200){
    var res=document.getElementById("response");
    res.innerHTML = "<input type=\"button\" onclick=\"printMessage()\" value=\"test\" />";
    var sc=document.createElement('script');
    sc.text=ajaxRequest.responseText;
    res.appendChild(sc);    
  }



#form.php
  print("var message = 'Hello World';");


#index.js
#(Sent to the browser before AJAX. Executed after AJAX call.)
  function printMessage(){
    alert(message);
  }

Demo: http://jsfiddle.net/XbM7v/

score 0 · Answer 2 · answered Apr 30 '12 at 07:25

Try this:

Replace var message with message. Variables not declared as var .. are added to global scope.

And, call printMessage() after the ajax call completes.

  if( (ajaxRequest.status == 200 ) && ( ajaxRequest.readyState==4 ) ){
    document.getElementById("response").innerHTML = ajaxRequest.responseText;
    //printMessage() call here...
  }

Hope this helps.

Create/access Javascript global variable created on AJAX call

2 Answers2