1

I am having trouble using a JSON object outside of the AJAX success scope. I need to access the returned JSON object outside the AJAX success scope. I tried initializing a JS var outside the AJAX scope however and the assigning the JSON to it. However, this approach results in a catalog.item is undefined error. I appreciate any suggestions that will help me fix this problem.

This is what I tried:

This approach works perfectly fine (but not what I need):

            $('.catViewButton').click(function(){
                var overlay = jQuery('<div class="overlay"> </div>');
                overlay.appendTo(".invoice-body");
                $('.catalog-view-wrapper').show();
                $.ajax({
                    url: "ajax/invoice-get-data.php?loadCatalog=1",
                    dataType: "json",
                    success: function(catalog){
                        alert(catalog.item[0].image);
                         $('.catalog-img-container').attr("src", catalog.item[0].image);
                    }
                }); 

                        ...more code
                        .....
                        .....

This approach is what I need but results in an error:

        var catalog = [];
        $('.catViewButton').click(function(){
            var overlay = jQuery('<div class="overlay"> </div>');
            overlay.appendTo(".invoice-body");
            $('.catalog-view-wrapper').show();
            $.ajax({
                url: "ajax/invoice-get-data.php?loadCatalog=1",
                dataType: "json",
                success: function(cat){
                    catalog = cat;
                }
            }); 
            alert(catalog.item[0].image);
            $('.catalog-img-container').attr("src", catalog.item[0].image);
                    ...more code
                    .....
                    .....

Many thanks in advance!

4

4 回答 4

3

You could use the Deferred Object which deals with asynchronous calls for you. Doing so your code will be executed in the reading order, no matter when the response is sent back. You can add as many callback as you need :

jqxhr = $.ajax({
    url: "ajax/invoice-get-data.php?loadCatalog=1",
    dataType: "json"
}); 
jqxhr.done(function(catalog) { 
    alert(catalog.item[0].image);
    $('.catalog-img-container').attr("src", catalog.item[0].image);
});
jqxhr.done(function(catalog) { 
    // use catalog again
});

The documentation is full of examples about all of that : http://api.jquery.com/jQuery.ajax/.

于 2013-09-13T18:39:05.033 回答
1

This is where the a of ajax is really important. Asynchronous means the alert and the subsequent .attr() lines are running before your success callback is run. You really should put these lines inside the success callback.

于 2013-09-13T18:32:37.830 回答
1

Look at deferred obj and .when(). You do not have to put everything in the success callback.

http://api.jquery.com/category/deferred-object/ http://api.jquery.com/jQuery.when/

于 2013-09-13T18:39:33.767 回答
0

This is how AJAX works. The results returned to the success: function are local to that function.

If you need to access them outside of the success function, one option is to store them in an element - such as a hidden <input> field, like this:

Supposing a hidden input field like this:

<input type="hidden" id="myHiddenField" />

Revised AJAX

$.ajax({
    url: "ajax/invoice-get-data.php?loadCatalog=1",
    dataType: "json",
    success: function(catalog){
        $('#myHiddenField').val(catalog);
        $('#myHiddenField').trigger('blur');
    }
});

Outside the AJAX function:

$('#myHiddenField').blur(function() {
    var cat = $(this).val();
    //now do something with the data in var cat
});
于 2013-09-13T18:40:10.450 回答