Search code examples
javascriptruby-on-railstwitter-bootstrapruby-on-rails-4simple-form

How do I send a local variable to a partial rendered only after a link is clicked?


I have a Bootstrap Modal that is triggered when this link is clicked:

<a class="plus" href="javascript:;" data-toggle="modal" data-target="#myModal">&nbsp;</a>

I then have this in my _footer.html.erb

<%= render 'shared/tag_users_modal' %>

Which then has this standard Bootstrap Modal:

<!-- Modal -->
<div class="modal tagging fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Tag User</h4>
      </div>
      <div class="modal-body">
                <%= simple_form_for @node, url: add_tagged_user_node_path(@node), method: :post do |f| %>
                  <%= f.error_notification %>

                  <div class="form-inputs">
                        <%= f.input_field :user, label: "Users", collection: @users, as: :check_boxes, checked: @node.user_tags %>
                  </div>                            

                  <div class="form-actions">
                    <%= f.button :submit %>
                  </div>
                <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

This doesn't work because @node is nil - i.e. it wasn't passed. I can't pass that variable from my _footer partial, so I want to be able to pass it in the original execution of the modal.

How do I do that? Or how do I do this in another way?

Edit 1

To add more context, The initial link that is calling the Bootstrap Modal is actually in another partial that had a local variable of node passed to it also. That one is called like this:
<%= render partial: "shared/box", locals: {node: node} %>

But I need to continue the execution of the modal being fired only after that toggle link is clicked in that first shared/box.

In summary: - /shared/box partial has original link that fires BS modal. - /shared/footer' contains a render of another partialtag_users_modal. -/shared/tag_users_modalcontains the modal, but I need the@nodeobject passed to it and theadd_tagged_user_node_path` to work.

Now it doesn't get passed, because I can't figure out a way to get the original node: node to the third partial in the chain.


Solution

  • For this reason, it is best to use local variables instead of instance variables in your partials.

    # your main view file:
    <%= render partial: path_to_partial, locals: {bool: true} %>
    
    # your partial:
    <%= bool ? 1 : 2 %>
    

    With those options, the partial will display 1.

    Also, an alternative to passing local variables as the locals option is to use render instead of render partial like so:

    # your main view file:
    <%= render path_to_partial, bool: true %>
    

    From the above, you can infer that you must change @node in your partial to node and specify {node: @node} wherever you are rendering the partial.