CODEWITHSUNDEEP
javascriptjqueryajaxobjectreturn
frequent
frequent

Reputation: 28513

how to pass back an object from an ajax success handler to the calling function?

I'm trying to pass back the results of an Ajax request to the triggering function. But my response is "lost on the way"...

This is what I'm doing:

 some = function (){
     // inside some function - this will call getItems()
     content = $.parseJSON( dynoData[ dyn.method ]() );
 };

...
dynoData = {
    getItems : function(){

        var form = "",
        service = "../services/pull_items.cfc",
        method = "process",
        returnformat = "JSON",
        targetUrl = "",
        formdata = "form=getItems&method="+method+"&returnformat="+returnformat,
        successHandler = function(objResponse) {
            // here is the objResponse I need to pass back
            console.log( objResponse );
            return ( objResponse );
        };

    ajaxFormSubmit( form, 
                    service, 
                    formdata, 
                    targetUrl, 
                    successHandler, 
                    "yes", 
                    "", 
                    returnformat, 
                    "" );
    }


ajaxFormSubmit = function ( form, 
                            service, 
                            formdata, 
                            targetUrl, 
                            successHandler, 
                            dataHandler, 
                            errorHandler, 
                            returnformat, 
                            type ){     
    $.ajax({
        async: false,
        type: type == "" ? "get" : type,
        url: service,
        data: formdata,
        dataType: returnformat,
        success: function( objResponse ){
            if (objResponse.SUCCESS == true || 
                    typeof objResponse == "string" ){
                dataHandler == "yes" ? 
                    successHandler( objResponse ) : successHandler();   
            }
        },  
        error: function () {}
    });
}

Everything works correctly, but I don't know how to pass back objRespone from the Ajax successhandler via the getItems function to the call function.

Question:
Can anyone give me a hint?

Thanks!

EDIT:
Works like this:

// inside some function
var content,
    cbk = function(objResponse){
        content = objResponse;
        };

// get dynamic data
$.parseJSON( dynoData[ dyn.method ](cbk) );

console.log( content );
}

// inside getItems
getRetailers : function(cbk){
    ...
    successHandler = function(objResponse, cbk) {
        cbk( objResponse );
        };
ajaxFormSubmit( form, service, formdata, targetUrl, successHandler, "yes", "", returnformat, cbk )
}

So I'm hijqcking my last parameter to pass cbk instead of get/post

var ajaxFormSubmit = 
    function ( form, service, formdata, targetUrl, successHandler, dataHandler, errorHandler, returnformat, type ){
    // cleanup
    var override = null;

    if ( type !== "" && type !== "post" ){
        override = type;
        type = "get";
    }

    ... inside AJAX Successhandler
    dataHandler == "yes" ? successHandler( objResponse, override ) : successHandler( override )

So, if get/post are passed, override will be null. Seems to work fine.

Upvotes: 0

Views: 1207

Answers (1)

jaudette
jaudette

Reputation: 2303

Since your ajax call is asynchronous, the execution of the getItems function will be finished long before you get your data back. One thing you could do is add a callback argument to the call, and call it when your ajax succeeds. Something like:

getItems: function(cbk)
//(...)
    successHandler = function(objResponse) {
        // here is the objResponse I need to pass back
        cbk(ojbResponse);
    };

but then, you have to change your dynoData call to getItems to add the callback, that will finish the new object's setup.

Another solution would be to make the ajax call synchronous, but this halts your browser until you get your data back, which makes the system unresponsive.

Upvotes: 1

Related Questions