How to call controller action on click and modal in Rails

Question

I'm trying to figure out how to manage the ability to call my controller from a link and return the data after all process is completed, while at the same time displaying a modal with that data returned. Here's my logic that I have yet to figure out and hope someone can help;

I've tried the following with no success;

#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 -->

I guess I'm having a hard time moving the token into my Modal as that what I'm trying to work out here. Suggestions?

Answer 1

One way to do that is to render empty modal in your view and give an id to its body. After sending an ajax request to the action render .js file that injects the new data to the body of the modal and use

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

---

ex :: in your view ::

<%= 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"%>

in 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 -->

Please check your logic for f.hidden_field this is not right.

in your action ::

def your_action
  // whatever
  format.js
end

in your_action.js file in views

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