JQuery variable not carrying over to JavaScript [duplicate]

Question

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=http://5.175.191.73/alert.php', 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.

Answer 1

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=http://5.175.191.73/alert.php', 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=http://5.175.191.73/alert.php', 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>

Answer 2

$.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=http://5.175.191.73/alert.php', 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>