ruby​​ on tableのjqueryの使い方

Question

RoRでWebアプリケーションを開発するのが初めてで、jQueryのヘルプが必要です。

私は、メッセージのテーブルと2つのボタンを管理するためのWebページを持っています - 受け入れと拒否のメッセージ。

... /ビュー/メッセージ/ index.html.erb

<div class="container"> 
    <h1>Moderate</h1> 
    <table class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
     <th>Client</th> 
     <th>№</th> 
     <th>Date</th> 
     <th>Content</th> 
     <th>Tariff</th> 
     <th>FromDate</th> 
     <th>TillDate</th> 
     <th>Cost</th> 
     <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <%= render @messages %> 
    </tbody> 
    </table> 
<%= will_paginate @messages %> 
</div> 

... /ビュー/メッセージ/ _message.html.erb

<tr> 
    <% if current_user.admin? %> 
    <th><%= message.user.name %></th> 
    <% end %> 
    <th><%= message.id %></th> 
    <th><%= message.created_at %></th> 
    <th><%= image_tag message.content_url(:thumb) if message.content? %></th> 
    <th><%= message.tariff %></th> 
    <th><%= message.fromdate %></th> 
    <th><%= message.tilldate %></th> 
    <th><%= message.cost %></th> 
    <th><%= message.status %> 
    <% if current_user.admin? && message.status=="Moderating" %> 
     <div class="btn-group" id="btn-group-<%= message.id %>"> 
     <button type="button" class="btn btn-success">Accept</button> 
     <button type="button" class="btn btn-danger">Decline</button> 
     </div> 
    <% end %> 
    </th> 
</tr> 

ボタン "Accept"をクリックします。データベース（sqlite3）で対応するMessageステータスを "Accepted"に変更する必要があります。対応するテーブルの行は、ブートストラップの.successスタイルでなければなりません。

"Decline"ボタンをクリックすると、データベースの対応するMessageステータスを "Decline"に変更する必要があります。テーブルの対応する行は、ブートストラップ.dangerスタイルでなければなりません。

message.statusには文字列型があります。

解決策の例に感謝します。

ルート：この要求を受け入れるようにルートを設定し、あなたのルートで

Answer 1

、お使いのコントローラで

get '/setmessagestatus/:status/:id', to: 'messages#set_message_status', as: 'set_message_status' 

ステータスを設定するメソッドを作成します。

メッセージコントローラ：

を

def set_message_status 
    @message = Message.find(params[:id]) 
    @message.status = params[:status] 
    render :nothing => true 
end 

ここで、私たちは要求を設定して変更する能力を持っていますeステータスを取得するには、Webページにajaxリクエストを設定するだけです。

HTML：：

<table> 
    <thead> 
    <tr> 
     <th>Message</th> 
     <th colspan="2"></th> 
    </tr> 
    </thead> 
    <tbody> 
    <!-- dont display the id on screen if you dont need to, use a data attribute --> 
    <tr class="message" data-message_id="1"> 
     <td>This is an example message</td> 
     <td> 
     <button class="message_status_button" data-status="accept">Accept</button> 
     </td> 
     <td> 
     <button class="message_status_button" data-status="decline">Decline</button> 
     </td> 
    </tr> 
    <tr class="message" data-message_id="2"> 
     <td>This is a second example message</td> 
     <td> 
     <button class="message_status_button" data-status="accept">Accept</button> 
     </td> 
     <td> 
     <button class="message_status_button" data-status="decline">Decline</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

私は例として、単純化されたHTMLテーブルを作った

は、あなたはちょうどあなたがメッセージIDなどの必要な情報をレンダリングビューの中で確実に、本質的には、それに応じて編集する必要があります

jQueryの：それは場合に役立ちます

$('.message_status_button').on('click', function() { 
    // get whether it was accept or decline 
    var status = $(this).data('status'); 
    // get the message id 
    var message_id = $(this).parent().parent().data('message_id'); 
    // log to console for debugging purposes - feel free to delete: 
    console.log("Setting message " + message_id + " status to: " + status); 
    // build URL 
    var url = "http://yourwebsite/setmessagestatus/" + status + "/" + message_id; 
    // send ajax to our rails route //you can expand this to add a callback if need - see jquery .get() docs 
    $.get(url); 
    // change the class (success/danger bootstrap classes) 
    if(status == "accept"){ 
     //remove danger class if its there 
     $(this).parent().parent().removeClass('danger'); 
     // add success class 
     $(this).parent().parent().addClass('success'); 
    } else { 
     //remove success class if its there 
     $(this).parent().parent().removeClass('success'); 
     // add danger class 
     $(this).parent().parent().addClass('danger'); 
    } 
}); 

