Pass Variable from View to Model outside of view

Question

How can I pass a variable to my model which is outside the view? The problem is, I had to move the model to application.html.erb because there were z-index conflicts with having the modal code within the products/index.html.erb view.

For example, I'd like to pass the <%= product.id %> variable to the modal popup.

products/index.html.erb

<% products.each do |product| %>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#productDetails" productId="<%= product.id %>">
        Launch <%= product.id %>
    </button>
<% end %>

layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>
    <div id="page-wrapper">
        <%= render 'layouts/header' %>
        <%= yield %>
        <%= render 'layouts/footer' %>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="productDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <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">Modal title</h4>
          </div>
          <div class="modal-body product-content">
            ...
          </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>

</body>
</html>

Attempts

I've tried adding javascript to pass the variable, but nothing showed up:

<script>
$('#productDetails').on('show.bs.modal', function(e) {

    var $modal = $(this),
        productId = e.relatedTarget.productId;

    $.ajax({
        cache: false,
        type: 'POST',
        url: 'backend.php',
        data: 'EID=' + productId,
        success: function(data) {
            $modal.find('.product-content').html(productId);
        }
    });
})
</script>

I've also tried adding a partial within products/index.html, but the modal cannot be called from within products/index.html.erb because of the z-index conflicts.

This does not really make sense, your index view is going to show many products - which one exactly are you trying to pass to your modal and why do you want to post it to a PHP script? I would take a step back since this sounds like a [X and Y problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — max, Oct 24 '15 at 11:02
@max Sorry, the button is actually nested within a for loop of products, I've updated the code for `products/index.html.erb` — Onichan, Oct 24 '15 at 11:05
@Shehary thanks. it looks like its working, but how can I pass the product id into a `link_to` button within the modal? `<%= link_to add_to_cart_path(:product_id => product.id), :method=> :post do %>` — Onichan, Oct 24 '15 at 11:50
@Onichan, Sorry but I'm not familiar with ruby so can't even give you a a hint — Shehary, Oct 24 '15 at 12:33

dstull · Accepted Answer · 2015-10-24T14:23:39.087

I don't know what the php part is all about. However, ignoring that part and assuming no one would do something like that, here is how you would handle this in rails:

make the button a remote method call with link_to(something like this):

<% products.each do |product| %>
    <%= link_to 'Launch', product, { data: { toggle: 'modal', target: '#productDetails' }, class: 'btn btn-primary btn-lg', remote: true } %> 
<% end %>

create js.erb file for show called products/show.js.erb (this assumes @product is defined in controller):
```
$('#productDetails').html("<%= j render partial: 'show', locals: { product: @product } %>");
```

move everything from under modal div out into products/_show.html.erb partial:

<div class="modal-dialog" role="document">
<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">Modal title</h4>
  </div>
  <div class="modal-body product-content">
    ...
  </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>

Thanks for the answer. I just tried this, but nothing happens when I click the "Launch" button. Looks like the javascript isn't loading the model popup correctly? — Onichan, Oct 24 '15 at 14:15
Yeah, the data attributes should take care of that. Remove the other javascript you have, it shouldn't be needed. I've done this a few times, will take a look and see what I did and edit answer appropriately. — dstull, Oct 24 '15 at 14:18
Thanks for the edit, but still not loading the modal popup on click. I'll take a look at what might be the issue. — Onichan, Oct 24 '15 at 15:30

Pass Variable from View to Model outside of view

products/index.html.erb

layouts/application.html.erb

Attempts

1 Answers1