How to delay jquery step function response

Question

I m using jQuery-step library with a form combining the formvalidation.js . i want to delay below method response until ajax complete.

i want to send return true/false when ajax complete.

onStepChanging: function (e, currentIndex, newIndex) {

    var fv = $stepForm.data('formValidation'), // FormValidation instance
        // The current step container
        $container = $stepForm.find('section[data-step="' + currentIndex + '"]');

    // Validate the container
    fv.validateContainer($container);
    var isValidStep = fv.isValidContainer($container);
    if (isValidStep === false || isValidStep === null) {
        // Do not jump to the next step
        return false;
    }
    if (isValidStep === true) {
        //call ajax here
        //wait for ajax to complete then move to next or keep 
    }
    return true; //-> i want to delay this 

},

Possible duplicate of : http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep — JoshulSharma, Mar 30 '17 at 11:05
Just to be sure, you want to return true/false on ajax complete or success callback? — funcoding, Mar 30 '17 at 11:13
As @funcoding is suggesting if you need to just pass true/false after ajax complete, then you can return true/false values on ajax "success" method. https://www.w3schools.com/jquery/ajax_ajax.asp — JoshulSharma, Mar 30 '17 at 11:19

score 0 · Answer 1 · answered Mar 30 '17 at 11:44

0

I have done by setting property in javascript window then wrap the return in setTimeout function

Step 1:

$(document).ready(function(){ window.flag = ''; });

Step 2

function submitForm($stepForm) { 
    $.ajax({
        type: 'POST',
        url: 'http://' + location.host + "/ajax",
        dataType: 'JSON',
        data: {'method': 'submitApplication', 'formdata': $stepForm.serialize()},
        success: function (data) {
          window.flag = true;
        }
}

Step 3:

onStepChanging: function (e, currentIndex, newIndex) {
  if (isValidStep === true) {
                submitForm($stepForm);
  }
 .... code
  setTimeout(function () {
     return window.flag;
  }, 2000);
}

answered Mar 30 '17 at 11:44

Noman

4,088
1
21
36

Why you need the setTimeout ? Just make the submitForm function a promise an do something on the callback function! – funcoding Mar 30 '17 at 11:48
@Noman , Ajax are async calls, u can never tell if your ajax call will always complete in 2 seconds delay that you have set. Also as per your code you dont deed that 2 second of time out....just set if (isValidStep === true) { return submitForm($stepForm); and return true/false in "submitForm" function. } – JoshulSharma Mar 30 '17 at 13:00

score 0 · Answer 2 · answered Mar 30 '17 at 11:59

In your case:

function submitForm($stepForm) {
    return new Promise((resolve, reject) =>{
      $.ajax({
        type: 'POST',
        url: 'http://' + location.host + "/ajax",
        dataType: 'JSON',
        data: {'method': 'submitApplication', 'formdata': $stepForm.serialize()},
        /* Resolving true on success, you could also return a json object if you need the response */ 
        success: () => { resolve(true); },
        /* Rejecting the promise in case of an error */
        error: () => { reject(false) } 
     })
  })
}

Then:

onStepChanging: function (e, currentIndex, newIndex) {
  if (isValidStep === true) {
       submitForm($stepForm)
       .then( /*...Do whatever you want ..*/)
       .catch( console.log );
  }

How to delay jquery step function response

2 Answers2