如何在軌道上使用jquery在ruby中的表格

Question

我是RoR中開發Web應用程序的新手，我需要一些jQuery幫助。

我有一個包含消息表和兩個按鈕的網頁，用於進行審覈 - 接受和拒絕消息。

... /視圖/消息/ 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> 

當單擊按鈕「接受」我需要在數據庫（sqlite3）中將相應的消息狀態更改爲「已接受」，表格的相應行應爲引導.success樣式，並且兩個按鈕都隱藏。

當點擊按鈕「拒絕」時，我需要在數據庫中將相應的消息狀態更改爲「拒絕」，相應的表格行應該是bootstrap .danger樣式，並且兩個按鈕都隱藏起來。

message.status has string type。

我將不勝感激解決方案的例子。

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 

所以，現在我們有能力在rails中設置請求並更改th e狀態，現在我們需要做的就是在您的網頁中設置ajax請求。

我已經做了簡單的HTML表格爲例，則需要相應的編輯，在本質上，只是確保你的意見，你呈現爲消息ID需要這樣的信息：

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> 

的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能夠在表格中找到正確的行，更新狀態文本並根據需要添加成功/危險類。

，因爲它js.erb我們仍然可以使用JavaScript和軌道內紅寶石將發送所產生的JavaScript（同它與html.erb）

所以我們set_message_status.js.erb之前先運行紅寶石可以是這樣的：

// 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) 

最後，刪除添加/從我們原來的js類刪除，因爲這將set_message_status.js.erb來完成：

$('.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** 
    // 
}); 

再一次，這些都沒有經過測試，你可能需要調整，以符合你的具體情況，但希望它給你那裏的一般想法。