set global variable in ajax get success

Question

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:

<div id = "calendar">
                <div class = "box">
                    <ul class = "label">
                        <li>Sun</li>
                        <li>Mon</li>
                        <li>Tue</li>
                        <li>Wed</li>
                        <li>Thur</li>
                        <li>Fri</li>
                        <li>Sat</li>
                    </ul>
                </div>
                <ul class = "box-content">

                </ul>
    </div>

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.

You can *set it there* you just cant use it till the asyc function returns — Wesley Smith, Feb 06 '16 at 02:46
How do i know it has returned? When i try to log it i get null? I want to reuse the variable in another function — Ricki Moore, Feb 06 '16 at 02:48
*"How do i know it has returned?"* That's what the callback you pass to `success` is for. *"Can you point out where I went wrong?"* You are trying to access the variable before it was set. See the duplicate question to learn what it means for a function to be asynchronous. — Felix Kling, Feb 06 '16 at 02:58
Do see my update below (better better way) using Felix's suggestion :) — Wesley Smith, Feb 06 '16 at 03:12

Wesley Smith · Accepted Answer · 2016-02-06T03:07:06.493

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

And the better better version would be to pass `useNextLoad` to `getData`. — Felix Kling, Feb 06 '16 at 03:00
I am making an edit to the question. Im trying to use the "Or better yet," answer to do a follow on function. — Ricki Moore, Feb 06 '16 at 04:00
@RickiMoore are the `$('.box')` elements added by the ajax call, Im wondering why you have that click handler inside the function. Honestly, I'd suggest that you make a new question with the current code, a description of exactly what it should do step by step, and a description of what fails then give me that link and Ill take a look — Wesley Smith, Feb 06 '16 at 05:18

set global variable in ajax get success

1 Answers1