Waiting for ajax response of the same function
I know similar questions have been posted many times, however I have read many of them and cannot find an answer to my problem.
I have a function waiting for a response to an ajax request. Many of you will ask why? Well, I'm using the Wizard JQuery Plugin, which executes a function onLeaveAStepFunction
when a step remains, and then the wizard advances to the selected step if the return value from is onLeaveAStepFunction
true; otherwise, it remains at the same step.
I do this async: false
for waiting and it works, but it's bad design. Also, I cannot use the blockUI plugin.
How can i do this?
Some codes:
Master initialization:
$("#wizard").smartWizard({
onLeaveStep : onLeaveStepFunction,
});
Calling ajax request:
function onLeaveStepCallback(obj, context) {
nextStep = sendForm();
}
Ajax request:
var nextStep = false;
$.ajax({
url : path,
type : "POST",
async : false,
data : $("#" + idForm).serialize(),
success : function(data) {
$("#" + idDiv).html(data);
nextStep = !$("#" + idHiddenErrores).val())
}
});
Omitting attributes. Please help me.
source to share
You can use jQuery's wait method. I gave an example from the docs page to highlight how you would do this:
$.when( $.ajax( "/request.php" ) ).done(function( response ) {
// response argument resolved from ajax requests
// process any work after ajax call finishes
}
Link to the docs page:
source to share
I am doing this async: false to wait and it works, but it is bad design and I cannot use the blockUI plugin.
If your wizard is better designed and supports asynchronous callbacks (such as those that promise a return), async:false
your only choice.
Consider switching to a different master and remember to indicate an error for the plugin you are currently using.
source to share
One hacky approach is to do it before vacation. Perhaps on showStep:
var wizard_next_step;
$("#wizard").smartWizard({
onShowStep : function (obj, context) {
onLeaveStepFunction(obj, context, function(nextStep){
wizard_next_step = nextStep;
});
},
onLeaveStep : function () {
return wizard_next_step;
}
});
You also need to change yours onLeaveStepFunction
to accept the callback:
function onLeaveStepCallback(obj, context, callback) {
nextStep = sendForm(callback);
}
And your ajax function should be like this:
$.ajax({
url : path,
type : "POST",
async : false,
data : $("#" + idForm).serialize(),
success : function(data) {
$("#" + idDiv).html(data);
callback( !$("#" + idHiddenErrores).val()) );
}
});
Now it looks like you are drawing in the wizard window with this:
$("#" + idDiv).html(data);
I am absolutely sure that it is. But if it is, you cannot do it here (obviously because it is the one onShowStep
that will overwrite the current content). If so, you must pass the data in the callback:
success : function(data) {
callback( data , !$("#" + idHiddenErrores).val()) );
}
Write the master like this:
var wizard_next_step;
var wizard_data;
$("#wizard").smartWizard({
onShowStep : function (obj, context) {
onLeaveStepFunction(obj, context, function(data, nextStep){
wizard_data = data;
wizard_next_step = nextStep;
});
},
onLeaveStep : function (obj, context) {
$("#" + idDiv).html(wizard_data);
return wizard_next_step;
}
});
The key is to call all async functions and receive data long before all your synchronous functions are called.
Note. I don't know of a smart wizard at all and not a serious jQuery user. The answer above is based on my 2 minute reading of the smart-wizard documentation on github and my understanding of javascript. You will definitely need to modify my examples in order for them to work.
source to share