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

2

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
});

answered Dec 11, 2012 at 7:54

Jonathan Harrison

8931 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

0

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..

answered Jan 14, 2013 at 7:56

Gautam

1,7408 gold badges32 silver badges68 bronze badges

Collectives™ on Stack Overflow

using On success function in Jquery Ajax call

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related