如何根据某些ajax调用的结果控制移动到下一步? data.d返回bool值
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
var move = false;
if (currentIndex == 2) {
move = false;
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
return true;
},
error: ajaxLoadError
});
}
return move;
},
saveState: true
});
答案 0 :(得分:5)
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
async: false,
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
return true;
},
error: ajaxLoadError
});
答案 1 :(得分:3)
如果您不希望$ .ajax()函数立即返回,请将async选项设置为false:
如果服务器没有响应你的ajax调用,那么为Ajax设置超时,那么它将继续进行下一个进程。
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
var move = false;
if (currentIndex == 2) {
move = false;
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
async: false,
cache: false,
timeout: 30000,
success: function (data) {
move = data.d;
return true;
},
error: ajaxLoadError
});
}
return move;
},
saveState: true
});
答案 2 :(得分:2)
你可以使用Samy的同步ajax请求方法
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex == 2) {
var requestResult = $.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
async: false,
contentType: "application/json",
dataType: 'json',
error: ajaxLoadError
});
return requestResult.responseJSON.Result == "/*your expected value*/"
}
},
saveState: true
});
答案 3 :(得分:2)
我有同样的问题,我甚至想使用" setStep"在ajax加载后强制执行步骤,然后最新版本的jquery.steps取出了" setStep" ..
我最终使用" next"方法,并且必须使用全局触发器来停止onChanging事件的无限循环,简而言之,如果ajax返回有效数据,我强制向导转到下一步,否则,它将保持到当前步骤,这里是#s; s代码
var $stopChanging = false;
.... ....
onStepChanging: function (event, currentIndex, newIndex) {
if ($stopChanging) {
return true;
} else {
items = $.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
$stopChanging = true;
wizard.steps("next");
},
error: ajaxLoadError
});
},
onContentLoaded: function (event, currentIndex) {
$stopChanging = false;
}
}
逻辑如下:
每次触发两个onStepChanging事件听起来不是一个好主意,但这就是我现在可以拥有的东西
您可能需要为不同的步骤索引行为添加更多条件
答案 4 :(得分:1)
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
var $out= false;
if (currentIndex == 2) {
$out= false;
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
$out = true;
},
error: ajaxLoadError
});
}
return $out;
},
saveState: true
});
将全局变量$ out!
答案 5 :(得分:1)
var items;
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
var move = false;
if (currentIndex == 2) {
move = false;
items = $.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
return true;
},
error: ajaxLoadError
});
}
return move;
},
saveState: true
});
items.success(function (data) {
//if can log in go to logged in page
if (data.success == true) {
alert("Working");
var move = data.d;
return true;
} else {
alert("didnt work");
}
// output of data
alert(JSON.stringify(data));
});
答案 6 :(得分:1)
这是我经过多次尝试后才能开始工作的唯一方法,这就是@ joe-lu在上面的表现。你只想开始异步电话&返回false。这将使向导保持相同的步骤。然后在成功处理程序中,您以编程方式进入下一步。
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex == 2) {
//Would be a good idea to start a spinner here!
//would be a good idea to disable next button here!
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
//stop spinner here!
//programmatically move to next step on success.
$("#wizard").steps("next");
},
error: ajaxLoadError
});
}
//Prevents natural movement to next step.
//will be done programmatically
return false;
},
saveState: true
});
答案 7 :(得分:0)
我遇到了类似的问题,但我使用parsleyjs进行验证。你可能会在我的代码中得到一个想法。
我的代码是这样的:
onStepChanging: function (event, currentIndex, newIndex) {
// ======== Code that fails
//var step = $wizard_advanced.find('.body.current').attr('data-step'),
//$current_step = $('.body[data-step=\"'+ step +'\"]');
// check input fields for errors
//$current_step.find('[data-parsley-id]').each(function() {
//this adds .md-input-danger to inputs if invalid
//there is remote validation occurring here via ajax
// async: false
//$(this).parsley().validate();
//});
// this is executed before ajax validation is finished
//return $current_step.find('.md-input-danger').length ? false : true;
// ======== END of Code that fails
// FIX
// waits on ajax validation to finish before returning
if( $wizard_advanced_form.parsley().validate() ) {
return true;
} else {
return false;
}
//FIX
}
答案 8 :(得分:0)
var is_async_step = false;
$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
//USED TO SEND USER TO NEXT STEP IS ASYNC REQUEST IS PRESENT - FOR AJAX CALL
if (is_async_step) {
is_async_step = false;
//ALLOW NEXT STEP
return true;
}
if (currentIndex == 2) {
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
data: serializeData({ }),
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
//Add below 2 lines for every Index(Steps).
is_async_step = true;
//This will move to next step.
$(form).steps("next");
},
error: ajaxLoadError
});
}
//Return false to avoid to move to next step
return false;
},
saveState: true
});
答案 9 :(得分:0)
我找到了另一个解决此问题的方法。 OnStepChanging
仅支持boolean
。
有拉取请求#232,它增加了延迟对象的用法。
(我在GitHub上也找到了如何使用延迟对象的方法)
我将此修改后的版本包含在我的项目中,并在OnStepChanging
中使用了它,如下所示:
var def = $.Deferred();
$.ajax({
type: "POST",
url: url,
//async: false,
beforeSend: function (xhr) {
//ASP CORE Antiforgery token
xhr.setRequestHeader("RequestVerificationToken",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
failure: function (xhr) {
failureCallback(xhr);
}
}).done(function (response) {
//Result of server validation
var responseResult = response.result === "Success" ? true : false;
// Check response
def.resolve(responseResult);
}).fail(function (response) {
console.log(response);
return false;
});
return def; // This is the Deferred that should be returned and NOT the one from jQuery Ajax
我希望这会对其他人有所帮助。 :-)