jQuery: Made json request, process it in callback, access it outside the callback function?

Question

$("select[name=field[]]").live("change", function() {
         $.getJSON("/json.php",{id: $(this).val(), ajax: 'true'}, function(j){
             options = '';
          for (var i = 0; i < j.length; i++) {
           options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
          }
         });
         $(this).siblings("[name=logic[]]").html(options);
        });

So, I'd like to stick the result of the json callback (which it puts in options, a global variable) into a sibling of the object that is activating the event in the first place. The code I have above almost succeeds at this, but doesn't quite work because the callback doesn't happen instantly, so it sticks a blank string in the sibling. Thanks in advance and sorry if I got any terminology wrong there :)

Answer 1

Why not place the $(this).siblings("[name=logic[]]").html(options); line within the callback itself? The best place seems to be immediately after the for loop is complete.

  $("select[name=field[]]")
  .live
  (
    "change", 
    function() {
      var selectElem = $(this);
      $.getJSON
      (
        "/json.php",
        {id: $(this).val(), ajax: 'true'}, 
        function(j) {
          options = '';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + 
                       j[i].optionValue + '">' + 
                       j[i].optionDisplay + 
                       '</option>';
          }

          selectElem.siblings("[name=logic[]]").html(options);
        }
      );
    }
  );

EDIT: Added alternative code.

Answer 2

Hi,

JQuery has some issues with ajax, mainly when you want to trigger functions "only when the request finishes". post, get, live, and so on, have those issues. The only one that works fine is the global $.ajax, wich I recommend you to use.

Answer 3

I think you're looking at it backwards. You can make outer variables available to the inner function more easily. Here's the idea:

$("select[name=field[]]").live("change", function() {
    var theSelect = $(this);
    $.getJSON("/json.php",{id: $(this).val(), ajax: 'true'}, function(j){
        options = '';
            for (var i = 0; i < j.length; i++) {
                   options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            theSelect.siblings("[name=logic[]]").html(options);
            });
    });

I have a concern also. It appears that you're trying to add the options into the select that triggered the event. They are children, not siblings. They way you have it, this will add options to every select that is a sibling of the event source. If my assumption is correct, you could do something like this in your inner for loop, rather than building a gigantic HTML string:

$('<option>blah blah</option>').appendTo(theSelect);