Question

I have the following javascript and JsonResult. The issue I am having is the ajax post doesn’t allow enough time for JsonResult to return the appropriate data. I probably don’t completely understand javascript processing and I’m sure this is by design but I’m wondering how I can make this a synchronous request. In short, wait for the JsonResult action to complete before the javascript continues processing.

<script type="text/javascript">
$(document).ready(function () {

    var table = document.getElementById("updateTable");
    var tasks = new Array("shutdown", "prep", "boot", "ready");
    var tasksLength = tasks.length;

    for (var i in tasks) {

        for (var loop = 1, max = table.rows.length; loop < max; loop++) {

            id = table.rows[loop].cells[0].innerHTML;
            task = tasks[i];

            ImageUpdateStatus = {
                ImageId: parseInt(id),
                Task: task,
                Status: "pending"
            }

            $.ajax({
                type: "POST",
                url: "UpdateStatus",
                data: $.postify(ImageUpdateStatus),
                success: function (data) {
                    var status = data.status;
                }
            });

            ImageUpdateStatus.Status = status;

            if (ImageUpdateStatus.Status == "success") {

                task = task.concat(" ");

                document.getElementById(task.concat(id)).src = "/PVSUtil_ver2/Assets/Images/Image.Success.png";

                j = parseInt(i) + 1;
                if (j < tasksLength) {
                    nextTask = tasks[j];
                    nextTask = nextTask.concat(" ");
                    document.getElementById(nextTask.concat(id)).src = "/PVSUtil_ver2/Assets/Images/Image.Load.gif";
                }
            }
        }
    }

    document.getElementById('nextButton').className = "navigation";
    document.getElementById('nextButton').disabled = false;
});

    //
    // GET: /Build/UpdateStatus
    public JsonResult UpdateStatus(ImageUpdateStatus imageUpdateStatus, SessionStateItemCollection sessionItems = null)
    {
        var data = new object();
        string status = null;

        ImageInfo imageInfo = new ImageInfo();
        IImageInfoServices svcImageInfo = new ImageInfoServicesRepository();
        imageInfo = svcImageInfo.GetImageByImageId(imageUpdateStatus.ImageId);

        IDeviceControlServices svcDevice = new DeviceControlServicesRespository();
        IPVSCommandServices svcPVSCmds = new PVSCommandServicesRespository();

        if (imageUpdateStatus.Task == "shutdown")
        {
            status = svcDevice.Shutdown(imageInfo.ImageId);
            //status = "success";

            data = new
            {
                status
            };
        }

        if (imageUpdateStatus.Task == "prep")
        {
            List<UpdateReasonForm> updateReasonForms;

            if (sessionItems.Keys.Count > 0)
            {
                updateReasonForms = sessionItems["UpdateReasonForms"] as List<UpdateReasonForm>;
            }
            else
            {
                updateReasonForms = Session["UpdateReasonForms"] as List<UpdateReasonForm>;
            }

            foreach (var item in updateReasonForms)
            {
                if (item.ImageId == imageInfo.ImageId)
                {
                    status = svcPVSCmds.PrepImage(imageInfo, item.NewVersion);
                }
            }

            data = new
            {
                status
            };
        }

        if (imageUpdateStatus.Task == "boot")
        {
            status = svcDevice.Boot(imageInfo.ImageId);

            data = new
            {
                status
            };
        }

        if (imageUpdateStatus.Task == "ready")
        {
            status = "success";

            data = new
            {
                status
            };
        }

        return this.Json(data, JsonRequestBehavior.AllowGet);
    }

Answer 1

Just move the code that relies on the result from the ajax request into the success callback function:

$.ajax({
    type: "POST",
    url: "UpdateStatus",
    data: $.postify(ImageUpdateStatus),
    success: function (data) {      
        ImageUpdateStatus.Status = data.status;

        if (ImageUpdateStatus.Status == "success") {

            task = task.concat(" ");

            document.getElementById(task.concat(id)).src = "/PVSUtil_ver2/Assets/Images/Image.Success.png";

            j = parseInt(i) + 1;
            if (j < tasksLength) {
                nextTask = tasks[j];
                nextTask = nextTask.concat(" ");
                document.getElementById(nextTask.concat(id)).src = "/PVSUtil_ver2/Assets/Images/Image.Load.gif";
            }
        }
    }
});