如何在Rails中调用click和modal上的控制器操作

时间:2014-11-11 18:20:43

标签: ruby-on-rails

我试图找出如何管理从链接调用我的控制器并在所有过程完成后返回数据的能力,同时显示返回该数据的模态。这是我的逻辑,我还没弄明白并希望有人可以提供帮助;

我尝试过以下操作但没有成功;

#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移动到我的模态中,就像我在这里尝试解决的那样。建议?

1 个答案:

答案 0 :(得分:0)

一种方法是在视图中渲染空模态并为其主体提供id。向动作渲染.js文件发送ajax请求后,将新数据注入模态体并使用

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

ex :: 在你的视图::

<%= 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.hidden_​​field的逻辑,这是不对的。

你的行动中的

::

def your_action
  // whatever
  format.js
end

在视图中的your_action.js文件中

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