Problem with jQuery AJAX scope

Question

I am having trouble with jQuery with trying to modify a global variable from within the success callback:

<html>
<head>
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript">

  // Define items in the global scope
  items = null;

  // Get items from XML for a given category ID
  function getItems(categoryID)
  {
    $.ajax({
      type: 'GET',
      url: 'items.xml',
      dataType: 'xml',
      success: function(xml){
        items = $(xml).find('category[id="'+categoryID+'"]').children().first();
        // This works (returns the name of the first item)
        alert( items.attr('name') );
      }
    });
  }
</script>
</head>

<body>
<script type="text/javascript">
  $(function(){
    getItems(1);

    // This doesn't work (returns null)
    alert( items.attr('name') );
  });
</script>
</body>

</html>

What am I doing wrong?

Victor · Accepted Answer · 2011-02-23 00:06:41Z

3

This is because the callback hasnt finished by the time you are executing the alert.

the Get request is asynchronous so execution continues even if it has not finished. So when the alert() statement executes, the success callback has not yet executed, therefore items is still null.

You can either do a synchronous call, or include whatever you are trying to do inside the success callback.

answered Feb 23, 2011 at 0:06

Victor

4,7311 gold badge28 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Problem with jQuery AJAX scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related