jquery - return value using ajax result on success

I have a small problem with jQuery $.ajax() function.

I have a form where every click on the radio button or selection from the dropdown menu creates a session variable with the selected value.

Now - I have one of the dropdown menus which have 4 options - the first one (with label None) has a value="" other have their ids.

What I want to happen is to None option (with blank value) to remove the session and other to create one, but only if session with this specific select name doesn't already exist - as all other options have the same amount assigned to it - it's just indicating which one was selected.

I'm not sure if that makes sense - but have a look at the code - perhaps this will make it clearer:

$("#add_ons select").change(function() {
		// get current price of the addons
		var order_price_addon = $(".order_price_addon").text();
		// get price of the clicked radio button from the rel attribute
		var add = $(this).children('option').attr('label');
		var name = $(this).attr('name');
		var val = $(this).val();
		
		
		if(val == "") {
			var price = parseInt(order_price_addon) - parseInt(add);
			removeSession(name);
		} else {
			if(isSession(name) == 0) {
				var price = parseInt(order_price_addon) + parseInt(add);
			}	
			setSession(name, val);				
		}
		
		$(".order_price_addon").html(price);	
		setSession('order_price_addon', price);			
		updateTotal();
});

so - first of all when the #add_ons select menu triggers "change" we get some values from a few elements for calculations.

we get the label attribute of the option from our select which stores the value to be added to the total, name of the select to create session with this name and value to later check which one was selected.

now - we check whether the val == "" (which would indicate that None option has been selected) and we deduct the amount from the total as well as remove the session with the select's name.

After this is where the problem starts - else statement.

Else - we want to check whether the isSession() function with the name of our selector returns 0 or 1 - if it returns 0 then we add to the total the value stored in the label attribute, but if it returns 1 - that would suggest that session already exists - then we only change the value of this session by recreating it - but the amount isn't added to it.

Now isSession function looks like this:

function isSession(selector) {
	$.ajax({
		type: "POST",
		url: '/order.html',
		data: ({ issession : 1, selector: selector }),
		dataType: "html",
		success: function(data) {
			return data;
		},
		error: function() {
			alert('Error occured');
		}
	});
}

Now - the problem is - that I don't know whether using return will return the result from the function - as it doesn't seem to work - however, if I put the "data" in the success: section into the alert() - it does seem to return the right value.

Does anyone know how to return the value from the function and then compare it in the next statement?

---

Thanks guys - I've tried it in the following way:

function isSession(selector) {
	$.ajax({
		type: "POST",
		url: '/order.html',
		data: ({ issession : 1, selector: selector }),
		dataType: "html",
		success: function(data) {
			updateResult(data);
		},
		error: function() {
			alert('Error occured');
		}
	});
}

then the updateResult() function:

function updateResult(data) {
    result = data;
}

result - is the global variable - which I'm then trying to read:

$("#add_ons select").change(function() {
		// get current price of the addons
		var order_price_addon = $(".order_price_addon").text();
		// get price of the clicked radio button from the rel attribute
		var add = $(this).children('option').attr('label');
		var name = $(this).attr('name');
		var val = $(this).val();
		
		
		if(val == "") {
			var price = parseInt(order_price_addon) - parseInt(add);
			removeSession(name);
		} else {
			isSession(name);
			if(result == 0) {
				var price = parseInt(order_price_addon) + parseInt(add);
			}	
			setSession(name, val);				
		}
		
		$(".order_price_addon").html(price);	
		setSession('order_price_addon', price);			
		updateTotal();
	});

but for some reason - it doesn't work - any idea?

The trouble is that you can not return a value from an asynchronous call, like an AJAX request, and expect it to work.

The reason is that the code waiting for the response has already executed by the time the response is received.

The solution to this problem is to run the necessary code inside the success: callback. That way it is accessing the data only when it is available.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            // Run the code here that needs
            //    to access the data returned
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

Another possibility (which is effectively the same thing) is to call a function inside your success: callback that passes the data when it is available.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}

There are many ways to get jQuery AJAX response. I am sharing with you two common approaches:

First:

> use async=false and within function return ajax-object and later get > response ajax-object.responseText

/**
 * jQuery ajax method with async = false, to return response
 * @param  {mix}  selector - your selector
 * @return {mix}           - your ajax response/error
 */
function isSession(selector) {
    return $.ajax({
        type: "POST",
        url: '/order.html',
        data: {
            issession: 1,
            selector: selector
        },
        dataType: "html",
        async: !1,
        error: function() {
            alert("Error occured")
        }
    });
}
// global param
var selector = !0;
// get return ajax object
var ajaxObj = isSession(selector);
// store ajax response in var
var ajaxResponse = ajaxObj.responseText;
// check ajax response
console.log(ajaxResponse);
// your ajax callback function for success
ajaxObj.success(function(response) {
    alert(response);
});

