Brendan Gooden Brendan Gooden - 5 months ago 8
Javascript Question

AJAX response being used in variable

I have an function with AJAX call as follows:

$(function AddItemsToCart() {
$('#AddToCartBtn').click(function () {
var cartData = new Array();

if ($("#PartsTable> tr").length > 0) {
var popupMsgTxt = '';
var counter = 0;
$('#PartsTable').find('tr').each(function () {
var row = $(this);


if (row.find('input[type="checkbox"]').is(':checked')) {



var cartDataInfo = new Object();
var $tds = $(this).find('td');

cartDataInfo["CustomerReference"] = $tds.eq(0).find('div').text();
cartDataInfo["Quantity"] = $tds.eq(2).find('div').text();

var $hidden_fields = $(this).find('input:hidden');
cartDataInfo["ItemID"] = $hidden_fields.eq(1).val();
cartDataInfo["ItemCode"] = $hidden_fields.eq(0).val();
popupMsgTxt = $tds.eq(0).find('div').text();

cartData[counter] = cartDataInfo;
counter = counter + 1;
}
});

var cartDataArray = { 'cartData': cartData };
var fleetGuid;

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "OrderFormServices.asmx/AddItemsToCart",
data: JSON.stringify(cartDataArray),
dataType: "json",
success: function (result) {
fleetGuid = result.d;
console.log(fleetGuid);
}
});

var items = [], options = [];

//Iterate all td's in first column
$('#PartsTable tr td:nth-child(1)').each(function () {
items.push($(this).text());
});

//restrict array to unique fleet numbers
items = $.unique(items);

//iterate unique array and build array of select options
$.each(items, function(i, item) {

//// THIS IS WHERE I AM GETTING THE 'UNDEFINED' ERROR ////

options.push('<tr><td align="left" valign="top">' + item + '</td><input type="hidden" name="GUID" value="'+ fleetGuid +'"><td class="delete" align="center" style="background-color: transparent;"><i class="fa fa-times text-red cur-pon"></i></td></tr>');
});

//finally empty the select and append the items from the array
$('#OrderSummaryTbody').append(options.join());

$("#PopupInnerTextModel").text(popupMsgTxt);
$("#popup").fadeIn(750).delay(1750).fadeOut(500);


}
});
});


The response successfully logs in my console log, as per below

enter image description here

However, when I try and use the variable 'fleetGuid' in a function (you will see the comment in my code above), it returns undefined. Could this be beacuse there is a delay in getting the response from the server?

Can anyone shed any light?

Answer

Do your logic in the success function of your ajax call

$(function AddItemsToCart() {
    $('#AddToCartBtn').click(function () {
        var cartData = new Array();

        if ($("#PartsTable> tr").length > 0) {
            var popupMsgTxt = '';
            var counter = 0;
            $('#PartsTable').find('tr').each(function () {
                var row = $(this);


                if (row.find('input[type="checkbox"]').is(':checked')) {



                    var cartDataInfo = new Object();
                    var $tds = $(this).find('td');

                    cartDataInfo["CustomerReference"] = $tds.eq(0).find('div').text();
                    cartDataInfo["Quantity"] = $tds.eq(2).find('div').text();

                    var $hidden_fields = $(this).find('input:hidden');
                    cartDataInfo["ItemID"] = $hidden_fields.eq(1).val();
                    cartDataInfo["ItemCode"] = $hidden_fields.eq(0).val();
                    popupMsgTxt = $tds.eq(0).find('div').text();

                    cartData[counter] = cartDataInfo;
                    counter = counter + 1;
                }
            });

            var cartDataArray = { 'cartData': cartData };
            var fleetGuid;

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "OrderFormServices.asmx/AddItemsToCart",
                data: JSON.stringify(cartDataArray),
                dataType: "json",
                success: function (result) {
                    fleetGuid = result.d;
                                var items = [], options = [];

            //Iterate all td's in first column
            $('#PartsTable tr td:nth-child(1)').each(function () {
                items.push($(this).text());
            });

            //restrict array to unique fleet numbers
            items = $.unique(items);

            //iterate unique array and build array of select options
            $.each(items, function(i, item) {

            //// THIS IS WHERE I AM GETTING THE 'UNDEFINED' ERROR ////

                options.push('<tr><td align="left" valign="top">' + item + '</td><input type="hidden" name="GUID" value="'+ fleetGuid +'"><td class="delete" align="center" style="background-color: transparent;"><i class="fa fa-times text-red cur-pon"></i></td></tr>');
            });

            //finally empty the select and append the items from the array
            $('#OrderSummaryTbody').append(options.join());

            $("#PopupInnerTextModel").text(popupMsgTxt);
            $("#popup").fadeIn(750).delay(1750).fadeOut(500);
                }
            });




        }
    });
});