jQueryウィザードのステップはajax呼び出しが完了する前に移動します
Ajax呼び出しの結果に応じて、次のステップへの移動を制御するにはどうすればよいですか？ data.dはブール値で戻ります
$("#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
});
$.ajax({
type: 'POST',
url: "Reservation.aspx/SomeFunction",
async: false,
contentType: "application/json",
dataType: 'json',
success: function (data) {
move = data.d;
return true;
},
error: ajaxLoadError
});
$ .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
});
同期ajaxリクエストでSamyのアプローチを使用できます
$("#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
});
私も同じ問題を抱えています。「setStep」を使用してajaxのロード後にステップを強制することを考えていたのですが、最新バージョンのjquery.stepsが「setStep」を削除しました。
最終的に「next」メソッドを使用し、グローバルトリガーを使用して、onChangingイベントの無限ループを停止する必要があります。つまり、ajaxが有効なデータを返す場合は、ウィザードを次のステップに強制します。それ以外の場合は、現在のステップ、これがコードです
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をトリガーします
- デフォルトでは、jquery.steps onStepChangingイベントがfalseを返すように設定すると、有効なデータ（成功）が返された場合は$ .ajaxが呼び出され、次のステップに進むためにjquery.stepsが呼び出され、無効な場合はonStepChangingが再度トリガーされます。 、何もせず、現在のステップにとどまる
毎回2つのonStepChangingイベントをトリガーするのは良い考えではありませんが、それは今のところ私が持つことができるものです
さまざまなステップインデックスの動作に条件を追加する必要がある場合があります
これが、何度か試みた後に仕事に取り掛かることができる唯一の方法です。これは、@ 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
});
$("#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を入れてください！
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));
});
同様の問題が発生しましたが、検証に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
}
私はこの問題を解決する別の方法を見つけました。 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
これが他の誰かの助けになることを願っています。 :-)
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
});