Can you place the output of a jQuery function inside a variable?

Question

I'm new to JavaScript and haven't been able to cross a tutorial that explains the following situation.

The goal I'm trying to achieve here is that I will get the output of my jQuery function and place it inside of a variable. More explicit, I want to pull data from a MySQL table and place the data into a variable.

Then I will use that variable will then be used inside of another variable which is a calculation.

The function (I know the following code doesn't work, but I'm not sure what's proper):

var sliderValue = function() {
      $.ajax({
        url: "select.php",
        type: "GET",
        success: function(result) {
          // alert(result);
          return result;
         }
      });
  });

Using the variable (ignore the totalCost variable):

var startValue = ((sliderValue - totalCost) / totalCost ) * 100;

I know the variable calculation above works when I use a basic variable such as var totalCost = "52";.

Thanks for the help in advance.

Not really sure what you are asking. if the PHP file `select.php` outputs a number, the your calculation should work. Assuming you are setting the `var totalCost` somewhere else...? — superphonic, Dec 17 '13 at 14:12
The php outputs out a number. And the totalCost is simply a variable right now containing a number in it. When I figure out how to do this AJAX call properly it will get a similar treatment. — dvoutt, Dec 17 '13 at 15:38

score 2 · Accepted Answer · edited May 23 '17 at 10:32

You're missing a few concepts here. First, this line:

var startValue = ((sliderValue - totalCost) / totalCost ) * 100;

Won't work because sliderValue is a function, not the result of a function. You can, and often will, pass functions around as parameters, but it doesn't make sense in this situation.

You could call the function instead:

var startValue = ((sliderValue() - totalCost) / totalCost ) * 100;

Or use an IIFE (immediately-invoked function expression):

var sliderValue = (function() {
    return "53";
})();

Now, sliderValue holds the value 53 instead of a reference to the function, and this works:

var startValue = ((sliderValue - totalCost) / totalCost ) * 100;

However, neither of these solutions will work with an ajax call as you have it there. Ajax calls are async, and don't work that way. See how to return the response from an ajax call.

Vahe Yepremyan · Answer 2 · 2013-12-17T14:43:57.487

You have to read a little about AJAX. AJAX is about making asynchronous requests. That means that your program does not wait until the call is done and the result is received, it just makes the call and continues. It notifies you the result has received by calling the success (if the request succeeds, otherwise error) function you pass to the $.ajax function. So the right way to do what you need is to pass a callback function and call it on success. All this stuff is jQuery. You should learn using AJAX before using jQuery for making AJAX requests

var sliderValue = function(callback) {
      $.ajax({
          url: "select.php",
          type: "GET",
          success: function(result) {
              // alert(result);
              callback(result);
          }
      });
 });

then

sliderValue(funciton(result){
    //And you have your result here
    alert(result);
}) ;

Can you place the output of a jQuery function inside a variable?

2 Answers2