PHPのページでDB更新しローディングイメージを表示したいです。

Question

こんにちは、JavascriptとJQuery初心者です。

作っているのは、年度をふたつ入力してもらって、指定された年度分のデータをDBにて複写する機能です。
機能は完成しましたが、データ量が多いと時間がかかり、システムが停止しているように見えます。
そこで、何かのローディングイメージを表示したいと思い色々ググって試して作りましたが動きません。

<style type="text/css">
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  opacity:0.2;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}
</style>

        <div id="loader-bg">
            <div id="loader">
                <img src="img/img-loading.gif" width="80" height="80" alt="Now Loading..." />
                <p>Now Loading...</p>
            </div>
        </div>


        <div class="panel panel-warning" id="wrap">
          <div class="panel-heading">
            <h3 class="panel-title">マスタ複写</h3>
          </div>
          <div class="panel-body">
            <blockquote>
              <p><font color="red"><b>ご注意ください！</b></font></p>
              <p>複写元の学年度のマスタ情報が複写先の学年度のマスタ情報に上書きされます。</p>
            </blockquote>
            <?= $this->Form->create('copy') ?>
            <fieldset>
              <div class="form-group">
                <div class="col-lg-12">
                  <?= $this->Form->input('source_year',['class' => 'form-control','label' => '複写元（学年度）','type' => 'text', 'id'=>'source_year']); ?>
                </div>
              </div>
                <div class="form-group">
                  <div class="col-lg-12">
                    <?= $this->Form->input('target_year',['class' => 'form-control','label' => '複写先（学年度）','type' => 'text', 'id'=>'target_year']); ?>
                  </div>
                </div>
                <div class="form-group" align="center">
                  <?php echo $this->Form->postButton(
                      '複写する',
                      ['controller' => 'Masters','action' => 'index'],
                      ['class' => 'btn btn-primary btn-sm', 'onclick' => 'return warningMsg()']
                  ); ?>
                </div>
            </fieldset>

            <?= $this->Form->end() ?>
            
          </div>
        </div>

    </div>
  </div>
</div>

<script>
  function warningMsg()
  {
    if(window.confirm('複写すると、複写先学年度のマスタ情報が全て複写元学年度のマスタ情報で上書きされます。複写する前に必ずご確認し、バックアップすることをお勧めします。本当に複写してもよろしいですか?'))
    {
      return true;
    }
    else
    {
      window.alert('複写をキャンセルしました。');
      return false;
    }
  }

  $(window).on('progress',function () { //実行中にローディング部分を表示する
    var h = $(window).height();
    $('#loader-bg ,#loader').height(h).css('display','block');
    $('#wrap').css('display', 'none');
  });

  $(window).on('ready',function () { //全ての読み込みが完了したら表示する
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
    $('#wrap').css('display', 'block');
  });
</script>

スクリプトエラーはないですが、何も表示されません。
これを修正し、$(window).on('load',function()...{}); のように作り、ページのローディング時に表示することには成功しましたが、そうすると処理中には何も表示されませんでした。
Submitボタンを押して、PHP側でDBを複写する関数を処理？実行中にアニメーションを表示するにはどうすればいいですか？
何かアドバイスいただけると助かります。
宜しくお願い致します。

Answer 1

ローディングを表示するならデータの取得はajaxなどにしたほうがよいのではないでしょうか？

Comments

[lovelydai]

回答ありがとうございます。まだAJAXがわからなくてですね…これから勉強しようと思います。

Answer 2

正しいやり方（やはりAJAXを使うべきですかね？）ではないと思いますが、SubmitとReadyのイベントに様々な効果をかけることで意図した動きはできました。

  $(window).on('submit',function () { //Submitし処理中に実行（イメージ表示）
    var h = $(window).height();
    $('#loader-bg ,#loader').height(h).css('display','block');
    $('#wrap').css('display', 'none');
  });

  $(window).on('ready',function () { //全ての読み込みが完了したら実行
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
    $('#wrap').css('display', 'block');
  });