JQuery variable not carrying over to JavaScript

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.

You need to move the second JS into where the data is received — mplungjan, Mar 08 '14 at 18:43

score 5 · Accepted Answer · answered Mar 08 '14 at 18:45

You have two problems:

$.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.
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>

Ah, finally someone posted a working piece of code - so I can delete mine... — mplungjan, Mar 08 '14 at 18:50

Subash Selvaraj · Answer 2 · 2014-03-08T18:48:53.230

3

$.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>

edited Mar 08 '14 at 18:48

answered Mar 08 '14 at 18:43

Subash Selvaraj

3,385
1
14
17

@mplungjan OP has two script tags. Who knows each might be in different place. – Subash Selvaraj Mar 08 '14 at 18:49
1

getting worse and worse! – mplungjan Mar 08 '14 at 18:49
1

You had the variable initialised to a non-existant data before - anyway better versions have been posted now – mplungjan Mar 08 '14 at 18:53

score 2 · Answer 3 · answered Mar 08 '14 at 18:47

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

$.get('http://jsonp.jit.su/?url=http://5.175.191.73/alert.php', function(data){
    var alertstate=data.isit;

    //You can use alertstate in here
    alert('pretty awesome, eh? ' + alertstate);
});

//But not here

score 2 · Answer 4 · answered Mar 08 '14 at 18:50

2

<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);
    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>

answered Mar 08 '14 at 18:50

lshettyl

8,166
4
25
31

call doWork not dowork, case sensitivity – S. Ferit Arslan Mar 08 '14 at 18:52

JQuery variable not carrying over to JavaScript

4 Answers4