title: set global variable in ajax get success
body: <p>I want to set the variable next_load during the success of an ajax call. I've read that this can't be accomplished because the call is aysnc and that i could set the call to sync but that will slow down performance. I tried the method below also yet still can't set the variable. Can you point out where I went wrong?</p>
  
  <pre><code>    var next_load = "";
  
  function getData() {
      $.ajax({
          url : 'student/calendar/show/2016/02',
          type: 'GET',
          success : function(response){
              var $result = $(response).filter('li');
              $('.box-content').append($result);
  
               next_load = $result.last().attr('data-date');
          }
      })
  }
  
  getData();
  
  console.log(next_load);
  </code></pre>
  
  <p><strong>Or Better Yet</strong>
  by DelightedD0D</p>
  
  <p>This is spot on to what I want to accomplish. I want to be able to pass the next_load variable to another function and reuse it in the getdata function. The problem im having now is i get multiple next_load build up when the loop begins. Here is what i did with the code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id = "calendar"&gt;
                  &lt;div class = "box"&gt;
                      &lt;ul class = "label"&gt;
                          &lt;li&gt;Sun&lt;/li&gt;
                          &lt;li&gt;Mon&lt;/li&gt;
                          &lt;li&gt;Tue&lt;/li&gt;
                          &lt;li&gt;Wed&lt;/li&gt;
                          &lt;li&gt;Thur&lt;/li&gt;
                          &lt;li&gt;Fri&lt;/li&gt;
                          &lt;li&gt;Sat&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;ul class = "box-content"&gt;
  
                  &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Jquery:</strong></p>
  
  <pre><code>    function getData(url) {
      var next_load = '';
      $.ajax({
          url: 'student/calendar/' + url,
          type: 'GET',
          success: function(response) {
              var $result = $(response).filter('li');
              $('.box-content').append($result);
  
              next_load = $result.last().attr('data-date');
              useNextLoad(next_load); // dont use the value till the ajax promise resolves here
  
          }
      })
  }
  getData('show/2016/02');
  
  function useNextLoad(next_load){
      var load = next_load;
      $('.box').click(function(){
         getData('load/' + load);
          console.log(load); // when i pass the next_load Im getting the previous next load and the new next load at the same time. Then on the next click the amount compounds.
      });
  
  }
  </code></pre>
  
  <p><strong>in console:</strong></p>
  
  <pre><code>    2 calendar.js:34 2016-03-05
  calendar.js:34 2016-04-09
  </code></pre>
  
  <p>If I reset the variable next_load would that keep the build up from occuring? I tried to empty the variable before the ajax call but I still get the build up. </p>