Javascript function not returning value

Question

I am calling a function with the following code:

var resultz = nsEditor.updateStringCall(debtID, column2Change, value2Change, 4, 10);

The function that is being called but doesn't return a value

updateStringCall: function(pdebtID, pcolumn2Change, pvalue2Change, pmin, pmax){
    try {
        var resultz2 = 0;
        $.ajax({
            type: "POST",
            url: "Components/MintLibraries.cfc",
            dataType: "json",
            cache: false,
            data: {
                method: 'StringUpdate',
                val2Change: pvalue2Change.trim(),
                debtID: pdebtID,
                column2Change: pcolumn2Change,
                greaterThan: pmin,
                lesserThan: pmax,
                returnFormat: "json"
            },
            success: function(response) {
                resultz2 = 1;
                return resultz2;
            },  //end done
            error: function(jqXHR, textStatus, errorThrown){
                resultz2 = 0;
                return resultz2;
        }); //end ajax call
    } catch (e) {
        resultz2 = 0;
        return resultz2;
    }  //end trycatch
}, // end updateStringCall

This function uses the .ajax to call a coldfusion cfc method StringUpdate:

<cffunction name="StringUpdate" access="remote" output="false" returntype="any" >    
     <cfargument name="val2Change" type="string"  required="true" />
     <cfargument name="debtID"  type="string"  required="true" />
     <cfargument name="column2Change"  type="string"  required="true" />
     <cfargument name="greaterThan"  type="numeric"   required="false" />
     <cfargument name="lesserThan"  type="numeric"  required="false" />
     <cfset var debt2Pass = int(val(arguments.debtID)) />
     <cfset var updQuery = "" />
     <cfset var retValue = 0 />
     <cfset var iVal = 0 /><cfset var valError = '' />
    <cftry>
     
        <cfquery name="updQuery" datasource="#application.datasource#" result="qResults"    >
                Update dmf set #arguments.column2Change# =
                 <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.val2Change#"/>
                 where DebtID = 
                 <cfqueryparam cfsqltype="cf_sql_smallint" value="#arguments.debtID#"/>
        </cfquery> 
        <cfset retValue = 1 />    
     <cfcatch type="Any" >
                <cfset thrown = ThrowCFError(405,'debug',  'Error updating ' &  arguments.DebtID,arguments.val2Change & ', ' &  arguments.debtID & ',' & arguments.column2Change)  />
                  <cfset retValue = 0 />
         </cfcatch>
         </cftry>
    <cfreturn retValue />
</cffunction>

The query runs successfully but the js function doesn't return a value (it shows up as undefined). Even if it gets an error, I would think I have accounted enough for that to at least get a return value.

Ideas?

Open up FireFox+Firebug, open the NET tab and look at your AJAX request and response. This may give you a clue. — Diodeus - James MacFarlane, Feb 21 '12 at 20:24

Ben Lee · Accepted Answer · 2012-02-21T20:36:22.537

The function is not returning a value because the returns in your method are embedded inside callback functions. They are only returning from those callbacks, not from your main function. Consider, for example, your "success" callback:

success: function(response) {
    resultz2 = 1;
    return resultz2;
}

This return is just returning from the success function... It doesn't bubble up to your updateStringCall function.

The reason it has to work this way is because ajax calls are asynchronous. Your method returns immediately while the request happens in the background. So in order to get the return value, you have to pass in a callback that has access to the value when it's ready, and then call the callback from within the ajax callbacks instead of returning a value.

So change your method definition to this:

// Note I added a "callback" parameter
function(pdebtID, pcolumn2Change, pvalue2Change, pmin, pmax, callback) { ... }

And then in your ajax callbacks, call it instead of returning a value:

success: function(response) {
    resultz2 = 1;
    callback(resultz2);
},
error: function(jqXHR, textStatus, errorThrown) {
    resultz2 = 0;
    callback(resultz2);
});

Finally, pass in a callback when you call this method:

nsEditor.updateStringCall(debtID, column2Change, value2Change, 4, 10, function(resultz) {
    // Do something with resultz
});

One final note, if you are going to have that blanket try/catch in there, you should change that to use the callback also:

catch (e) {
    resultz2 = 0;
    callback(resultz2);
}

But really, I'd recommend just taking that try/catch out altogether. I can't see how that can possibly be helpful here. It will only hide actual problems with code that already has a better structure for error handling. I suspect you just put in there to debug this return problem, but if it was there already, just take it out.

This is the world of event-driven functional programming! It's a very common sort of structure in javascript.

You are right, that is exactly why I put in the try/catch into the function and at one point during the writing of the scripts have had try/catch everywhere including the coldfusion cfc. Thank you so much. — Michael BW, Feb 22 '12 at 15:03

score 4 · Answer 2 · answered Feb 21 '12 at 20:24

4

Ajax calls are asynchronous. You'll have to work with your result from within the success callback of the $.ajax().

answered Feb 21 '12 at 20:24

Jordan

31,971
6
56
67

score 0 · Answer 3 · edited Dec 13 '21 at 10:59

0

Add async: false like this:

$.ajax({
  type: "POST",
  async: false,
  url: "Components/MintLibraries.cfc",
  dataType: "json",
  cache: false,
})

edited Dec 13 '21 at 10:59

homer

882
8
23

answered Dec 13 '21 at 09:47

Simran Gulani

1
1

Javascript function not returning value

3 Answers3

Linked

Related