set global variable in ajax get success
<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>