CODEWITHSUNDEEP
javascriptjqueryajax
Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

Pause the function execution flow till ajax request completes

I seem to be running into the typical "Asynchronous Problem", with the solution eluding me.

I have a bootstrap form wizard which is just an improvised tabs/slideshow kinda thingy. All my "Steps" are forms each inside respective tabs/slides.

It has a set of next/previous buttons to navigate around the slides. And It provides a function callback on before moving to next slide. Inside which(callback) I am "client-side validating" the form in current slide and if its validated then I am submitting the form using ajax. And once I get the response from server, I am deciding whether to return true (proceed to next slide) or return false (stop the navigation to next slide).

I have looked into ..

My code is as below.

JS.

  jQuery('#progressWizard').bootstrapWizard({
            'nextSelector': '.next',
            'previousSelector': '.previous',
            onNext: function (tab, navigation, index) {
                if (index == 1) { // Here I am deciding which code to execute based on the current slide/tab (index)
                    if (jQuery("#paymentstep1").data('bValidator').validate()) {
                        var data = new FormData(jQuery('#paymentstep1')[0]);
                        jQuery("#cgloader").fadeIn();
                        var success = false;
                        jQuery.ajax({
                            type: "post",
                            async: false,
                            contentType: false,
                            processData: false,
                            url: "xyz.php",
                            dataType: "json",
                            data: data,
                            success: function (r) {

                              return r;
                            }
                          });
                        }....

Upvotes: 0

Views: 2549

Answers (3)

Dark Falcon
Dark Falcon

Reputation: 44181

The docs for onNext say:

Fired when next button is clicked (return false to disable moving to the next step)

So simply return false from your handler. In the AJAX success callback, call next to advance to the next slide.

var requestCompleted = false;
jQuery('#progressWizard').bootstrapWizard({
  'nextSelector': '.next',
  'previousSelector': '.previous',
  onNext: function (tab, navigation, index) {
    if (index == 1) { // Here I am deciding which code to execute based on the current slide/tab (index)
      if (jQuery("#paymentstep1").data('bValidator').validate()) {
        if(!requestCompleted) {
          var data = new FormData(jQuery('#paymentstep1')[0]);
          jQuery("#cgloader").fadeIn();
          var success = false;
          jQuery.ajax({
              type: "post",
              url: "xyz.php",
              data: data,
              // ...
              success: function (r) {
                requestCompleted = true;
                jQuery('#progressWizard').bootstrapWizard('next');
                return r;
              }
            });
          return false;
        }
      }
    }
  });

Upvotes: 3

Chris Clark
Chris Clark

Reputation: 397

Use a promise?

There is a promise in jQuery. Here is the Syntax.

$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status );    });

There are also now promises in javascript!

var promise = new RSVP.Promise(function(fulfill, reject) {
  (...)
});

Then,

promise.then(onFulfilled, onRejected);

Upvotes: 2

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10967

I would use different events to execute your async code. The idea is to use onTabChange ( consider using onTabClick and onTabShow ) so you prevent moving to the next tab how bootstrapWizard(); would navigate. Only after everything passed fire the next tab programmatically, which you have to find out how.

$('element').bootstrapWizard('onTabShow', function(){

  //Do everything you need here and show next tab
  $('element').bootstrapWizard('show',3);
  return false;
});

Upvotes: 1

Related Questions