質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.37%

  • PHP

    15139questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11195questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    4884questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    1939questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

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

解決済

回答 2

投稿 2017/11/27 12:19

  • 評価
  • クリップ 0
  • VIEW 39

lovelydai

score 16

こんにちは、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を複写する関数を処理?実行中にアニメーションを表示するにはどうすればいいですか?
何かアドバイスいただけると助かります。
宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

投稿 2017/11/27 12:30

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/27 16:57

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

    キャンセル

+1

正しいやり方(やはり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');
  });

投稿 2017/11/27 16:59

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.37%

関連した質問

  • 解決済

    配列の取得がうまくいかない

    ajaxで受け取ってきた配列の分、inputを作って値を送信したいと思っています。 下記のspecResultには 21,果汁(オレンジ) 22,果実(オレンジ) 23,ビタミ

  • 解決済

    CSSで作成したタブ切り替えメニューでページ内リンクができずに躓いております。

    いつもお世話になっております。 下記サイトのコードを参考にしてタブ切り替えメニューを作成しました。 http://qiita.com/takanorip/items/07868

  • 解決済

    inputを動かしたい

    よろしくお願い致します。 こういったコードがあるのですが、こちらのdiv class="submit”の部分を動かすにはどうしたらいいでしょうか。 ホバー時に下に20px程動くよう

  • 解決済

    範囲内で表示されるアンカーリンクをjqueryで作る

    スクロールでnavからfooterの間のみで表示されるアンカーリンクをjQueryで作成したいです。 途中まで作成したのですが、上スクロールをした際にnavで消えないので、どなたか

  • 解決済

    [PHP]POSTに失敗してしまいます

    PHP勉強中の者です。現在自動販売機作成ツールの管理画面を作成しているのですが、POSTの処理につまずいてしまっています。 ご教授頂ければ幸いです。 現在作成しているコードは以下の

  • 解決済

    自分のWebページに指定したURLのページを表示する

    前提・実現したいこと Webページを自分で作って、2行目以降に指定したURLのページを表示するWebページを作ることはできないでしょうか。 発生している問題・エラーメッセージ

  • 解決済

    iScroll.jsを使用してコンテンツを横スクロールにする

    現在横スクロールを実現するためにiScroll.jsというライブラリを使用しています。 そこで横スクロールさせたいコンテンツの始点を右端にしスクロールすると左にコンテンツが移動する

  • 解決済

    htmlのテーブルを横に並べたい

    前提・実現したいこと テーブルを横に並べたいのですが上手くいきません。 具体的にはこのような形にしたいです。 今はこんな感じです。 最初は番号と所属を同じテーブルで

同じタグがついた質問を見る

  • PHP

    15139questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11195questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    4884questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CakePHP

    1939questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。