javascript - 在 "submit"JavaScript/jQuery 之后

Question

在 Yii2 中，当您单击“提交”并且必须等到它加载时，是否有可能出现一个窗口，或者至少有一条消息“它正在加载，请耐心等待”？我对 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

你可能需要使用JSExpression，同时添加console.log看是否触发如果您在浏览器上按 F12 键并检查控制台...希望对您有所帮助

<?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>