Fuel UX ウィザードに問題があります。Fuel ux ウィザードで次のボタンを押すと、validate_step(step) を使用して選択した category_id を送信し、php からの json オブジェクトで応答します。
この最初のステップは正常に機能しますが、validate_step(step) 関数の結果を読み取ろうとすると、コンソールにエラーが表示されます。
問題はここにあります：
vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx); // CONSOLE : Validation(1)= undefined
if(vrspx === 'ok'){ ....
vrspx 変数は未定義を返します。
私は燃料uxを使用しており、jqueryの初級から中級の経験があり、これが良いアプローチであるかどうか、またはウィザードの各ステップでajax検証を開始する方法がわからない.
誰かが私を助けてくれることを願っています。
前もって感謝します！
コード：
HTML:
<form name="wizard" id="wizard" class="ajax" method="post" action="http://URLBASE/U_wizard/">
<!-- STEP 1 -->
<div class="step-pane active" id="step1">
<div class="padd-10 button-holder" id="categories_selector">
<br>
<label><input type="radio" id="category_id_1" name="category_id" value="1"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_2" name="category_id" value="2"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_3" name="category_id" value="3"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_4" name="category_id" value="4"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_5" name="category_id" value="5"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_6" name="category_id" value="6"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_7" name="category_id" value="7"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_8" name="category_id" value="8"><i class="radio"></i>...</label>
<label><input type="radio" id="category_id_9" name="category_id" value="9"><i class="radio"></i>...</label>
</div>
</div>
<!-- STEP 2 -->
<div class="step-pane" id="step2">This is step 2</div>
<!-- STEP 3 -->
<div class="step-pane" id="step3">This is step 3</div>
</form>
JS:
var wizard = $('#MyWizard');
function validate_step(step){
// Get form method and action url
var that = $('.ajax'),
url = that.attr('action'),
type = that.attr('method');
var data = $('form.ajax').serialize();
// Ajax
$.ajax({
url: url + step,
type: type,
data: data,
dataType: "json",
success: function (response) {
console.log(response);
if(response.status == 'ok'){
// allow change
return 'ok';
}else{
// cancel change
return 'notok';
}
}, // End success
error: function () {
console.log('AJAX Error');
return 'notok';
} // End error
}); // $.ajax
} // End validate_step
wizard.on('change', function(e, data) {
console.log('change');
// STEP 1:
var step = 1;
if(data.step===step && data.direction==='next') {
// Hide button next
vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx);
if(vrspx === 'ok'){
// allow change
console.log('allow change');
}else{
// cancel change
console.log('cancel change');
return e.preventDefault();
}
} // End validate step 1
// STEP 2:
}); // End Wizard.on.change
PHP: (このphpへのajax投稿)
if($_SERVER['REQUEST_METHOD'] === 'POST')
{
switch ($value) {
case $value == '1':
# Validate STEP 1:
$this->log->lwrite('## VALUE 1');
foreach ($_POST as $key => $value) {
$this->log->lwrite('## $_POST['.$key.']'.$value);
}
if (isset($_POST['category_id']))
{
$category = CB_safeSQL($_POST['category_id']);
$msg = array('msg' => 'Valid...','status' => 'ok');
$this->log->lwrite('## CATEGORY SETED TO '.$category);
unset($category);
echo json_encode($msg);
unset($msg);
die();
}
else
{
$msg = array('msg' => 'Invalid ...','status' => 'notok');
echo json_encode($msg);
unset($msg);
$this->log->lwrite('## NO category readed');
}
break;
default:
# DEFAULT
$this->log->lwrite('## DEFAULT VALUE');
break;
}
} // End POST