0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

非同期でいいね機能が切り替わらない時の解決方法

Posted at

##状態
同期状態でいいね機能を実装

そこから、非同期化

エラーもちらほらでましたが、エラーが出ないように修正。

エラーがなくなった、でも非同期でいいね機能が動かない。

って人は見てください。

同じようなパターンかもしれないです。

いいね機能を実装している方はたくさんいて
記事もたくさんありますので、自分と同じ状況を探してください。

詳しい詳細は下記を見てください。
https://teratail.com/questions/304798

##非同期処理の流れをおさらい
Ajaxの流れ
①イベント発生
②非同期でリクエスト送信
③受け取った情報を処理
④処理結果をJSON形式で応答
⑤レスポンスを受けてDOMでページ更新

自分の状態を確認することで原因がどこか見つける作業が早くなる。
イベントを発生しているかの確認だったら、アラートを出すように記述して確かめるみたいな感じですね。

##問題箇所

<tr class="idea_<%= @idea.id %>">
 <%= render 'like', idea: @idea %>
</tr>

ここの記述が問題でした。
記事等を参考に書いていたのですが、tableタグを使用していないのにtrタグを使っていたのが原因でした。
タグの性質を理解せずに使っていたのが駄目だったわけですね。

まさかと、思いdivタグに変更したらすんなりできました。

今回得た教訓は、タグの性質を知ること!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?