global variable is empty within function

Question

I have this code http://jsfiddle.net/meridius/ysDGm/ where the problem is with out.id variable in append part. For reasons I can't explain, that variable is empty in that part.

I think the problem is with that variable's scope and I tried everything but with no luck. Please note, the problem is NOT with AJAX, that works fine!

Here is shortened version of that Fiddle:

<tr>
    <td>one</td>
    <td>
        <select name="zadavatel">
            <option value="0">-- vyberte --</option>
            <option value="new">-- nový zadavatel --</option>
        </select>
    </td>
</tr>

var out = {};
$('select').bind("change", function() {
  if ($(this).val() == "new") {
    var nazev = prompt('Question', 
                $(this).parent().siblings(':first-child').text());
    if (nazev == null) {
      $(this).val($.data(this, 'current'));
      return false;
    } else {
      var pole2 = {};
      pole2["nazev"] = nazev;
      $.ajax({
        type    : "POST",
        cache    : false,
        url      : "./pokus_zad.php",
        data    : JSON.stringify(pole2),
        success  : function(data) {
          out = JSON.parse(data);  //data.id
        }
      });
      out.id = 15;  // this work, but it SHOULD work without it (with AJAX)
      $(this).closest('table').find('select').each(
        function() {
          $(this).append($('<option>', { "value" : out.id }).text(nazev));
        });
      $(this).closest('select').val(out.id).attr('selected', 'selected');
    }
  }
  $.data(this, 'current', $(this).val());
});

Search for "return jquery ajax value". You will find enough duplicates. The cause is very simple: the value of the [global] variable has not been set at the point it is used. Thats all. — user166390
– user166390, Commented Jul 16, 2012 at 18:35
stackoverflow.com/questions/560307/… , stackoverflow.com/questions/6917796/… , stackoverflow.com/questions/8532082/return-value-of-post-call , stackoverflow.com/questions/31129/… , stackoverflow.com/questions/1632039/return-value-from-ajax-call , stackoverflow.com/questions/1181665/… — user166390
– user166390, Commented Jul 16, 2012 at 18:38
AJAX is asynchronous, so code flow continues while the ajax call is being performed. You are trying to use your out variable before it gets set. Try moving the code after your ajax call into the success callback — MrOBrian
– MrOBrian, Commented Jul 16, 2012 at 18:41
The rest of your code executes while the ajax call is doing its thing. Put your in the success function or setup a callback, or eve better a deferred. — Jack
– Jack, Commented Jul 16, 2012 at 18:42

Inkbug · Accepted Answer · 2012-07-16 18:44:00Z

0

AJAX is asynchronous, and therefore the setting of the out variable from within it will happen after the rest of the function.

      $.ajax({
        type    : "POST",
        cache    : false,
        url      : "./pokus_zad.php",
        data    : JSON.stringify(pole2),
        success  : function(data) {
          out = JSON.parse(data);  //data.id
          $(this).closest('table').find('select').each(
            function() {
              $(this).append($('<option>', { "value" : out.id }).text(nazev));
            });
          $(this).closest('select').val(out.id).attr('selected', 'selected');
        }
      });

answered Jul 16, 2012 at 18:44

Inkbug

1,6931 gold badge11 silver badges29 bronze badges

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

Comments

Yoni Baciu · Accepted Answer · 2012-07-16 18:44:43Z

You should put the append code inside the success block. Because the ajax call is asynchronous the append statement runs before the 'out' variable is set by the ajax callback.

var out = {};
$('select').bind("change", function() {
  if ($(this).val() == "new") {
    var nazev = prompt('Question', 
                $(this).parent().siblings(':first-child').text());
    if (nazev == null) {
      $(this).val($.data(this, 'current'));
      return false;
    } else {
      var pole2 = {};
      pole2["nazev"] = nazev;
      $.ajax({
        type    : "POST",
        cache    : false,
        url      : "./pokus_zad.php",
        data    : JSON.stringify(pole2),
        success  : function(data) {
          out = JSON.parse(data);  //data.id
          $(this).closest('table').find('select').each(
            function() {
              $(this).append($('<option>', { "value" : out.id }).text(nazev));
            });
          $(this).closest('select').val(out.id).attr('selected', 'selected');
        }
      });
    }
  }
  $.data(this, 'current', $(this).val());
});

meridius · Accepted Answer · 2012-07-17 08:13:00Z

Great, thanks guys!

Based on your suggestions I moved my append code to success callback of AJAX function AND I also had to create variable for $(this) since it is different $(this) inside AJAX than it is outside. ;)

The working JQuery part now looks like this:

var out = {};
$('select').bind("change", function() {
    if ($(this).val() == "new") {
        var nazev = prompt('Zadejte název zadavatele', $(this).parent().siblings(':first-child').text());
        if (nazev == null) {
            $(this).val($.data(this, 'current'));
            return false;
        } else {
            var select = $(this);
            var pole2 = {};
            pole2["nazev"] = nazev;
            $.ajax({
                type        : "POST",
                cache       : false,
                url         : "./pokus_zad.php",
                data        : JSON.stringify(pole2),
                success : function(data) {
                    out = JSON.parse(data); //data.id
                    select.closest('table').find('select').each(
                        function() {
                            $(this).append($('<option>', { "value" : out.id }).text(nazev));
                        });
                    select.val(out.id).attr('selected', 'selected');
                }
            });
        }
    }
    $.data(this, 'current', $(this).val());
});

Collectives™ on Stack Overflow

global variable is empty within function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related