jquery Return ajax response and user defined variable to function

Question

I am having an issue passing in a defined variable to a function from an ajax call. What should happen is on click of an element, it should pass the text of the clicked element to the function, do an ajax call which has nothing to do with the defined variable, return the variable and the data from the call to another function that renders the elements. When I get to the function that renders the html content, the variable is now undefined.

My question is how can I send the ajax response data and a user defined variable that has no correlation to the ajax call to another function?

My JSON function:

function getJSONP(url, data) {
  return $.ajax(url, {
    dataType: 'json',
    data: data
  });
}

My click event:

$('.day').on('click', function() {
  getTimes($(this).text());
});

My first function that does the ajax (this is where the selector returns a value):

function getTimes(selector) {
  console.log(selector);
  var eventDate = selector;

  getJSONP(CAL_API_URL).then(function(data) {
    data = _.valuesIn(data)[5][0];
    return data;
  }).then(appendTimes(eventDate));
}

My 2nd function that renders the HTML (here the selector is undefined):

function appendTimes(dates, selector) {
  console.log(selector);

  _.forEach(dates, function(k, v) {
    // Returns each event

    _.forEach(k, function(k2, v2) {
      // Returns multiple objects for each event

      var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
          timeId = k2.id;
      $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
    });
  });
}

appendTimes needs to return a function, that function will be called with data from the previous .then call. — user400654
– user400654, Commented Mar 24, 2015 at 15:09
you don't seem to be using selector inside of appendTimes, why do you need to pass it in? — user400654
– user400654, Commented Mar 24, 2015 at 15:18

user400654 · Accepted Answer · 2015-03-24 15:12:55Z

3

In this case, if you switched appendTimes to only accept selector and have it return a function, the returned function will get called when data is available.

function appendTimes(selector) {
  console.log(selector);
  return function (datas) {
    _.forEach(dates, function(k, v) {
      // Returns each event

      _.forEach(k, function(k2, v2) {
        // Returns multiple objects for each event

        var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
            timeId = k2.id;
        $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
      });
    });
  }
}

answered Mar 24, 2015 at 15:12

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user400654 Over a year ago

.then expects you to give it a function. In your code, you were giving it undefined, so i changed it to instead give it a function.

epascarello · Accepted Answer · 2015-03-24 15:08:37Z

2

You are calling the method, not assigning a reference to it

}).then(appendTimes(eventDate));

needs to use a closure or binding

}).then(function() { appendTimes(eventDate) });

also you can not return from a promise so the return data is useless.

answered Mar 24, 2015 at 15:08

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

user400654 Over a year ago

well, considering .then acts as a filter with jQuery promises, returning from a .then callback can be useful.

ethikz Over a year ago

Well the data itself is being passed to the function when I use the return data, without it then it isn't. Either way I can't seem to pass the user defined variable.

Collectives™ on Stack Overflow

jquery Return ajax response and user defined variable to function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related