function ajaxAddHtml(target_id)
{
$('#' + target_id).html('loading.gif');
if(php_func == "") {
return false;
}
// ↓↓↓Ajaxの処理
}
jQuery + Ajaxで画面の書き換えをする処理を実装しました。
上記のように、処理の冒頭にまずクリックされたボタンをloading画像に置換する処理を入れているのですが、
PCでは想定通り動きますが、iphoneとAndroidで想定通り動きせん。
loading画像に書き換わる前にAjaxでの処理が完了してしまいます。
関数の中のhtml置換処理を、確実に上の行から順番通りに実行させる方法はありますか?
No.3ベストアンサー
- 回答日時:
今ではasync:falseは非推奨ですよ。
やりたいことは分かりますが、素直に非同期にして、completeやsuccessの中にajax完了後の処理を書くのが分かりやすいと思います。もし、それができない状況だとしたら、それをできない状況自体を改善すべきです。
あと、最新のjQueryではajaxの使い方も変わってきてる(使いやすくなってる)ので、古いソースではなく、新しいjQueryの情報を確認されたほうがよいと思いますよ。
この回答への補足
tracerさん、fujillinさんからご指摘いただいた通り、まず非同期通信を前提とし、
ajaxStart、ajaxCompleteのコールバック関数で制御することでうまくいきました。
最終的にはローディング画像はdiplay:noneで定義しておき、
コールバック関数でdiplayを切り替えるというシンプルな方法で実装しました。
こんな感じです。
------------------------------
$("#" + target_id).ajaxStart(function(){
$("#ajaxLoadingImage").css('display','block');
});
$("#" + target_id).ajaxComplete(function(){
$("#ajaxLoadingImage").css('display','none');
});
------------------------------
とても助かりました。
ありがとうございました!
No.2
- 回答日時:
よくわかっていませんが… (よこから失礼)
>同期通信をしています
DOMは変更されていても、ブラウザが画像データを取得したり画面に反映したりできないだけでは?
非同期通信にしてみたらどうなるでしょうか?
No.1
- 回答日時:
.html('loading.gif'); のコードでは "loading.gif" という文字列が挿入されるだけで画像ファイルとはなりません。
http://jsfiddle.net/NgZAZ/
http://api.jquery.com/html/#html2
もし、画像になるのならそれは別の処理が働いているからです。
そのコードを特定してください。
最も、初めから .html() でimg要素を挿入すればいい話だとは思いますが…。
> loading画像に書き換わる前にAjaxでの処理が完了してしまいます。
Ajax処理との関係性が書かれていないのでなんともいえませんが、Ajaxは非同期処理であることに気をつけてください。
この回答への補足
すいません、抜粋するつもりが壮大にサンプルソースを書き間違えていました。
サンプルソースを訂正します。
function ajaxAddHtmlBeforeId(php_func, target_id)
{
$('#' + target_id).html(_getLoadingImageHtml());
//↓Ajaxの処理
// ・・・
//↓ローディング画像を戻す処理
// ・・・
}
function _getLoadingImageHtml()
{
return '<img src="/images/loading.gif" />';
}
要点を整理しますと、
・スマホでは冒頭のローディング画像の表示処理がされないまま処理が完了してしまう。
⇒その他のAjaxなどその他の処理は問題ない。
・async:falseで同期通信をしています。
・PCではすべて想定通り動いています。
です。
引き続きご回答お待ちしています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP・Wordpress preg_replaceを条件分岐で処理させる方法が知りたい 1 2023/05/01 14:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- Visual Basic(VBA) vbaのエラー対応(実行時エラー7:メモリが不足しています) 4 2023/04/24 00:20
- Excel(エクセル) エクセルVBA マクロ処理中のポップアップメッセージについて 1 2023/08/04 21:34
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Visual Basic(VBA) エクセルのマクロについて教えてください。 7 2023/07/04 09:18
- Excel(エクセル) エクセル VBA For Next 繰り返しの書き方を教えてください 6 2022/09/01 14:11
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) VBAのユーザーフォームのテキストボックスに入力制限をしたい 6 2022/11/15 08:28
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaでVBのDOEVENTSと同様の処...
-
doGetとdoPostの違い
-
tomcat(struts)で起動時に処理...
-
GASで、起動時間の最大値を超え...
-
C#のスレッド動作について
-
[Java] while(true)の意味
-
データ未入力時のエラー処理が...
-
DBのinsert/updateを1ボタンで...
-
エクセルVBAで、条件に一致する...
-
同一パッケージにあるクラスが...
-
「天声人語」をインターネット...
-
「タイプ初期化子が例外をスロ...
-
配列の重複する値とその個数を...
-
インスタンス参照でアクセスで...
-
エクセルのマクロでプリンタを...
-
Javaのメモリの管理
-
変数名の付け方
-
同じクラスにならない確率を教...
-
Labelコントロールの背景をグラ...
-
C#において、同じインスタンス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tryの終了
-
doGetとdoPostの違い
-
Javaプログラムからポップアッ...
-
SwingUtilities.invokeLater(ne...
-
Javaでのデバッグコード削除
-
Tomcat高負荷時の設定について
-
JavaScriptからJAVAクラスを呼...
-
データ未入力時のエラー処理が...
-
アコーディオンメニューをアン...
-
ブラウザを閉じた後のサーバ側...
-
[Java] while(true)の意味
-
数値の定数を付ける時
-
Javaアプリケーション実行の返...
-
ラジオボタンの選択判定
-
スレッド1とスレッド2を交互に...
-
WPF C#でF10のイベント取得方法...
-
onBlurとonFocusの処理順序につ...
-
flush()メソッドについて・・・
-
ExcelVBA で文字列の特定の文字...
-
Java ファイルが生成させたか確...
おすすめ情報