SoLA2-TechBlog

退屈な作業はプログラムに任せましょう!日々の作業に少し工夫を足すだけであなたの時間はもっとクリエイティブになる。

【PHP】非同期処理の内容が反映されないときのチェックポイント

非同期処理の反映

WEBアプリを開発していると、非同期処理をする事があると思います。

今回の記事では非同期で処理したサーバ側のデータがフロントサイドにうまく反映されない問題について取り上げてみたいと思います。理由は私が今日この問題が原因で4時間近くも浪費してしまったためです。。。

前提

開発言語はPHP、非同期処理にはajaxを利用します。

チェックポイント

まず初歩的な問題を確認してみましょう。

  • 非同期処理の結果をちゃんとHTMLに反映しているか
  • 非同期処理が正常に動作しているか
  • 反映の方法に間違いは無いか

Google先生に聞くと多くの回答が上記3点に集約されます。私もよく失敗してしまうのですが、非同期で処理した内容をフロントサイドに戻さないと、当然ブラウザにも反映されません。更新ボタンを押すと正常にデータが更新されているならまずはこの線を疑うと良いと思います。

非同期処理が正常に動作しているかを確認する

冷静にフロントサイドへ処理を戻していることを確認して、それでもブラウザ側に反映されていないという場合、次に確認すべきは非同期処理です。下記の点を確認してみましょう。(※非同期処理が正常に動作していない場合の確認事項ですので、更新ボタンを押すと正常に反映される場合は飛ばしてください。)

  • ajax用のjavascriptはちゃんとインポートしているのか
  • ajax内でエラーは発生していないか
  • ajaxから呼ばれるPHPファイルは読み込まれているのか

※2点目、3点目の調査にはディベロッパーツールを使うと便利です

反映の方法に問題が無いか確認する

さてさて、ここまで確認してなおフロントサイドに反映されてないとなると、残るはその反映の仕方です。下記の点について確認してみましょう。

  • 反映させたいタグは正しく取得出来ているか
  • 反映させたいタグに対して正しいメソッドを使っているのか
  • 確認しているブラウザの仕様ではないか

1点目については、よくあるケアレスミスなので一応確認してみると、バグの神様が微笑んでくれるかもしれません。

2点目については、割りと見落としがちですがHTMLの仕様についての問題です。値を変更するためのメソッドはいくつかあると思いますが(「innerHTML」「innerText」「textContent」「value」など)タグによって対応するメソッドが変わったりします。一度反映させたいタグがそのメソッドに対応しているか確認してみると幸せになれるかもしれません。

3点目については、値を変更するためのメソッドがブラウザによっては使用出来ない問題です。他のメソッドについては調べていませんが、InternetExplorerであれば「textContent」、Firefoxであれば「innerText」が使用出来ないそうです。ちなみに「innerHTML」はどちらのブラウザでも利用出来ます。

全部確認した、でも反映されない・・・

私の場合、上記すべてを確認しても反映されない頑固な輩がいらっしゃいました。もういっそ同期通信で妥協しようかとすら思ったのですが・・・今回は粘り勝ちました!

タグの取得方法で、「$('ID名')」を用いると、値を反映出来ないケースが有るらしいので、「getElement系のメソッド」を用いることで、今回の問題は解決しました。

success: function (res) {
  //修正前
  $('#SampleID_' + id).innerHTML = String(res.vote); 

  //修正後
  document.getElementById('SampleID_' + id).innerHTML = String(res.vote); 
}

これってajaxを使う人だと割りと当たり前のことなのでしょうか?
まだ根本的な原因がわかっていないので、調査の必要がありそうです。もし原因がわかる方いらっしゃいましたら是非ともご教授ください!