如何在轨道上使用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** 
    // 
}); 

再一次，这些都没有经过测试，你可能需要调整，以符合你的具体情况，但希望它给你那里的一般想法。