title: update javascript variable with ajax in real-time
body: <p>I have a javascript function which needs to do a numerical calculation.  Some of the numbers used in this calculation are stored in a database, and they will differ depending on how a user fills out an online form.  Once the user fills out the form, they will click the CALCULATE button.  At this time, in the JS function, I would like to use ajax to get values from a database that correspond to some other value chosen by the user.</p>
  
  <p>For a simple example: there are 3 sizes of t-shirts, with different prices based on each size (stored in database).  The user chooses the size, and when they click CALCULATE, I use ajax to get the price associated with the size they chose.</p>
  
  <p>The question is, i want to use ajax to update some variables that I will use later on in the script.  The way I am trying to do it now doesn't work, the variable in the script doesn't get updated from ajax, I can only access the value from the database inside the <code>success</code> function of the ajax call.  I understand this is because ajax in asynchronous by nature, and it takes some time, waiting for the data to be returned from the server, while the function still continues to run</p>
  
  <p>In the following example, the ajax call returns JSON data, and I have a function called <code>isjson()</code> that tests if the returned string is in fact JSON data.</p>
  
  <p>Example code:</p>
  
  <pre><code>function calculate_cost(){
  
      var price = 0;
      var size = $('form#tshirt_form [name="size"] option:selected').val();
      $.ajax({
          url:'my_script.php',
          type:'post',
          data:'select=price&amp;table=tshirts.prices&amp;where=size = "' + size + '"',
          success:function(data){
              if(isjson(data)){
                  data = $.parseJSON(data);
                  data = data[0];
                  price = data['price'];
              }else{
                  //display error getting data
              }
          }
      });
      //  continue code for calculation
      //  this alert will display "0", but I want the price from the database in there
      alert(price);
      //perhaps do other ajax calls for other bits of data
      //...
      return final_price;
  }
  </code></pre>
  
  <p>Does anyone know how I can accomplish this, updating variables with ajax in real-time??</p>
  
  <p>Thanks a lot!</p>
  
  <p>** EDIT **</p>
  
  <p>Thanks everyone for the help, I understand about ajax being asynchronous.  I would really like an answer where I don't have to continue the calculation inside the <code>success</code> function, because my actual problem involves many values from quite a few different tables.  I would also like to be able to expand on the calculation in the future without it getting too convoluted.  If this is not possible, ever, than i will have to live with that.
  ;-)</p>
  
  <p>** EDIT 2 **</p>
  
  <p>OK, we got the answer: of course it is right near the top on the docs page, :-/ sorry about that.  The <code>async</code> property in jQuery ajax call.  <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer">http://api.jquery.com/jQuery.ajax/</a></p>