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

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

ただいまの
回答率

89.10%

ajaxで複数のボタンをclassで扱う際の処理について

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,288

daikitakaya

score 229

前提・実現したいこと

Ruby on Railsでフォロー機能を追加しようと考えています。
現在、Railsでのバックエンドの処理は完了しているのですが、ajaxでのボタンの切り替えを行いたいと考えています。

発生している問題・エラーメッセージ

Railsではremote: tureでajaxの切り替えができ、その際create.js.erbなどのjsテンプレートが呼ばれて、セレクターで指定した箇所が変わると認識しているのですが、フォロー機能のようなボタンの場合はidでフォローボタンを指定することができず、悩んでいます。(例えば以下のようなユーザー一覧におけるフォローボタンなどはidを付与して、その部分のhtmlを書き換えると行った処理ができない。)

イメージ説明

試したこと

通常よくある#follow_formなどと変更したい箇所をidで指定せずに.follow_formなどとして、それをjQueryevent.targetで取得しようと試みましたが、どうもうまくいきません。

$(".follow_form").click(function (event) {
    $(event.target.className).html("<%= escape_javascript(render('/users/shared/follow')) %>");
});

それぞれのボタンを押したときにそのボタンだけが切り替わるようにうまく処理したいです。

補足情報(言語/FW/ツール等のバージョンなど)

RoR 4.2.6, Ruby 2.3.4

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

thisでいけないですかね?未検証です。すみません。

$(".follow_form").click(function () {
    $(this).html("<%= escape_javascript(render('/users/shared/follow')) %>");
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/11 23:52

    回答ありがとうございます!

    確かに$(this)で取るのが順当ですよね。
    試して見たのですが、なぜかダブルクリックでないと切り替わらないのと一度切り替えたあとは動作しない感じです.....

    ``Form submission canceled because the form is not connected``というwarningが出てちゃいます。。

    キャンセル

  • 2017/08/14 17:39

    ご返答遅れてすみません。teratailチェックできてませんでした。
    Railsのお作法的なものがうまくクリアできていない感じですかね?
    念の為、jqueryのみのシンプルな環境で試してみたところ正常に動作しました。
    https://codepen.io/Ishikawa420/pen/qXPaGQ

    あとこういうのも見つけました。
    【Chrome】隠しFormの送信が出来なくなった
    http://qiita.com/yosida001/items/c0d4776a7889c1db67db

    キャンセル

0

each_with_index を使ってidを付与して個別のセレクタにすれば良いのでは無いでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/14 18:39

    その場合、create.js.erb側では``this``で書き換えたい場所を指定する形でしょうか?

    キャンセル

0

「event.target.className」で得られる値は生のクラス名で一つしかないことが保証されていません
classNameの再利用が必要な場合、すべてのクラスを対象にするために先頭にピリオドをつけたり
スペース文字をカンマに変えないといけないでしょう

$(function(){
  $('#btn').on('click',function(e){
    var c=$(this).attr("class");
    c=c.replace(/^(?=.)/,".").replace(/ +/g,",.");
    $(c).html("test");
  });
});
<input type="button" id="btn" value="btn" class="aaa xxx">
aaa bbb:<div class="aaa bbb"></div>
aaa ccc:<div class="aaa ccc"></div>
bbb ccc:<div class="bbb ccc"></div>

またajax処理の記載がいまひとつどうしたいのかわかりませんが
ajaxでしたら都度必要データを読みにいく処理が入ると思います
もし事前にすべてのデータを読むならajaxである必要はありません

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる