JQuery variable not carrying over to JavaScript

  • Added:
  • |
  • In: Wordpress

I am trying to use JQuery to get a variable from php at a url and use that variable in javascript to change content on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $.get('http://jsonp.jit.su/?url=', function(data){ var alertstate=data.isit; alert('pretty awesome, eh? ' + alertstate); }); </script> <script type="text/javascript"> if (alertstate==1) { document.getElementById('theImg').src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Alert.gif"; play_single_sound(audiotag1); } </script> 

The code works all the way through the JQuery with the alert, however once I get to the Javascript if statement the error console tells me that alertstate is not defined. Any help would be much appreciated.

This Question Has 4 Answeres | Orginal Question | checked01

The problem is scope. alertstate will only exist inside of your$.get` but not outside of it

$.get('http://jsonp.jit.su/?url=', function(data){ var alertstate=data.isit; //You can use alertstate in here alert('pretty awesome, eh? ' + alertstate); }); //But not here 
<script> $.get('http://jsonp.jit.su/?url=', function(data){ var alertstate=data.isit; alert('pretty awesome, eh? ' + alertstate); doWork(alertstate); }); function doWork(state) { if (state==1) { document.getElementById('theImg').src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Alert.gif"; //hoping audiotag1 is pre-defined play_single_sound(audiotag1); } } </script> 

You have two problems:

  1. $.get is asynchronous, so the place where you call $.get starts the ajax call, but then your code continues while the ajax call is happening asynchronously. So code following the $.get will run before the $.get completes.

  2. Your alertstate variable is a variable within the function you've given as a callback to $.get; it doesn't exist as of the code in your second code block which expects it to be a global variable.

Instead, put the logic from your second script into the $.get callback in the first:

<script> $.get('http://jsonp.jit.su/?url=', function(data){ var alertstate=data.isit; alert('pretty awesome, eh? ' + alertstate); if (alertstate==1) { document.getElementById('theImg').src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Alert.gif"; play_single_sound(audiotag1); } }); </script> 

If you really, really want them to be separate, you can wrap everything in a scoping function (to avoid creating globals), use a variable the callback closes over, and use the promise returned by the $.get, like this:

<script> (function() { var alertstate, promise; promise = $.get('http://jsonp.jit.su/?url=', function(data){ alertstate=data.isit; alert('pretty awesome, eh? ' + alertstate); }); promise.then(function() { if (alertstate==1) { document.getElementById('theImg').src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Alert.gif"; play_single_sound(audiotag1); } }); })(); </script> 

$.get() is asynchronous, So the above code will not be executed in order. Try the below code where in you need to call a method on success callback of $.get() methos.

<script> var alertstate; $.get('http://jsonp.jit.su/?url=', function(data){ alertstate=data.isit; alert('pretty awesome, eh? ' + alertstate); playSound(); }); </script> <script type="text/javascript"> function playSound(){ if (alertstate==1){ document.getElementById('theImg').src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Alert.gif"; play_single_sound(audiotag1); } } </script> 

I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns