如何在Ruby on Rails中的表中使用jQuery

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）中将相应的消息状态更改为“接受”，表的对应行应为bootstrap .success样式，并且两个按钮都隐藏。

当单击按钮“拒绝”时，我需要在数据库中将相应的消息状态更改为“拒绝”，表的相应行应为bootstrap .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

因此，现在我们可以在Rails中设置请求并更改状态了，现在我们需要做的就是在您的网页中设置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文件夹中

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

在此set_message_status.js.erb中，我们希望有一些JavaScript可以在表中找到正确的行，更新状态文本并根据需要添加成功/危险类。

因为它的js.erb，我们仍然可以在javascript中使用ruby，并且rails将在发送结果javascript之前先运行ruby（与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** 
    //
});

再一次，这些都没有经过测试，您可能需要进行调整以匹配您的具体信息，但希望它能为您提供总体思路。