0

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);
  }
Improve this question
5
  • 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? Commented Apr 30, 2012 at 7:16
  • Yes, thats how it currently works. Since it seems like a scope issue, is there a way to add the var to document? Commented Apr 30, 2012 at 7:18
  • You're probably doing this wrong. Why not just use [JSONP][1]? [1]: en.wikipedia.org/wiki/JSONP Commented Apr 30, 2012 at 7:22
  • It's a bit of a bodge, but you 'could' put a hidden HTML element on the page <input type="hidden" id="msg"/> and set it's value in form.php and retrieve it again during printMessage using getElementById() Commented Apr 30, 2012 at 7:23
  • If I put the function in its own file, then print a JS file include inside innerHTML, would that work? Commented Apr 30, 2012 at 7:43

2 Answers 2

Reset to default
1

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/

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

1 Comment

Would creating the <script> tags in Javascript, then creating the variables during the AJAX call work? Something like the above: (Just follow the general logic, not the actual js function calls)
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.