How to grab return value from an ajax call?

Question

I wanted to grab the value on an ajax call using a function. but the value always return as undefined. return value is only 1 or 0.

Here is my code:

$(function(){ 
   $('#add_product').click(function(){ 
     var i = $('#product_name').val(); 
     param = 'product_name='+i; 
     var value = check_product(param); 
     alert(value); 
     return false; 
   }); 
});

function check_product(param){ 
  $.ajax({ 
    type : 'POST', 
    data : param, 
    url : baseurl+'cart/check_product_name/', 
    success : function(result){ 
      //alert(result); 
      return result; 
    } 
 });
}

I am still working on getting this one work. I get the value now showing 1 or 0. What im trying to accomplish now is how I can it in the if statement. I wanted to have something like this. If val = 0 return true; else return false. Im not sure I'm in the right track of using the ajax function. But if there a better way you can show me I will appreciate it.

$(function(){ 
       $('#add_product').click(function(){ 
         var i = $('#product_name').val(); 
         param = 'product_name='+i; 
         check_product(param).done(function(value) {
        var val = value; //waits until ajax is completed
         });
         if(val == 0){
            return true;
         } else{
            return false;
         }
       }); 
    });

function check_product(param){ 
  return $.ajax({ 
    type : 'POST', 
    data : param, 
    url : baseurl+'cart/check_product_name/'
 });
}

the 'a' in 'ajax' stands for asynchronous...:) so you need to do the actions that depend on the result in your success handler — Paul Dixon, Nov 30 '12 at 16:21
Could you provide the PHP/script too? also have you checked that you PHP/script is actually getting the variables that you are passing? — Jonathan Thurft, Nov 30 '12 at 16:22
There's also `async: false` for the request. I wouldn't use that though :p — Christian, Nov 30 '12 at 16:23

adeneo · Accepted Answer · 2015-09-22T14:33:36.720

22

It's asynchronous, so you have to wait for the ajax call to get the data back before you can alert it. You can do that easily by returning the ajax call and using done(), like so:

$(function() {
    $('#add_product').click(function() {
        var i   = $('#product_name').val(),
            par = 'product_name=' + i;

        check_product(par).done(function(value) {
            alert(value); //waits until ajax is completed
        });

        return false;
    });
});

function check_product(param) {
    return $.ajax({
        type : 'POST',
        data : param,
        url  : baseurl + 'cart/check_product_name/'
    });
}

edited Sep 22 '15 at 14:33

answered Nov 30 '12 at 16:21

adeneo

312,895
29
395
388

Never thought of returning a deffered object, +1. Normally, I'd just pass a callback. – John Dvorak Nov 30 '12 at 16:24
1

@JanDvorak - Thanks, used to always use callbacks myself, but just returning the deferred object exposes done, fail and always directly and makes it a lot easier in my opinion. – adeneo Nov 30 '12 at 16:26
@adeneo that IS pretty cool, thanks! – Sajjan Sarkar Nov 30 '12 at 16:37
+1, I've been looking for a way to have a reausable ajax method, what if we use a first class function as a callback? how would that be structured? – William Sep 20 '15 at 11:46
Never mind, i figured it out, I just pass it as part of the parameters `function makeAjaxRequest(requestType, url, data, onSuccess, onFail){ ...` – William Sep 21 '15 at 07:18

score 1 · Answer 2 · answered Nov 30 '12 at 16:24

Add this to ajax options:

dataType: "json",

and use

return Json(dataObject, JsonRequestBehavior.AllowGet);

in your action method.

Your

return result;

in the success handler of ajax is not a return for check_product. Pass another function (possibly anonymous) to check_product and call on ajax success.

How to grab return value from an ajax call?

2 Answers2

Linked