"submit" JavaScript/jQueryの後

Question

Yii2で "submit"をクリックして、ロードするまで待つか、ウィンドウを表示するか、少なくとも "それは忍耐強くロードしています"というメッセージを出すことができますか？私はJavaScriptの経験がほとんどありませんが、そうする方法があると思います。 私はそれを試しました：

<style> 
#loading { 
    width: 30%; 
    height: 30%; 
    position: absolute; 
    left: 25%; 
    top: 25%; 
    background-color: green; 
    line-height: 5; 
    text-align: center; 
    display: none; 
} 
</style> 

<script> 
$('#formularz').on("submit", function() { 
    $("#loading").show(); 
}); 
</script> 

<h1>Dodaj numery do przedzwonienia</h1> 
<h3>Wybierz zamówienie, którego numery chcesz przedzwonić:</h3> 

<div class="order-form" id="formularz"> 
<?php $form = ActiveForm::begin(); ?> 
<?= $form->field($model, 'id')->dropDownList(ArrayHelper::map(Order::find()->all(), 'id', 'id')) ?> 
<?= Html::submitButton("Przedzwoń", ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> 
<?php ActiveForm::end(); ?> 
</div> 

<div id="loading"> 
    Ładowanie trwa... 
</div> 

しかし、動作しませんでした。

Answer 1

あなたはそれがわかりまし

<?php 
    // this goes on top of file to other uses right after namespace 
    use yii\web\JsExpression; 
?> 

<style> 
#loading { 
    width: 30%; 
    height: 30%; 
    position: absolute; 
    left: 25%; 
    top: 25%; 
    background-color: green; 
    line-height: 5; 
    text-align: center; 
    display: none; 
} 
</style> 

<?php 
    // you might want to use JSExpression and check if it triggers 
    $this->registerJs(" 
     $('#formularz').on('submit', function() { 
      $('#loading').show(); 
      console.log('loading...'); 
     }); 
"); ?> 

<h1>Dodaj numery do przedzwonienia</h1> 
<h3>Wybierz zamówienie, którego numery chcesz przedzwonić:</h3> 

<!-- you can not use same id twice --> 
<div class="order-form" id="formularz-div"> 
<?php $form = ActiveForm::begin([ 
    'id' => 'formularz', 
]); ?> 
<?= $form->field($model, 'id')->dropDownList(ArrayHelper::map(Order::find()->all(), 'id', 'id')) ?> 
<?= Html::submitButton("Przedzwoń", ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> 
<?php ActiveForm::end(); ?> 
</div> 

<div id="loading"> 
    Ładowanie trwa... 
</div> 

Answer 2

<div>要素には、submitイベントがありません。送信イベントは<form>です。だから、タグを開くフォームは次のようになります。

<form id="formularz" .....> 

それとも、このようにjqueryのセレクタを変更することができます。

$('#formularz form').on("submit", function() { 
    $("#loading").show(); 
}); 

これはdiv#formularz内のいくつかの<form>を提出の上、あなたのイベントが発生することを意味します。

私はYiiのに慣れていないんだけど、何かしてみてください：

ActiveForm::begin([ 
    'id' => 'formularz', 
]); 

をそして、生成されたHTMLを確認してください。