Question

i am using $.each of jquery like this

$.each($('.FormContainer div.MainDiv'), function () {
$.ajax({
      type: "POST",
      url: pageUrl + '/SaveFormResponse',
      data: jsonText,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (response) {
      if (isNaN(response.d) == false) {
          //continue executing $.each further
      }
      else {
          alert(response.d);
          //stop executing $.each further in case of error 
      }
      },
      failure: function (response) {
           alert(response.d);
      }

    });

});

now problem is that in case of error i want $.each to stop executing further but it’s not stopping till it will not traverse through all the div’s

i also tried maintaining a variable and check it’s value on every iteration and set it’s value on error but still not working

Answer 1

When $.ajax gives you a result, $.each has finished already. Note that the first “a” in ajax stands for asynchronous. What you can do is creating a recursive function (you didn’t use anything specific from each element, but I assume you do so I used $elem):

var $elems = $('.FormContainer div.MainDiv');

(function fetch(i) {
    if(i >= $elems.length) return;  // no elems left

    var $elem = $elems.eq(i);

    $.ajax({
      type: "POST",
      url: pageUrl + '/SaveFormResponse',
      data: jsonText,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (response) {
        if (!isNaN(response.d)) {
          fetch(i + 1);  // next one
        } else {
          alert(response.d);  // just don't call fetch again
        }
      },
      failure: function (response) {
         alert(response.d);
      }
    });
})(0);  // start with first elem