Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I found the solution together with my partner.</p> <p>My error was in nested attributes form, no in Ajax.so I found the solution for to use paperclip with Ajax. Now I posted example code.</p> <p>However I explain the code.</p> <p>Models </p> <p>Two models</p> <p>Product and Product_images</p> <p>I wanted that when i created a product in ajax form (each product belongs_to pack). Each product has many images in product_images model. Therefore I wanted save images too.</p> <p>The code</p> <p>Controller Ajax action</p> <pre><code>class ProductsController &lt; ApplicationController def create_starred_product product = Product.new(params[:product]) product.save render :update do |page| page.replace_html 'star-product', :partial =&gt; "admin/products/star_product_name", :locals =&gt; {:star_product =&gt; product} page.call "$j.modal.close" end end end </code></pre> <p>Models</p> <p>Products model</p> <pre><code>class Product &lt; ActiveRecord::Base has_many :packs, :through =&gt; :pack_products has_many :product_images, :dependent =&gt; :destroy #PAPERCLIP accepts_nested_attributes_for :product_images#, :reject_if =&gt; lambda { |t| t['product_image'].blank? } has_attached_file :photo, :url =&gt; "/:attachment/:class/:id/:style_:basename.:extension", :styles =&gt; { :medium =&gt; "300x300&gt;", :thumb =&gt; "100x100&gt;", :small =&gt; "30x30&gt;" } </code></pre> <p>Product_images model</p> <pre><code>class ProductImage &lt; ActiveRecord::Base belongs_to :product has_attached_file :photo, :url =&gt; "/:attachment/:class/:id/:style_:basename.:extension", :styles =&gt; { :medium =&gt; "300x300&gt;", :thumb =&gt; "100x100&gt;", :small =&gt; "30x30&gt;" } end end </code></pre> <p>View popup in ajax (These is a partial)</p> <pre><code>&lt;script type="text/javascript"&gt; $j(document).ready(function() { $j('#product_submit').click(function(event) { event.preventDefault(); $j('#uploadForm').ajaxSubmit({ beforeSubmit: function(a, f, o) { o.dataType = 'json'; }, complete: function(XMLHttpRequest, textStatus) { // XMLHttpRequest.responseText will contain the URL of the uploaded image. // Put it in an image element you create, or do with it what you will. // For example, if you have an image elemtn with id "my_image", then // $('#my_image').attr('src', XMLHttpRequest.responseText); // Will set that image tag to display the uploaded image. } }); }); }); &lt;/script&gt; &lt;div id="new-starred-product" class="popup clearfix"&gt; &lt;div id="header"&gt;Nuevo producto estrella&lt;/div&gt; &lt;% remote_form_for @product, :url =&gt; {:controller =&gt; "products", :action =&gt; "create_starred_product"}, :html =&gt; {:method =&gt; :post, :id =&gt; 'uploadForm', :multipart =&gt; true} do |f| %&gt; &lt;div id="content"&gt; &lt;label&gt;Nombre:&lt;/label&gt; &lt;%= f.text_field :name, :class =&gt; "textarea" %&gt; &lt;br/&gt; &lt;label&gt;Precio:&lt;/label&gt; &lt;%= f.text_field :price, :class =&gt; "textarea" %&gt; &lt;br/&gt; &lt;%#= f.file_field :photo %&gt; &lt;div id="images-selector"&gt; &lt;% count = 0 %&gt; &lt;%# f.fields_for "product_images_attributes[]", ProductImage.new do |builder| %&gt; &lt;% f.fields_for :product_images, 4.times {ProductImage.new} do |builder| %&gt; &lt;% if builder.object.new_record? %&gt; &lt;label&gt; Imagen &lt;%= "#{count = count + 1}" %&gt; &lt;/label&gt; &lt;%= builder.file_field :photo, :class =&gt; "file-upload" -%&gt;&lt;br /&gt; &lt;br/&gt; &lt;% end %&gt; &lt;%#= builder.text_field :testfield %&gt; &lt;!--ACA VA EL CODIGO PARA IMAGENES--&gt; &lt;% end %&gt; &lt;/div&gt; &lt;br/&gt; &lt;label&gt;Descripción&lt;/label&gt;&lt;%= f.text_area :description, :rows =&gt; 10, :class =&gt; "textarea clearfix" -%&gt; &lt;br/&gt; &lt;p&gt; &lt;%#= f.submit "Crear" %&gt; &lt;%= link_to "Crear", "#", :id =&gt; "product_submit" %&gt; &lt;/p&gt; &lt;/div&gt; &lt;% end %&gt; &lt;/div&gt; </code></pre> <p>I am using jquery and jquery-form plugin (search in google)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload