CODEWITHSUNDEEP
ruby-on-rails
Rafi
Rafi

Reputation: 1922

Rails - How To Transfer Data With Button Press

I'm very new to Rails, so this has been tough for me to understand. The front end guy in my group for a school project designed this so that when I tap the "More Info" button on a displayed product, a pop up box shows up on the screen with more information about the product.

How do I make the selected product's info accessible to me so I could display it in the pop up box? I've tried button_to with an :action but I apparently needs a view template, but I don't want that. I simply want to display the selected product's info in the pop up box that shows up when the user taps the "More Info" button.

This is the code I'm working with:

<!-- Container for the Catalog Content -->
<div class="Catalog_page">
    <!-- List all products -->
    <% @products.each do |product| %>
        <div class="product_item">
            <span class="img"><%= image_tag product.image, size: "200x100" %></span>
            <h1><%= product.name %></h1>
            <!--<%= product.description %> Saved  this just incase we needed it-->
            <%= number_to_currency(product.price) %>
            <!-- Button that creates light box -->
            <button class="lightbox" id="button">More Info</button>
        </div>


    <%end%>
    <!-- backdrop is the black background of lightbox -->
    <div class="backdrop"></div>
    <!-- the box that we need to plug information to -->
    <div class="box"><div class="close"></div>
        I DON'T KNOW HOW TO PULL THIS INFORMATION FROM DATA BASE

    </div> 

</div>

Upvotes: 2

Views: 167

Answers (2)

Diego Polido Santana
Diego Polido Santana

Reputation: 1435

There are two ways to do your task:

  • You can render these "more info" and keep it hidden, and then you show the modal these info.
<% @products.each do |product| %>
  <div class="product_item">
    <span class="img"><%= image_tag product.image, size: "200x100" %></span>
    <h1><%= product.name %></h1>
    <!--<%= product.description %> Saved  this just incase we needed it-->
    <%= number_to_currency(product.price) %>

    <!-- Button that creates light box -->

    <!-- here is the link for each product to open its modal -->

    <a data-toggle="modal" data-target="#more-info-<%= product.id %>" class="lightbox">More Info</a>

    <!-- here is the modal content -->

    <div id="more-info-<%= product.id %>"  class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">More Info</h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>

  </div>
<% end %>
  • Or you can fetch these info by ajax and then show it on the modal
<% @products.each do |product| %>
    <div class="product_item">
        <span class="img"><%= image_tag product.image, size: "200x100" %></span>
        <h1><%= product.name %></h1>
        <!--<%= product.description %> Saved  this just incase we needed it-->
        <%= number_to_currency(product.price) %>
        <!-- Button that creates light box -->
        <button class="lightbox fetch-info" data-product-id="<%= product.id %>">More Info</button>
    </div>
<%end%>
<!-- backdrop is the black background of lightbox -->
<div class="backdrop"></div>
<!-- the box that we need to plug information to -->
<div class="box"><div class="close"></div>
   <div id="fetch-result"></div>
</div>

and then, create a JS to fetch the data:

$(".fetch-info").click(function() {
  var $input = $(this);
  $.ajax({
    type: "GET",
    url: "/product_info",
    data: {
      id: $input.data("product-id")
    },
    success: function(response) {
      $("#fetch-result").html(response);
    }
  });
});

Then, create an action to provide the product info:

def product_info
  @product = Product.find(params[:id])
  render layout: false
end

and create your view with your custom product info...

That's it!

Tip: if you choose the second option, you can improve by calling the action as JSON (fetch just the product info, and then in your success callback, you add the html there)

Upvotes: 3

Timmy Von Heiss
Timmy Von Heiss

Reputation: 2218

This is an index page, www.example.com/products. It is showing a list of the products and when clicked they will open a lightbox. What you are going to have to do is pass the id of each individual product into the button so that when the lightbox is opened it is showing the correct information for that product. Alessandro's code is not going to help you because product.attribute1 will not be defined.

Upvotes: 0

Related Questions