How to update partial view in ruby on rails

Question

I want to update partial view product_images.html.erb through ajax My js code is

    $("#delete-img").click(function(e){
      var checkValues = $('input[name=image_id]:checked').map(function(){
          return $(this).val();
      }).get();
      var id = $("#product_id").val();
      if(checkValues.length == 0) {
          alert("Select checkboxe first");
      }
      else{
          $.ajax({
              url: '/products/delete_product_images',
              type: 'delete',
              data: { ids: checkValues, id: id },
              success:function(data){
                  $('.product_images_class').html("<%= escape_javascript(render 'sproduct_images')%>");
              }
          });
      }

  });

But instead of updation it write <%= escape_javascript(render 'product_images')%> in that class after success. Is there any another way?

This may help you [change a partial](http://stackoverflow.com/questions/11141509/onchange-display-change-a-partial). — viks, Oct 13 '15 at 12:50
You can also try by giving partials folder name "<%= escape_javascript(render 'sproducts/sproduct_images')%>". if your partial and html.erb file which having ajax in different folders. — viks, Oct 13 '15 at 13:18
If your ajax call in html.erb file in script tag then it will work. — viks, Oct 13 '15 at 13:29

score 3 · Accepted Answer · answered Oct 13 '15 at 13:00

The issue is because you're calling server code in the front-end view.

JS

When you call Ajax, you're basically using front-end JS to send an asynchronous request to your back-end Rails architecture.

This means that anything you do in your front-end Ajax has to use what's on the screen, or what's been sent back in the server response.

What you're doing is mixing the front-end ajax (IE $.ajax) with the back-end ERB functionality of $('.product_images_class').html("<%= escape_javascript(render 'sproduct_images')%>");

There are two ways around it:

1. Call Server-Side JS

The first fix would be to use the respond_to functionality of Rails:

#app/controllers/products_controller.rb
class ProductsController < ApplicationController
   def destroy
      respond_to do |format|
        format.js #-> invokes app/views/products/destroy.js.erb
      end
   end
end

This will effectively replace your success callback in your front-end ajax:

#app/views/products/destroy.js.erb
$('.product_images_class').html("<%=j render "product_images" %>");

 #Front-end codr
 $.ajax({
          url: '/products/delete_product_images',
          type: 'delete',
          data: { ids: checkValues, id: id }
 });

--

2. Send the partial through to your front-end Ajax

#app/controllers/products_controller.rb
class ProductsController < ApplicationController
   def destroy
      if request.xhr? render "sproduct_images", layout: false
   end
end

#Front-end code
 $.ajax({
          url: '/products/delete_product_images',
          type: 'delete',
          data: { ids: checkValues, id: id },
          success: function(data) {
             $('.product_images_class').html(data);
          }
 });

It works. I just want to what is the purpose of layout: false What it does? — Haseeb Ahmad, Oct 13 '15 at 13:33
If you render a view/partial, it will likely render the layout. Setting layout to false makes it so only the partial is rendered — Richard Peck, Oct 13 '15 at 14:16

score 0 · Answer 2 · answered Oct 13 '15 at 12:58

0

you are just trying to render the partial in the javascript. You should look inside the data parameter passed in the success function like this:

     success:function(data){
        $('.product_images_class').html(data);
     }

answered Oct 13 '15 at 12:58

Bers

1
2

How to update partial view in ruby on rails

2 Answers2