Update Table With jQuery (Ajax) - Ruby On Rails

Question

I have a form that creates a new product /views/quotes/edit.html.erb (editing a quote here in this form as well that is why it's in the quote directory)

<%= form_for (@product), :remote => true do |p| %>

    <p>
    <%= p.label :product_part %>
    <%= p.text_field :product_part%>
    </p>

    <p>
    <%= p.submit %>
    </p>
<% end %>

Here is my table /views/quotes/edit.html.erb

<table id="products">
    <tr>
        <th>Product/Part</th>  
        <th>Unit/Mdl</th>
        <th>Description</th>  
        <th>Qty</th>
        <th>Price</th>
        <th>Total</th>  
    </tr>   
    <tbody>
        <%= render @products %>
    </tbody>
</table>

Here is the create definition in my controller /controllers/products_controller.rb

 def create 
    @quote = Quote.find(session[:edit_quote])
    @product = @quote.products.create!(params.require(:product).permit(:product_part))  

    respond_to do |format|
        format.html {redirect_to customers_url}
        format.js {}
    end
end

Here is my partial which works on a page refresh /views/products/_product.html.erb

<tr>
    <td><%= product.product_part %></td>
    <td><%= product.unit_mdl %></td>
    <td><%= product.description %></td>
    <td><%= product.quantity %></td>
    <td><%= product.price %></td>
    <td><%= product.total %></td>
</tr>

Here is my create.js.erb file for rendering the partial with the response from the server. /views/products/create.js.erb

 $('#products').append('<%= render @product %>');

When I submit the form, the form correctly saves the data to the Product table, however the create.js.erb file does not update the table. If I replace <%= render @product %> with hard coded html, then the hard coded values do correctly append to my table. I am not getting any errors from the terminal either. Here is the terminal output

Started POST "/products" for 10.0.2.2 at 2015-12-19 17:11:05 +0000
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1,     127.0.0.0/127.255.255.255
Processing by ProductsController#create as JS
  Parameters: {"utf8"=>"✓", "product"=>{"product_part"=>"sample product"}, "commit"=>"Create Product"}
  Quote Load (6.2ms)  SELECT  "quotes".* FROM "quotes" WHERE "quotes"."id" = ? LIMIT 1  [["id", 1]]
   (0.2ms)  begin transaction
  SQL (25.1ms)  INSERT INTO "products" ("product_part", "quote_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["product_part", "sample     product"], ["quote_id", 1], ["created_at", "2015-12-19 17:11:05.587549"],     ["updated_at", "2015-12-19 17:11:05.587549"]]
   (8.8ms)  commit transaction
  Rendered products/_product.html.erb (0.2ms)
  Rendered products/create.js.erb (107.3ms)
Completed 200 OK in 499ms (Views: 414.0ms | ActiveRecord: 40.3ms)

Any help would be appreciated! Thanks in advance

Because I am editing a quote for a customer. Inside the quote, I am wanting to have the ability to add product information to the customers quote which I am currently editing. @RajarshiDas — , Dec 19 '15 at 17:53
id products is not getting to append check the current page where create called can get the element by $('table#products'). — Rajarshi Das, Dec 19 '15 at 18:11
It can. When I replace the jquery with like $('#products').hide(); it hides the table so I know the js file is being rendered, it just isn't rendering anything for ATproduct for some reason @RajarshiDas — , Dec 19 '15 at 18:20
what happen if you use `$('table#products tbody').html('<%= render @product %>');` in `create.js.erb` and submi form to create — Rajarshi Das, Dec 19 '15 at 18:27

score 0 · Answer 1 · answered Dec 19 '15 at 18:31

0

I replaced the content of my create.js.erb with

$("<%= escape_javascript(render @product) %>").appendTo("#products");

This fixed my issue. I am still unsure why my other solution didn't work but this one does for sure.

answered Dec 19 '15 at 18:31

@Canon I would like to suggest to check with _http://stackoverflow.com/a/1623813/3098330_ – Gupta Dec 19 '15 at 19:49

score 0 · Answer 2 · answered Dec 19 '15 at 18:36

0

You can try this

$('table#product tbody').append("<%= j render(@product) %>")

answered Dec 19 '15 at 18:36

Rajarshi Das

11,778
6
46
74

Update Table With jQuery (Ajax) - Ruby On Rails

2 Answers2