如何在Rails中对点击和模态调用控制器操作

Question

我正试图弄清楚如何管理从链接调用控制器并在所有过程完成后返回数据的能力，同时显示返回数据的模态。以下是我的逻辑，我还没有弄清楚，希望有人能帮忙；

我试过以下几种，但没有成功；

#HTML
<%= link_to "#WidgetGenModal", :data => {:toggle => "modal"}, :action => 'gen_key', :class => 'gen-widget pull-right' do %><i class="fa fa-slideshare fa-1x"></i><% end %>
#CONTROLLER (Widget controller)
protected
def generate_token
  user = current_user
  self.token = loop do
     random_token = SecureRandom.urlsafe_base64(nil, false)
     break random_token unless user.widget.exists?(token: random_token)
   end
end
#MODAL (Bootstrap)
<div class="modal fade" id="WidgetGenModal" tabindex="-1" role="dialog" aria-labelledby="widgetGenModal" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h3 class="modal-title" id="widgetGenModal"><div class="btn btn-danger btn-xs">NEW</div> Share Your Category</h3>
                <p>We've made it easier for you to share everything you store / save within your categories. Simply copy the specially generated code, paste it some where on your website or share the link with someone to let them see what you've saved.</p>
              </div>
              <div class="modal-body">
              </div>
              <div class="modal-footer">
                <div id="test"></div>
                <%= f.hidden_field :color, value: '' %><div id="output"></div>
                <div class="clearfix visible-xs"></div>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

我想我很难把token移到我的模态中，因为这就是我在这里试图解决的问题。建议？

Answer 1

实现这一点的一种方法是在视图中呈现空模态，并为其主体提供id。在向action render.js文件发送ajax请求后，该文件将新数据注入模态的主体并使用

$("#Modal_ID").modal("toggle")

---

例如：在您看来：：

<%= link_to "NAME OF LINK", PATH_TO_YOUR_ACTION, :"data-toggle"=>"modal", :"data-target"=>"#WidgetGenModal", class: "company-name-link", remote: true%>
<%= render "YOUR_EMPTY_MODAL_PARTIAL"%>

在你的空模式部分

<div class="modal fade" id="WidgetGenModal" tabindex="-1" role="dialog" aria-labelledby="widgetGenModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="widgetGenModal"><div class="btn btn-danger btn-xs">NEW</div> Share Your Category</h3>
            <p>We've made it easier for you to share everything you store / save within your categories. Simply copy the specially generated code, paste it some where on your website or share the link with someone to let them see what you've saved.</p>
          </div>
          <div class="modal-body" id="WidgetGenModalBody">
          </div>
          <div class="modal-footer">
            <div id="test"></div>
            <%= f.hidden_field :color, value: '' %><div id="output"></div>
            <div class="clearfix visible-xs"></div>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

请检查你的f.隐藏字段的逻辑，这是不对的。

在您的行动中：：

def your_action
  // whatever
  format.js
end

在视图中的_action.js文件中

$("WidgetGenModalBody").html('<%= YOUR DATA RETURNED OR PARTIAL CONTAING THE DATA %>')
$("WidgetGenModal").modal("toggle")