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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

1回答

881閲覧

クロームでjQueryのshow()を実行時してもすぐに表示されない

tKsyN

総合スコア10

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

1グッド

1クリップ

投稿2018/10/13 08:04

編集2022/01/12 10:55
更新ボタンをクリックすると、更新中の画面を表示して、 完了後に更新中画面を非表示にしたい 該当ソースのalert()が呼ばれた時点で、更新中画面を表示している状態にしたい。 ### 発生している問題・エラーメッセージ ``` デフォルト非表示にしておいて、 更新ボタンクリック時にjQueryのshow()にて更新中画面を呼び出すのですが、 クロームの場合、更新中画面が表示されません。 ``` ### 該当のソースコード ```HTML div.upating id="upating" div.sending-msg id="sending-msg" = 'Updating…' input.btn.btn-sm.btn-primary type="button" value="更新" onClick="update()" ``` ```CSS .updating { width: 100%; height: 100%; z-index: 9999; position: fixed; top: 0; left: 0; background-color: #f7f7f9; filter: alpha(opacity=65); -moz-opacity: 0.65; -khtml-opacity: 0.65; opacity: 0.65; background-image: url('../assets/ajax-loader.gif'); background-position: center center; background-repeat: no-repeat; display: none; } /* 画像下の文字の表示 */ .sending-msg { text-align: center; padding-top: 30%; color: #000; font-weight: bold; font-size: 30px; } ``` ```javascript function update() { $('#updating').show(); alert("更新処理が完了しました。"); $('#updating').hide(); } ``` ### 試したこと ファイヤーフォックスでは期待通りの動作をしました。 ### 補足情報(FW/ツールのバージョンなど) Rails5を利用しています。 サーバーはCentOS7です。
x_x👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/22 05:57

rials5と言っているのは「Ruby on Rails 5」のことを言っていますか? それであれば「Ruby on Rails 5」タグを追加して、「rials5」ではなく「Rails 5」と修正してください。
tKsyN

2018/11/23 00:07

スペルミス失礼しました。修正しました。
kaba

2018/11/23 05:39 編集

html(slim)に記載のonClick="update()"とjavaSciptに記載のfunction show_pol_updatingはどうつながるのでしょうか?
tKsyN

2018/11/23 07:49 編集

javaSciptに記載のfunction show_pol_updatingは記載ミスでした。updateです。htmlからそのままjavascriptのfunctionを呼び出すようにしています。
tKsyN

2018/11/23 07:48

javaSciptに記載のfunction show_pol_updatingは記載ミスでした。
guest

回答1

0

ここはスペルミスと思われます。

slim

1//div.upating id="upating" ×upating ◎updating 2div.updating id="updating"

本題に入りますが、
何か時間がかかる処理をしている間にupdatingを表示し、処理完了で非表示にするものと捉えました。
処理完了までに2秒かかると仮定したサンプルを以下に提示します。

javascript

1function update() 2{ 3 $('#updating').show(); 4 5 setTimeout(function(){alert("更新処理が完了しました。");$('#updating').hide();}, 2000); 6}

投稿2018/10/25 14:17

編集2018/11/23 10:52
kaba

総合スコア314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tKsyN

2018/10/28 03:41

回答ありがとうございます。 upatingはご指摘の通りスペルミスでした。 やりたいことはご認識の通りなのですが、記載して頂いたソースでもChromeだと表示されません。 バージョンや設定があるのでしょうか?
kaba

2018/10/29 00:52

こちらで試して動作したものを提示しています。 「更新処理が完了しました。」は表示されているのですか?
tKsyN

2018/11/01 08:30

更新処理が完了しました。は表示されますが、 showしているものが表示されません。
kaba

2018/11/01 09:39

javascriptは正常に動作しているので、質問内容に提示の無いCSSでupatingが非表示になっているか、htmlのほかの要素が重なって隠れていると思います。 ブラウザのデバッガで確認されるといいです。
tKsyN

2018/11/22 04:53

IEやファイヤーフォックスでは表示されるので、そこらへんはクリアしていると思います。 chromeだけ表示されないのです。
kaba

2018/11/22 06:49

デバッガで $('#updating').show(); と打ち込んで、upatingは表示されるのですか?
tKsyN

2018/11/23 00:07

デバッガでは表示されます。
kaba

2018/11/23 10:54

関数名をshow_pol_updatingからupdateに修正しました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問