Second:

> use $.extend > method and make a new function like ajax

/**
 * xResponse function
 *
 * xResponse method is made to return jQuery ajax response
 * 
 * @param  {string} url   [your url or file]
 * @param  {object} your ajax param
 * @return {mix}       [ajax response]
 */
$.extend({
    xResponse: function(url, data) {
        // local var
        var theResponse = null;
        // jQuery ajax
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType: "html",
            async: false,
            success: function(respText) {
                theResponse = respText;
            }
        });
        // Return the response text
        return theResponse;
    }
});

// set ajax response in var
var xData = $.xResponse('temp.html', {issession: 1,selector: true});

// see response in console
console.log(xData);

you can make it as large as you want...

Although all the approaches regarding the use of async: false are not good because of its deprecation and stuck the page untill the request comes back. Thus here are 2 ways to do it:

1st: Return whole ajax response in a function and then make use of done function to capture the response when the request is completed.(RECOMMENDED, THE BEST WAY)

function getAjax(url, data){
  	return $.ajax({
        type: 'POST',
        url : url,	            
        data: data,
        dataType: 'JSON',
    	//async: true,  //NOT NEEDED
    	success: function(response) {
         	//Data = response;
    	}
  	});
 }

CALL THE ABOVE LIKE SO:

getAjax(youUrl, yourData).done(function(response){
    console.log(response);
});

FOR MULTIPLE AJAX CALLS MAKE USE OF $.when :

$.when( getAjax(youUrl, yourData), getAjax2(yourUrl2, yourData2) ).done(function(response){
    console.log(response);
});

2nd: Store the response in a cookie and then outside of the ajax call get that cookie value.(NOT RECOMMENDED)

        $.ajax({
            type: 'POST',
            url : url,	            
            data: data,
            //async: false,    // No need to use this
            success: function(response) {
                Cookies.set(name, response);
            }
        });

        // Outside of the ajax call
        var response = Cookies.get(name);

NOTE: In the exmple above jquery cookies library is used.It is quite lightweight and works as snappy. Here is the link https://github.com/js-cookie/js-cookie

I saw the answers here and although helpful, they weren't exactly what I wanted since I had to alter a lot of my code.

What worked out for me, was doing something like this:

function isSession(selector) {
    //line added for the var that will have the result
    var result = false;
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        //line added to get ajax response in sync
        async: false,
        success: function(data) {
            //line added to save ajax response in var result
            result = data;
        },
        error: function() {
            alert('Error occured');
        }
    });
    //line added to return ajax response
    return result;
}

Hope helps someone

anakin

EDIT: This is quite old, and ugly, don't do this. You should use callbacks: https://stackoverflow.com/a/5316755/591257

EDIT 2: See the fetch API

Had same problem, solved it this way, using a global var. Not sure if it's the best but surely works. On error you get an empty string (myVar = ''), so you can handle that as needed.

var myVar = '';
function isSession(selector) {
  $.ajax({
    'type': 'POST',
    'url': '/order.html',
    'data': {
      'issession': 1,
      'selector': selector
    },
    'dataType': 'html',
    'success': function(data) {
      myVar = data;
    },
    'error': function() {
      alert('Error occured');
    }
  });
  return myVar;
}

Add async: false to your attributes list. This forces the javascript thread to wait until the return value is retrieved before moving on. Obviously, you wouldn't want to do this in every circumstance, but if a value is needed before proceeding, this will do it.

With Help from here

function get_result(some_value) {
   var ret_val = {};
   $.ajax({
       url: '/some/url/to/fetch/from',
       type: 'GET',
       data: {'some_key': some_value},
       async: false,
       dataType: 'json'
   }).done(function (response) {
       ret_val = response;
   }).fail(function (jqXHR, textStatus, errorThrown) {
           ret_val = null;
       });
   return ret_val;
}

Hope this helps someone somewhere a bit.

// Common ajax caller
function AjaxCall(url,successfunction){
  var targetUrl=url;
  $.ajax({
    'url': targetUrl,
    'type': 'GET',
    'dataType': 'json',
    'success': successfunction,
    'error': function() {
      alert("error");
    }
  });
}

// Calling Ajax
$(document).ready(function() {
  AjaxCall("productData.txt",ajaxSuccessFunction);
});

// Function details of success function
function ajaxSuccessFunction(d){
  alert(d.Pioneer.Product[0].category);
}

it may help, create a common ajax call function and attach a function which invoke when success the ajax call, see the example

Hi try async:false in your ajax call..