jquery - set global variable in ajax get success

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?

    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);

Or Better Yet
by DelightedD0D

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:

HTML:

                

                    

                        
Sun
                        
Mon
                        
Tue

                        
Wed
                        
Thur
                        
Fri
                        
Sat
                    
                
                


                
    

The Jquery:

    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.
    });

}

in console:

    2 calendar.js:34 2016-03-05
calendar.js:34 2016-04-09

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.

Answer

You can set the value there you just can't use it till the async function returns. You'll need to use the success callback function to know when the ajax promise has resolved and use the value like this:

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');
      useNextLoad(); // dont use the value till the ajax promise resolves here   

      console.log(next_load); // or just use it here directly

    }
  })
}
getData();


function useNextLoad(){
   console.log(next_load);
}

---

Or better yet, lose the global altogether and simply pass the response to the function from the success callback.

function getData() {
  $.ajax({
    url: 'student/calendar/show/2016/02',
    type: 'GET',
    success: function(response) {
      var $result = $(response).filter('li');
      $('.box-content').append($result);

      var next_load = $result.last().attr('data-date');
      useNextLoad(next_load); // dont use the value till the ajax promise resolves here   


    }
  })
}
getData();

function useNextLoad(next_load){
   console.log(next_load);
}

A Better better way would be to pass a callback to the getData function to handle the response like:

function getData(callback) {
  $.ajax({
    url: 'student/calendar/show/2016/02',
    type: 'GET',
    success: callback
  })
}

getData(function(response) {
  var $result = $(response).filter('li');
  $('.box-content').append($result);
  var next_load = $result.last().attr('data-date');
  console.log(next_load);
});