using On success function in Jquery Ajax call

Question

I have a .js class named Widget.js In widget.js class I am initiating a errors.ascx control class that has a JS script function "GetErrors()" defined in it. Now, when I call GetErrors from my widgets.js class it works perfectly fine. I have to populate a few controls in widgets.js using the output from GetErrors() function. But the issue is that at times the GetErrors() takes a lot of time to execute and the control runs over to my widgets class. and the controls are populated without any data in them.

So the bottom line is that I need to know the exact usage of the OnSuccess function of Jquery.

this is my errors.ascx code

var WidgetInstance = function () { this.GetErrors = function () { $.ajax({ url: '/Management/GetLoggedOnUsersByMinutes/', type: 'GET', cache: false, success: function (result) { result = (typeof (result) == "object") ? result : $.parseJSON(result); loggedOnUsers = result; } }); },.....

The code for the Widgets.js file is

function CreateWidgetInstance() { widgetInstance = new WidgetInstance(); widgetInstance.GetErrors(); }

now I want that The control should move from

widgetInstance.GetErrors();

only when it has produced the results.

any Help???

Call the function that creates the controls inside the success callback. That's what callbacks are there for. — Felix Kling
– Felix Kling, Commented Dec 11, 2012 at 7:40
Hi Check my answer if it is useful for u... I suggested using async property in AJAX call... — Ayyappan Sekar
– Ayyappan Sekar, Commented Dec 11, 2012 at 7:58

Jonathan Harrison · Accepted Answer · 2012-12-11 07:54:28Z

You can use jQuery Deferreds. $.ajax() actually returns a promise. So you can do the following:

var WidgetInstance = function () { this.GetErrors = function () { return $.ajax({ url: '/Management/GetLoggedOnUsersByMinutes/', type: 'GET', cache: false }); },.....

Then you can process the results like so...

widgetInstance.GetErrors().done(function(result){ //process the resulting data from the request here });

Ayyappan Sekar · Accepted Answer · 2012-12-11 07:56:58Z

0

Hi Simply use async:false in your AJAX call.. It will block the control till the response reaches the client end...

var WidgetInstance = function () { this.GetErrors = function () { $.ajax({ url: '/Management/GetLoggedOnUsersByMinutes/', type: 'GET', cache: false, async: false, success: function (result) { result = (typeof (result) == "object") ? result : $.parseJSON(result); loggedOnUsers = result; } }); },.....

answered Dec 11, 2012 at 7:56

Ayyappan Sekar

11.5k2 gold badges22 silver badges22 bronze badges

5 Comments

Felix Kling Over a year ago

Which is especially bad if the Ajax call takes a long time, since it freezes the browser UI.

Ayyappan Sekar Over a year ago

@FelixKling: yeah.. You are right.. But it was the actual requirement...Right?

Felix Kling Over a year ago

I don't know, it does not say anything about this. But even if they were, it would be better not to use async: false ;) In the worse case, the browser will ask the user to terminate the script because the script is running too long.

Gautam Over a year ago

NO I can't use Asyn: false since there are a number of other AJAX calls also running parallel that needs to be looked upon

Ayyappan Sekar Over a year ago

@Monga: So Better place the scripts (that need to be run after the results were produced) inside a js function and call it inside the success callback of AJAX call... I found no other solutions better than this,

Gautam · Accepted Answer · 2013-01-14 07:56:06Z

I did a simple solution for this.. I just called my populating functions in the onSuccess event of the GetErrors() of my control and everything worked perfectly..

Collectives™ on Stack Overflow

using On success function in Jquery Ajax call

3 Answers 3

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Related