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

Question

更新ボタンをクリックすると、更新中の画面を表示して、
完了後に更新中画面を非表示にしたい
該当ソースの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を利用しています。
サーバーはCentOS７です。

Comments

[x_x]

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

[tKsyN]

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

[kaba]

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

[tKsyN]

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

[tKsyN]

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

Answer 1

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

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

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

function update()
{
    $('#updating').show();

    setTimeout(function(){alert("更新処理が完了しました。");$('#updating').hide();}, 2000);
}

Comments

[tKsyN]

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

[kaba]

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

[tKsyN]

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

[kaba]

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

[tKsyN]

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

[kaba]

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

[tKsyN]

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

[kaba]

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