使用ajax更改Ruby on Rails视图中按钮的状态

问题描述

我有一个要动态更改按钮禁用状态的设置。目前，我的逻辑如下：

<% if @has_attachment_file_sent %>
   <% if current_user.id != @offer.user_id %>                     
      <%= link_to send_signature_requests_path,remote: true,method: :post,data: { confirm: "Are you sure?" },id: "signature_request_button",class: "button is-info is-fullwidth  m-t-10 m-b-10"  do %>
          <span>Send request</span>
      <% end %>
   <% end %>
<% else %>
   <button class="button is-info is-fullwidth  m-t-10 m-b-10" disabled>Send request</button>
<% end %>

但是，此方法的问题在于，这只会在刷新页面时更改按钮的状态。有没有办法用RoR来做这种Ajax，或者我应该在这里做什么？

还尝试如下使用javascript：

<script>
    $(document).ready(function() {
        var has_attachment_file_sent = <%= @has_attachment_file_sent %>
        console.log(has_attachment_file_sent);
        if(has_attachment_file_sent) {
           $('#signature_request_button').attr('disabled',true);
        }        
    })
</script>

但这似乎没有任何作用。

这也是我的控制器

def show
    @offer = Offer.find(params[:id])
    @has_attachment_file_sent = Comment.where(user_id: @offer.user_id).any? {|obj| obj.attachment_file.attached?}
    respond_to do |format|
        format.html
        format.js { render layout: false,content_type: 'text/javascript' }
    end
end

解决方法

首先将您的html放在部分中，然后将内容包装在div中，假设该部分的名称为'buttons.html.erb'

_buttons.html.erb

<% if @has_attachment_file_sent %>
   <% if current_user.id != @offer.user_id %>                     
      <%= link_to send_signature_requests_path,remote: true,method: :post,data: { confirm: "Are you sure?" },id: "signature_request_button",class: "button is-info is-fullwidth  m-t-10 m-b-10"  do %>
          <span>Send request</span>
      <% end %>
   <% end %>
<% else %>
   <button class="button is-info is-fullwidth  m-t-10 m-b-10" disabled>Send request</button>
<% end %>

<div id="buttons">
  <%= render partial: 'buttons' %>
</div>

在视图中添加按钮

<%= link_to 'Refresh',show_page_path(id: @offer.id),id: 'btn_call_ajax',remote: true %>

您应根据路线调整show_page_path

def show
    @offer = Offer.find(params[:id])
    @has_attachment_file_sent = Comment.where(user_id: @offer.user_id).any? {|obj| obj.attachment_file.attached?}
    respond_to do |format|
        format.html
        format.js
    end
end

然后，您应该创建一个名为show.js.erb的文件，其中包含以下代码：

$('#buttons').html('')
$('#buttons').append("<%= escape_javascript render(:partial => 'buttons') %>");

,

哦，是的，太烦人了，忘了那个

也许在js.erb

之内是这样的

应该可以，黑客，但是我确定还有另一种解决方案我会空白

# render partial line here
<% if @disabled %>
  $(‘#button-id’).prop(“disabled”,true);
<% else %>

$(‘#button-id’).removeAttr(“disabled”)

<% end %>

,

创建文件show.js.erb，然后在您的控制器中将其保留为format.js，不带花括号。

使用创建一个局部

<button class="button is-info is-fullwidth  m-t-10 m-b-10" disabled="<%= disabled ? “disabled” : “”  %>”>Send request</button>

并在原始文件中添加一个div，包装上方部分的渲染

<div id=“woohoo”>
<%= render partial: “file_above”,locals: {disabled: true} %>
</div>

然后在该.js.erb文件中添加此$(‘#div-around-button’).html(“<%= j render(‘show’,disabled: @disabled_variable_from_controller) %>”)，基本上它将使用您从控制器got获得的新值刷新该按钮。

P.S。我在iPhone上都写了这些，所以我可能会错过语法等小东西