CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstrap
Onichan
Onichan

Reputation: 4526

Pass Variable from View to Model outside of view

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.

Upvotes: 2

Views: 588

Answers (1)

dstull
dstull

Reputation: 338

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:

  1. 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 %>

  2. 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 } %>");

  3. 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>

Upvotes: 1

Related Questions