$.each with Ajax and Variable Modification

353
November 26, 2016, at 6:50 PM

Why is whereString returning "where " and not "where "+some data. I know this has todo with closures and scoping but I'm not sure how to resolve it.

Thanks for your help in advance.

Here's the code:

    function SomeFunction() {
        var whereString = "where ";
        var seperator = " ";
        $.when.apply($(".SomeClass").each(function () {
             var promise = SomeAjaxCall().done(function (data) {
                whereString += seperator + data.d
             });
             seperator = "and "
       }).then(function() { 
         alert("Finished");
         alert(whereString); // Alerts "where " and not "Where "+data.d
      })
   };
Answer 1

Note, .apply() expects this context to be set as first parameter , array as second parameter ; .each() does not return an array , also .each() appear to be missing closing parenthesis ) at js at Question .

Try substituting .map() for .each() with .get() chained to .map() to return an array of jQuery promise objects, setting context : this of $.when.apply to $ . Also , include return promise within .map() to return jQuery promise object to .then() .

function SomeFunction() {
  var whereString = "where ";
  var seperator = " ";
  // set `this` to `jQuery` alias `$`
  $.when.apply($, $(".SomeClass").map(function(i, el) {
    // do ajax stuff
    var promise = SomeAjaxCall().done(function (data) {
                    whereString += seperator + data.d
                  });
    seperator = "and ";
    // return jQuery promise object
    return promise
  // include closing parenthesis to `.map()` , use `.get()` to return
  // array of jQuery promise objects
  }).get()).then(function() {
    alert("Finished");
    alert(whereString); 
  })
};

function SomeFunction() { 
  var whereString = "where"; 
  var seperator = " "; 
  // set `this` to `jQuery` alias `$` 
  $.when.apply($, $(".SomeClass").map(function(i, el) { 
    // do asynchronous stuff 
    var promise = $.Deferred().resolve({ 
      "d": el.textContent 
    }).done(function(data) { 
      whereString += seperator + data.d 
 
    }); 
    seperator = " and "; 
    // return jQuery promise 
    return promise 
  // include closing parenthesis to `.map()` , use `.get()` to return 
  // array of jQuery promise objects 
  }).get()).then(function() { 
 
    console.log("Finished"); 
    console.log(whereString);  
 
  }) 
}; 
 
SomeFunction()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
</script> 
<div class="SomeClass">abc</div> 
<div class="SomeClass">def</div>

Answer 2

It is because the alerts are firing after your 'each' function has been called on all the results of the jquery select. However, SomeAjaxCall() is asynchronous, so, therefore the 'done' function's haven't been called because the ajax calls aren't done by the time the 'each' functions are done executed, and thus the alerts firing.

Though this is probably not what you want in the end, you can add a timeout of a few seconds before doing your alerts to see that the 'where' does eventually get updated.

Rent Charter Buses Company
READ ALSO
Owl Carousel navigation arrows not working on WordPress

Owl Carousel navigation arrows not working on WordPress

Navigation arrows are not working - they are unclickableThis is based in WordPress - we are not using a plugin because this is a custom job

546
Jquery, check if multilevel array already has this in it or not

Jquery, check if multilevel array already has this in it or not

I am trying to push "arrayOne" into a multilevel array(arrayTwo)First I want to make sure it doesn't exist already so there is no duplicates

345
Copy every HTML attribute containing a particular string

Copy every HTML attribute containing a particular string

I'm looking at a web page with a bunch of pictures on itHundreds

268