Related
I am working on Web page having an ajax call to the server and from the server(Controller) again a WCF service is called(which takes time) for fetching some data.
Inside server(Controller) i called to service in Parallel by using Task and async-await.
My problem is:
after opening the page that has code for calling the controller and WCF service, I can't redirect my tab/page to another URL by clicking on anchor tab present in UI. until ajax call result is retrieved.
UI CODE:
$(function () {
if (AutomationType.toLowerCase() === "desktop") {
$.ajax({
async: true,
url: "/" + AutomationType + "/Home/GetAllController",
data: { "hostName": hostname},
type: 'POST',
dataType: 'json'
}).success(function (response) {
debugger;
})
}
});
i have tried to abort the ajax call also as below,
$(function() {
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(i, jqXHR) { // cycle through list of recorded connection
jqXHR.abort(); // aborts connection
$.xhrPool.splice(i, 1); // removes from list by index
});
}
$.ajaxSetup({
beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, // annd connection to list
complete: function(jqXHR) {
var i = $.xhrPool.indexOf(jqXHR); // get index for current connection completed
if (i > -1) $.xhrPool.splice(i, 1); // removes from list by index
}
});
})
// Everything below this is only for the jsFiddle demo
$('a').click(function () {
$.xhrPool.abortAll();
});
Server(Controller) Code
public async Task<JsonResult> GetAllController(string hostName)
{
string IsControllerRunning = string.Empty;
var currentHost = string.Empty;
var currentRunId = string.Empty;
var currentStatus = string.Empty;
var ipDns = string.Empty;
Stopwatch sw = new Stopwatch(); sw.Start();
List<List<ExecutionStepResult>> returnresultArray = new List<List<ExecutionStepResult>>();
List<Task<IEnumerable<ExecutionStepResult>>> taskList = new List<Task<IEnumerable<ExecutionStepResult>>>();
Debug.WriteLine("starting 1 " + sw.Elapsed);
var resultArray = hostName.TrimEnd('^').Split('^');
for (int i = 0; i < resultArray.Length; i++)
{
string host = resultArray[i];
Task<IEnumerable<ExecutionStepResult>> task = new Task<IEnumerable<ExecutionStepResult>>(() => getServiceResultByTask(host));
task.Start();
taskList.Add(task);
}
foreach (Task<IEnumerable<ExecutionStepResult>> taskitem in taskList)
{
try
{
Debug.WriteLine("calling task " + sw.Elapsed);
IEnumerable<ExecutionStepResult> val = await taskitem;
returnresultArray.Add(val.ToList());
}
catch (Exception ex)
{
returnresultArray.Add(new List<ExecutionStepResult>() { new ExecutionStepResult() { IsError = true, ErrorMessage="true" ,CustomMessage = ex.Message.ToString() } });
}
}
for (int i = 0; i < resultArray.Length; i++)
{
string host = resultArray[i];
currentHost = host.Split('|').GetValue(1).ToString();
currentStatus = host.Split('|').GetValue(2).ToString();
currentRunId = host.Split('|').GetValue(0).ToString();
ipDns = host.Split('|').GetValue(3).ToString();
List<ExecutionStepResult> exeResponse = returnresultArray[i].ToList();
if (exeResponse.Count() > 0 && (currentStatus != "3" || (currentStatus == "3" && exeResponse[i].ErrorMessage == "true")))
IsControllerRunning += host + "|" + exeResponse[0].CustomMessage + "^";
else if (exeResponse.Count() > 0 && currentStatus == "3" && exeResponse[0].ErrorMessage == "false")
IsControllerRunning += host;
}
Debug.WriteLine("end " + sw.Elapsed);
sw.Stop();
return Json(IsControllerRunning, JsonRequestBehavior.AllowGet);
}
calling WCF service:
private IEnumerable getServiceResultByTask(string hosts)
{
using (var service = new RemoteCommandClient())
{
try
{
System.Threading.Thread.Sleep(15000);
string currentHost = hosts.Split('|').GetValue(1).ToString();
string currentStatus = hosts.Split('|').GetValue(2).ToString();
string currentRunId = hosts.Split('|').GetValue(0).ToString();
string ipDns = hosts.Split('|').GetValue(3).ToString();
IEnumerable<ExecutionStepResult> result = service.ExecuteRemoteWithRunId("CHECK_CURRENT_EXECUTION", Convert.ToInt32(currentRunId));
return result;
} catch (Exception ex)
{ throw ex; }
}
}
Still, I don't know how to open /redirect a page URL if an ajax call is running on the server. I am using signalR in the same page also. Please help.
I have several ajax requests in my project so to simplify my code i created a function to handle the requests.
I am passing a success function to load when status is == 200 however even though the data is being sent correctly i am receiving "uncaught type error success is not a function" error. Using typeof i can see success starts as a function but then displays as an object.
here is my code
//function to handle ajax requests
function sendRequest(link, requestType, success, data) {
var request = new XMLHttpRequest(),
url = link;
request.open(requestType, url, true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
console.log("success");
var responseText = request.responseText;
console.log(typeof(success));
success(responseText);
} else {
consoloe.log("error");
}
}
request.send(data);
}
//calling function passing success function as argument
var jsonText = "json.php";
sendRequest(jsonText, 'GET', function (response) {
var json = JSON.parse(response),
postcodesArray = [],
jsonLength = json.length,
i;
for (i = 0; i < jsonLength; i++) {
postcodesArray.push(json[i].from_postcode);
}
var postcodes = postcodesArray.filter(Boolean),
pstcodeLength = postcodes.length,
n;
for (n = 0; n < pstcodeLength; n++) {
geocodeAddress(postcodes[n]);
}
});
//EDIT fiddle containing all my code
https://jsfiddle.net/x1qe73s8/
Reading your jsfiddle, your code is probably going through the sendLatLng function where you have
sendRequest(url, 'POST', null, data);
typeof null is "object".
So I have a loop, which performs an ajax call on each iteration and I want to set the progress bar updated.. But it is not updating, it goes to 100% directly when ending...
I've tried to put the bar update call outside the success action (inside the loop directly) but it isn't working either..
$('button.page').on('click', function(e){
var $userList = textArray($('#page-userlist').val().replace('http://lop/', '').split(/\n/));
var $proxyList = textArray($('#page-proxylist').val().replace('http://', '').split(/\n/));
var $question = $('#page-question').val();
var data = {
question: $question,
users: $userList,
proxies: $proxyList
};
var i = 0, p = 0, max = data.proxies.length, totalusers = data.users.length, percent = 0;
$('#log').append("\n" + moment().calendar() + "\n");
var progressbar = $('#page-progress');
$.each(data.users, function(k, u){
if(typeof(p) !== 'undefined' && p !== null && p > 0)
{
if(i % 10 == 0 && i > 1) p++;
if(p == max) return false;
}
var proxy = data.proxies[p];
percent = Math.round((i / totalusers) * 100);
$.ajax({
type: "POST",
url: Routing.generate('viral_admin_bot_page'),
data: {question: $question, user: u, proxy: proxy},
success: function(result) {
$('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
$(progressbar).width(percent + "%");
},
error: function(error) {
$('#log').append(error);
}
});
i++;
});
});
If i do console.log(percent); it is updating perfectly on each iteration, so I don't know where can be the problem.
Here is my code (without the ajax call because it isn't the problem) http://jsfiddle.net/dvo1dm03/20/
it will output to console the percentage, the objetive is to update the bar to the percentage completed in each loop, so it goes in "realtime" with loop.
Ok, here's how to do it asynchrounously.
var speed = 75;
var number_of_calls_returned = 0; // add number_of_calls_returned++ in your ajax success function
var number_of_total_calls;
var loaded = false;
function processUserData(){
if( number_of_calls_returned < number_of_total_calls){
setTimeout(function(){processUserData();}, 200);
}
else{
//received all data
// set progressbar to 100% width
loaded = true;
$("#page-progress").animate({width: "100%"},500);
$("#page-proxylist").val("Received data");
}
}
function updateProgress(percent, obj){
setTimeout(function(x){
if(!loaded)
$(obj).width(x + "%");
}, percent*speed, percent);
}
$('button.page').on('click', function (e) {
var $userList = textArray($('#page-userlist').val().replace('http://lop/', '').split(/\n/));
var $proxyList = textArray($('#page-proxylist').val().replace('http://', '').split(/\n/));
var $question = $('#page-question').val();
var data = {
question: $question,
users: $userList,
proxies: $proxyList
};
var i = 0,
p = 0,
max = data.proxies.length,
totalusers = data.users.length,
percent = 0;
//$('#log').append("\n" + moment().calendar() + "\n");
var progressbar = $('#page-progress');
number_of_total_calls = totalusers;
$.each(data.users, function (k, u) {
if (typeof (p) !== 'undefined' && p !== null && p > 0) {
if (i % 10 == 0 && i > 1) p++;
if (p == max) return false;
}
var proxy = data.proxies[p];
percent = (i / totalusers) * 100; //much smoother if not int
updateProgress(percent, progressbar);
i++;
// simulate ajax call
setTimeout(function(){number_of_calls_returned++;}, Math.random()*2000);
});
//callback function
setTimeout(function(){processUserData();}, 200);
});
var textArray = function (lines) {
var texts = []
for (var i = 0; i < lines.length; i++) {
// only push this line if it contains a non whitespace character.
if (/\S/.test(lines[i])) {
texts.push($.trim(lines[i]));
}
}
return texts;
}
Check it out here! jsFiddle (really cool!)
Your problem is cause by the fact that you have a closure for your success function and every success function shares the same percent variable. You can fix it like this:
success: function(percent, result) {
$('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
$(progressbar).width(percent + "%");
}.bind(percent),
Where you'll need to shim bind in older browsers, or like this, which is a little uglier, but should work everywhere without a shim:
success: (function(percent) { return function(result) {
$('#log').append("\nAtacado usuario " + u + " con proxy: " + proxy + "\n");
$(progressbar).width(percent + "%");
}; }( percent ),
if what you want is to increase the update bar with each success of AJAX calls I'd suggest an easier solution (I've simplified the js code for clarity's sake):
$('button').click(function (e) {
var i = 0,
cont = 0,
totalusers = 100,
percent = 0;
var progressbar = $('#page-progress');
for (; i < totalusers; i++) {
$.ajax({
type: "POST",
url: '/echo/json/',
data: {
question: 'something',
user: 1,
proxy: 2
},
success: function (result) {
cont += 1;
percent = Math.round((cont / totalusers) * 100);
progressbar.width(percent + "%");
},
error: function (error) {
$('#log').append(error);
}
});
};
});
You can see it in action in this fiddle.
Hope this helps or at least give you some ideas.
Update the progress bar using setTimeout method.
it will wait for some time and then update the width of progressbar.
myVar = setTimeout("javascript function",milliseconds);
Thanks,
Ganesh Shirsat
I would like to make a recommendation of trying to make a self contained example that doesn't rely on the post so that it is easier for you or us to solve the problem
As well, you can console log elements so you could try logging the progressbar element, percent and the response of the ajax request
(This code is to replace the javascript sections of the fiddler)
var i = 0;
moveProgress();
function moveProgress(){
if(i < 10000)
{
setTimeout(function(){
$('#page-progress').width((i / 1000) * 100);
moveProgress();
},2);
i++;
}
}
The reason that it wasn't working was because the loop ran so fast that it was loaded by the time the script loaded it, the timeout allows you to delay the execution a bit(Though not necessarily recommended to use because of potential threading issues.
for(var x=0 ; x<=23 ; x++)
{
AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), true);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}/* end if */
}/* end function */
}/* end if */
}/* end if */
I'm trying to call ajax multiple times to load data in a set of divs: 24 of them, they start with divTime0, divTime1, divTime2, divTime3...... divTime23. Each time its called, the value for the TimeSlot corresponds with the div e.g. TimeSlot=0 goes in divTime0.
I know the ajax calls here are overriding each other but have no idea how to solve it without writing out 24 blocks of code to get it working. N.B. this is working if i execute singularly without the for loop but it will just populate 1 of the 24 divs
The following code worked to load 24 divs with images:
for(var x=0 ; x<=23 ; x++)
document.getElementById("timeanalysisimg"+x).src="ajax.php?id=15&AreaID=" +encodeURIComponent(AreaID);
I'm trying to do something similar without having to write unnecessary code. Any ideas?
I got it working. Just pasting the solution
for(var x=0 ; x<=9 ; x++)
{
test(x, AreaID); // calling the function which resides externally to the loop
}
An external method:
function test(x, AreaID)
{
var AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject();
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), true);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}
}
}
}
Put the block into a function:
for(var x=0 ; x<=23 ; x++)
{
(function(x) {
var AjaxRequest16 = getXmlHttpRequestObject();
//rest of the code
}(x));
} //end of for loop
you can do something like:
for(var x=0 ; x<=23 ; x++)
{
req(x);
}
function req(x){
var AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), true);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}/* end if */
}/* end function */
}/* end if */
}
I changed all the code, but it does exactly what you want, without using asynchronous = false, and browser freezing:
function ajaxRequest(url, callback) {
var req = null;
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) // if IE
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
} else {
throw ("No Ajax support!");
return;
}
req.open('GET', url, true);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (typeof (callback) == "function") callback(req);
}
};
req.send(null);
return req;
}
function loadMyData() {
var x = parseInt(arguments[0]);
if (x > 23) {
alert("all 24 is loaded!");
}
var url = "ajax.php?id=16&AreaID=" + encodeURIComponent(AreaID) +
"&month=" + encodeURIComponent(document.getElementById("cboMonths").value) +
"&TimeSlot=" + encodeURIComponent(x);
var callback = Function('req', 'document.getElementById("divTime' + x + '").innerHTML =' +
' req.responseText;' +
'loadMyData(' + x + ');');
ajaxRequest(url, callback);
}
loadMyData(0);
you should make your ajax calls asenkron false try this:
for(var x=0 ; x<=23 ; x++)
{
AjaxRequest16 = null;
AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0)
{
AjaxRequest16.open("GET", "ajax.php?id=16&AreaID=" +encodeURIComponent(AreaID)+ "&month="
+encodeURIComponent(document.getElementById("cboMonths").value)+ "&TimeSlot=" +encodeURIComponent(x), false);
AjaxRequest16.send(null);
AjaxRequest16.onreadystatechange = function()
{
if(AjaxRequest16.readyState == 4)
{
var innerHTML = AjaxRequest16.responseText.toString();
/* Retrieve data from the server and display. */
document.getElementById("divTime"+x).innerHTML = innerHTML;
}/* end if */
}/* end function */
}/* end if */
}/* end if */
Sequentially load content with ajax
here is a simple ajax function for modern browsers (chrome,safari,ie10,android,ios)
function ajax(a,b,c){//url,function,just a placeholder
c=new XMLHttpRequest;
c.open('GET',a);
c.onload=b;
c.send()
}
and this is how you load content sequentially
var current=0,
x=23;
function handler(){
document.getElementById("divTime"+current).innerHTML=this.response;
current++
if(current<x){
ajax('url.php?id='+current,handler)
}
}
ajax('url.php?id='+current,handler);
this way you don't overwrite previous ajax calls.
Multiple simultaneous ajax calls is a bad solution.
anyway to achieve multiple ajax calls at the same time you need to create multiple ajax request functions.
var ajaxcall=[];
ajaxcall[0]=new XMLHttpRequest;
ajaxcall[0].CUSTOMID=0;
ajaxcall[0].open('GET','url.php?id='+0);
ajaxcall[0].onload=function(){console.log(this.CUSTOMID,this.response)};
ajaxcall[0].send();
What it boils down to is the asynchronous nature of Ajax calls.
Each Ajax context must be kept alive until the request is over (completion or failure).
In your initial code, you use only one Ajax request context. The loop launches the first request, but then overwrites its context immediately with the second one long before the first was processed. When the server responds (a few milliseconds later), there is no handler left on the browser side to process the response (except for the 24th one).
What your workaround does is to create a different context and callback for each request, since your global function stores them in different closures.
However, as a result you will fire a hail of 24 Ajax requests simultaneously on the server, which is likely to cause unnecessary overhead, or even crashes if your PHP script does not expect to execute concurrently on the same request. Besides, synchronizing your code on completion of these requests will not be easy.
Here is what I use for my own apps :
// --------------------------------------------------------------------
// Ajax lite
// --------------------------------------------------------------------
function PageCache (target, void_contents)
{
this.text = {};
this.req = {};
this.void_contents = void_contents || 'void';
this.target = target;
}
PageCache.prototype = {
// synchronous load
load: function (page)
{
if (!this.text[page]) this.text[page] = this._launch_request (page);
return this.text[page];
},
// asynchronous load
fetch: function (page, action)
{
if (this.text[page])
{
action (this, page);
return;
}
if (this.req[page]) return;
this.req[page] = this._launch_request (page,
function(_this, _page, _action) {
return function(){
_this._loader(_page,_action);
};
}(this,page,action));
},
_launch_request: function (page, callback)
{
var req;
try {
req = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
req.open('GET', this.target.replace (/\$/, page), callback!=undefined);
if (callback) req.onreadystatechange = callback;
req.send(null);
return callback ? req : this._get_result (req);
},
_get_result: function (req)
{
return (req.status < 400)
? req.responseText
: this.void_contents;
},
_loader: function (page, action)
{
if (!this.req[page] || (this.req[page].readyState != 4)) return;
this.text[page] = this._get_result (this.req[page])
delete this.req[page];
if (action) action (this.text[page], page);
}
}
In your example, you could use it like so:
First, a bit of cleanup :
function compute_id (AreaID,x) {
return "id=16&AreaID="
+ encodeURIComponent(AreaID)
+ "&month="
+ encodeURIComponent(document.getElementById("cboMonths").value)
+ "&TimeSlot="
+ x; // I suspect all the encodeURIComponent() calls are unnecessary
}
var Ajax = new PageCache (
'ajax.php?$', // '$' will be replaced with fetch() parameter
'error loading data'); // contents in case of request failure
1) simultaneous requests (not recommended)
for (var x = 0; x != 24 ; x++) {
// store current x value in a closure
var request_done = function (_x) {
return function (responseText) {
document.getElementById("divTime"+_x).innerHTML = responseText;
}}(x);
}
Ajax.fetch (compute_id (AreaID,x), request_done);
}
2) sequential blocking requests (very bad, don't do it unless your code cannot proceed without the data)
for (var x = 0; x != 24 ; x++) {
document.getElementById("divTime"+x).innerHTML =
Ajax.load (compute_id (AreaID,x));
}
3) sequential non-blocking requests
var AjaxCtx = { x:0, max:24};
// launch first request
Ajax.fetch (compute_id (AreaID, AjaxCtx.x), request_done);
function request_done (responseText) {
document.getElementById("divTime"+AjaxCtx.x).innerHTML = responseText;
// request completion triggers the next
if (++AjaxCtx.x != AjaxCtx.max)
Ajax.fetch (compute_id (AreaID,AjaxCtx.x), request_done);
}
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);
}
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";
}
}
}
});
You don't want to make the request synchronous; you want to put all code that depends on the result into your callback:
$.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";
}
}
}
});
$.ajax({
type: "POST",
async: false,
url: "UpdateStatus",
data: $.postify(ImageUpdateStatus),
success: function (data) {
var status = data.status;
}
});
but you really should avoid this, you should really look into making your application work with that wait for the ajax request
I really feel that you should aggregate any data you need to render your view for the first time on the server side and then push it down to the page. You could use JavaScript to do the rendering once the data is in the page (could be stored in JSON format in a hidden field) but I don't think it's optimal to have the page making an Ajax call when it's rendering for the first time.