title: global variable is empty within function
body: <p>I have this code <a href="http://jsfiddle.net/meridius/ysDGm/" rel="nofollow">http://jsfiddle.net/meridius/ysDGm/</a> where the problem is with <code>out.id</code> variable in <code>append</code> part. For reasons I can't explain, that variable is empty in that part.</p>
  
  <p>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!</p>
  
  <p>Here is shortened version of that Fiddle:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;one&lt;/td&gt;
      &lt;td&gt;
          &lt;select name="zadavatel"&gt;
              &lt;option value="0"&gt;-- vyberte --&lt;/option&gt;
              &lt;option value="new"&gt;-- nový zadavatel --&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  
  
  <pre><code>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($('&lt;option&gt;', { "value" : out.id }).text(nazev));
          });
        $(this).closest('select').val(out.id).attr('selected', 'selected');
      }
    }
    $.data(this, 'current', $(this).val());
  });
  </code></pre>