1

I'm having trouble understanding how to pass in a variable to modal, so that I can use (not as an input in a form) but to use in a helper method.

I've looked at: Passing data to a bootstrap modal and How to pass values arguments to modal.show() function in Bootstrap and Bootstrap JavaScript

Link_to modal:

<%= link_to "#{comment.fname}", "#commenterModal", :class => "btn commenter", "data-toggle" => "modal", "data-id" => "4"%>

I'm using data-id="4" to test, but I would be passing in Rails variable comment.id.

Modal:

<div id="commenterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body" style="background-color: #F5F5F5;">
        <div class="row" id="commentId">


         <%= getuserprofileofcommenter(commentId).bio %> 
        </div>

      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
      </div>

      </div>
    </div>
  </div>
</div>

JS:

$(document).ready(function() {
    $('#commenterModal').on('show.bs.modal', function(event) {
        $("#commentId").val($(event.relatedTarget).data('id'));
    });
});

I know I'm not understanding this correctly. But I'm trying to take this instance when I click on the link_to, pass the variable (comment.id) in to the modal so I can use it when I call the helper method "getuserprofileofcommenter(commentId)".

Any insight would help. Thank you!

Community
  • 1
  • 1
teresa
  • 356
  • 5
  • 21

2 Answers2

2

As I understand, you want to change content of a modal each time you click on the comment link.

I usually take help of rails ajax in such scenario.

Extract modal content to a partial _show_modal.html.erb

<div id="commenterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body" id="commentUserModal">
         <%= getuserprofileofcommenter(@comment.id).bio if @comment.present? %> 
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
      </div>
    </div> <!-- modal-content -->
   </div>  <!-- modal-dialog -->
</div>     <!-- modal -->

Template containing link_to:

<%= link_to comment.fname, show_modal_groups_path(comment_id: comment.id), :class => "btn", remote: true %>

<!-- rendering partial -->
<div id="commentUserModal">
 <%= render 'show_modal' %>
</div>

comments_controller.rb

def show_modal
  @comment = Comment.find_by_id(params[:comment_id])
  respond_to do |format|
     format.js {render 'show_modal'}
  end
end

comments/show_modal.js.erb

$("#commentUserModal").html("<%= j render 'show_modal' %>");
$("#commenterModal").modal('show');

This code is not tested.

Hope it helps.

dp7
  • 6,651
  • 1
  • 18
  • 37
  • Yes, this is on a "group page" and I wanted to show the user profile bio of the person who has commented. Does the modal have to be in a partial, currently I just have it in the same view page as where i call the **link_to**. The result I get from "@comment.id" is **nil**. – teresa Mar 22 '16 at 21:22
  • @tshckr Its all right if you have the modal in the same page where you have the **link_to** . If you are following the above answer of mine, then you need to check in your controller's action whether you are getting anything in your params[:comment_id] or not ? **Note:** If you have an instance of Comment model defined in your CommentsController' show_modal action, then that should be available to the corresponding views as well. – dp7 Mar 23 '16 at 05:24
  • Thanks @dkp, I am following your answer. I checked the url, I get something like: `show_modal?comment_id=9` so it looks like the controller should get the params. But the view only shows nil. My helper returns `Comment.find(commentid).userprofile` and I am trying to pass in commenter id into the helper (but its nil) from modal. What could be the problem? – teresa Mar 24 '16 at 23:22
  • @tshckr I think the instance variable **@comment** is not being available to your views. You can extract your modal from view template to a partial and render that partial inside **show_modal.js.erb**. Example: **$("#div_id").html("<%= j render 'your_modal_partial' %>");** – dp7 Mar 25 '16 at 14:27
  • I tried `$("#commentUserModal").html("<%= j render 'show_modal' %>");` in show_modal.js.erb. In view: `<%= link_to comment.fname, show_modal_groups_path(comment_id: comment.id), :class => "btn", remote: true %>` and `<%= render "show_modal"%>`. When I click on link_to, modal does not work. I tried adding `data: { toggle: "modal", target: "#commenterModal" } ` to link_to. But nothing was passed in. In show_modal partial I have: `
    ` ... ``
    – teresa Mar 28 '16 at 20:09
  • @tshckr I have edited my answer as per the above comment of yours. Please review the answer once again and match it with your structure of code. If you still face any further problem, then please let me know. – dp7 Mar 29 '16 at 06:48
  • thank you so much! It works. I had `<%= render 'show_modal' %>` but was missing `
    `.
    – teresa Mar 30 '16 at 00:21
0

This is not possible as you described it. The JS is running after the server responds so any rails helpers can not be invoked during this time. (rails helpers only run on the server side when the view(s) is being rendered)

The way to accomplish what you want is to do an ajax request to the server when a link is clicked and in your js response, you will have neccessary state (provided by the controller) to interact with the already open modal

ilan berci
  • 3,883
  • 1
  • 16
  • 21