ここではHTML jQueryのビットのフィドルです：https://jsfiddle.net/ndgz7mut/

私はこれをテストしていませんが、そのトリックを行う必要があります、いくつかの微調整が必​​要な場合があります。

Answer 2

さらに私の最後の答えに

、そしてあなたのコメント私が思うに持っていたし、ここでの結果です：まず

、我々は行のクラスを変更すると、ボタンがクリックされたので、私たちはそうしている、ではないので、実際にデータベースの行が更新されました。たとえば、何らかの理由でコントローラメソッドがステータスを更新しなかった場合、行は緑色に変わります（すべてクライアント側で発生します）。

これを回避するより良い方法は、データベースのレコードを正常に更新したら、コントローラにクライアントにJavaScriptを返すようにすることです。このjavascriptは、成功/危険クラス（またはステータスの更新など、何か他のもの）を追加します。

これは、クライアントに表示される内容がデータベースの実際の状態を反映することを保証します。

これはどうやって行うのですか？お使いのコントローラには、次の変更でまあ

：

def set_message_status 
    // set variables so they are available in js view 
    @message_id = params[:id] 
    @message_status = params[:status] 

    # find the message by id 
    @message = Message.find(@message_id) 

    # if we successfully update the message status: 
    if @message.status = @message_status 

     # respond with some javascript 
     respond_to do |format| 
      format.js 
     end 
    #otherwise, flash message the error 
    else 
     respond_to do |format|  
      format.js { flash.now[:notice] = "Update status failed." } 
     end 
    end 
end 

今、私たちは、更新が成功した場合に返すようにしたいJavaScriptが関連するビューフォルダこの中

-views 
|-messages 
    |-set_message_status.js.erb 

に住んでいるために起こっているがset_message_status.js.erbテーブル内の正しい行を見つけるためのjavascriptが必要です。ステータステキストを更新し、必要に応じてsuccess/dangerクラスを追加します。

そのjs.erbは、我々はまだ

だから、私たちのset_message_status.js.erbを（それがhtml.erbでないと同じ）を得られたのjavascriptを送信する前に最初のルビーを実行するJavaScriptとレールの内側にルビーを使用することができますので、次のようになります。

// pass the ruby variables into javascript variables 
var messageID = <%= @message_id %>; 
var messageStatus = <%= @message_status %> 

// find the row of the table based on the data-message_id 
var messageRow = $('.message[data-message_id="' + messageID + "'") 

    if(messageStatus == "accept"){ 
     //remove danger class if its there 
     messageRow.removeClass('danger'); 
     // add success class 
     messageRow.addClass('success'); 

    } else if(messageStatus == "decline"){ 
     //remove success class if its there 
     messageRow.removeClass('success'); 
     // add danger class 
     messageRow..addClass('danger'); 
    } 

// update the status 
    // make sure the td for the status has the class .status 
    // look for the td with class status inside the message row. 
    // change the html to the message status. 
    messageRow.find('.status').html(messageStatus) 

最後に、削除これはset_message_status.js.erbによって行われますよう、私たちのオリジナルのjsからクラスの追加/削除：

$('.message_status_button').on('click', function() { 
    // get whether it was accept or decline 
    var status = $(this).data('status'); 
    // get the message id 
    var message_id = $(this).parent().parent().data('message_id'); 
    // log to console for debugging purposes - feel free to delete: 
    console.log("Setting message " + message_id + " status to: " + status); 
    // build URL 
    var url = "http://yourwebsite/setmessagestatus/" + status + "/" + message_id; 
    // send ajax to our rails route //you can expand this to add a callback if need - see jquery .get() docs 
    $.get(url); 
    // 
    // <------------------- **REMOVED THE CLASS ADDING AND REMOVING FROM HERE** 
    // 
}); 

もう一度、これはテストされていないし、あなたの詳細に合わせて調整する必要があるかもしれないが、うまくいけばそれはあなたに一般的なアイデアを与えます。