Ruby on rails ajax的回形针问题

我正在阅读本教程： 因为我需要将产品图像保存在独立的模型中。但是，当Product.create执行时，不要保存产品图像模型的数据

注意：我使用newpack操作是因为我需要使用ajax来创建新产品

求你了，我需要帮助

我的代码

控制器

    class Admin::PacksController < ApplicationController
      def new
        @pack = Pack.new
        @product = Product.new
        4.times {@product.product_images.build} # added this
        respond_to do |format|
          format.html # new.html.erb
          format.xml  { render :xml => @pack }
        end
      end

      def create_starred_product
        product = Product.new(params[:product])
        product.save
...

      end

class Admin:：PacksController@pack}
结束
结束
def创建星级产品
product=product.new（参数[：product]）
产品保存
...
结束

看法

{:controller=>“products”，:action=>“create_starred_product”}，:html=>{:multipart=>true}do | f |%>
其他产品领域。它的保存方法还可以
Imágenes

图像
“文本区域”->

模型

class Product < ActiveRecord::Base
  has_many :packs, :through => :pack_products
  has_many :product_images, :dependent => :destroy
  #PAPERCLIP
  accepts_nested_attributes_for :product_images, :reject_if => lambda { |t| t['product_image'].blank? }
end

class ProductImage < ActiveRecord::Base
  belongs_to :product
  has_attached_file :photo, :url => "/:attachment/:class/:id/:style_:basename.:extension", :styles => { :medium => "300x300>", :thumb => "100x100>", :small => "30x30>" }
end  

类产品：包装产品
有许多：产品\u映像，：依赖=>：销毁
#回形针
接受：product_图像的_嵌套_属性_，如果=>lambda{t | t['product_图像']]。blank？}
结束
类ProductImage“/：attachment/：class/:id/：style:：basename:“extension”，：styles=>{：Middle=>“300x300>”，：thumb=>“100x100>”，：small=>“30x30>”}
结束

正如您所说，您不能使用AJAX上传文件。然而，也有其他的解决办法

---

实现这一点的常用技术是使用iframe。看一看，本教程面向附件，但也适用于回形针。值得一看，也可以和回形针一起使用。

我和我的搭档一起找到了解决方案

我的错误在嵌套属性表单中，在Ajax中没有。因此我找到了将回形针与Ajax结合使用的解决方案。现在我发布了示例代码

但是我解释了代码

模型

两种模式

产品和产品图片

当我以ajax形式创建一个产品（每个产品都属于包装）时，我就希望这样。 在product_images模型中，每个产品都有许多图像。所以我也想保存图像

代码

控制器Ajax操作

class ProductsController < ApplicationController
      def create_starred_product
        product = Product.new(params[:product])
        product.save

        render :update do |page|
          page.replace_html 'star-product', :partial => "admin/products/star_product_name", :locals => {:star_product => product}
          page.call "$j.modal.close"
        end
end

  end

class ProductsController“admin/products/star_product_name”，：locals=>{:star_product=>product}
page.call“$j.modal.close”
结束
结束
结束

模型

class Product < ActiveRecord::Base
  has_many :packs, :through => :pack_products
  has_many :product_images, :dependent => :destroy
  #PAPERCLIP
  accepts_nested_attributes_for :product_images, :reject_if => lambda { |t| t['product_image'].blank? }
end

class ProductImage < ActiveRecord::Base
  belongs_to :product
  has_attached_file :photo, :url => "/:attachment/:class/:id/:style_:basename.:extension", :styles => { :medium => "300x300>", :thumb => "100x100>", :small => "30x30>" }
end  

产品模型

class Product < ActiveRecord::Base
  has_many :packs, :through => :pack_products
  has_many :product_images, :dependent => :destroy

  #PAPERCLIP
  accepts_nested_attributes_for :product_images#, :reject_if => lambda { |t| t['product_image'].blank? }

  has_attached_file :photo, :url => "/:attachment/:class/:id/:style_:basename.:extension", :styles => { :medium => "300x300>", :thumb => "100x100>", :small => "30x30>" }

类产品：包装产品
有许多：产品\u映像，：依赖=>：销毁
#回形针
接受：product_images#的_嵌套的_属性_，如果=>lambda{t | t['product_images']。blank？}
已附加文件：photo，：url=>“/：attachment/：class/:id/：style:：basename:“extension”，：styles=>{：Middle=>“300x300>”，：thumb=>“100x100>”，：small=>“30x30>”}

产品图像模型

class ProductImage < ActiveRecord::Base
  belongs_to :product

  has_attached_file :photo, :url => "/:attachment/:class/:id/:style_:basename.:extension", :styles => { :medium => "300x300>", :thumb => "100x100>", :small => "30x30>" }
end  

end

class-ProductImage“/：attachment/：class/:id/：style:：basename:“extension”，：styles=>{：Middle=>“300x300>”，：thumb=>“100x100>”，：small=>“30x30>”}
结束
结束

在ajax中查看弹出窗口（这是一部分）

$j（文档）.ready（函数（）{
$j（“#产品_提交”）。单击（功能（事件）{
event.preventDefault（）；
$j（“#上传表单”）.ajaxSubmit({
提交前：函数（a、f、o）{
o、 数据类型='json'；
},
完成：函数（XMLHttpRequest，textStatus）{
//XMLHttpRequest.responseText将包含上载图像的URL。
//将其放入您创建的图像元素中，或按您的意愿使用它。
//例如，如果您有一个id为“my_image”的图像元素，则
//$（'my#u image'）.attr（'src'，XMLHttpRequest.responseText）；
//将设置该图像标记以显示上载的图像。
}
});
});
});
新产品埃斯特雷拉
{:controller=>“products”，：action=>“create_starred_product”}，:html=>{:method=>：post，：id=>“uploadForm”，：multipart=>true}do | f |%>
名称：“文本区域”%>


Precio:“文本区域”%>


图像
“文件上载”-->





descripión 10，：class=>“textareaclearfix”-->



“产品提交”%>

---

我使用的是jquery和jquery表单插件（在谷歌中搜索）

你可以在上面找到两个版本的ajax上传

分支

master

：它使用

分支

uploadify

：它使用uploadify：

---

两者都有内置的裁剪。

问题是嵌套属性表单。后来我发布了代码

另一个gem来帮助解决这个问题，我刚刚发现，当我遇到同样的问题时，强烈推荐。

对不起，我的标题有一个错误。我没有意识到。问题是关于回形针和Ajax的应用。现在我读到回形针和ajax不能一起工作（javascript安全模型），所以我需要

<script type="text/javascript">
    $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.
                }
            });
        });
    });
</script>
<div id="new-starred-product" class="popup clearfix">
    <div id="header">Nuevo producto estrella</div>
  <% remote_form_for @product, :url => {:controller => "products", :action => "create_starred_product"}, :html => {:method => :post, :id => 'uploadForm', :multipart => true} do |f| %>
      <div id="content">
        <label>Nombre:</label> <%= f.text_field :name, :class => "textarea" %>
        <br/>
        <label>Precio:</label> <%= f.text_field :price, :class => "textarea" %>
        <br/>
        <%#= f.file_field :photo %>
        <div id="images-selector">

          <% count = 0 %>
          <%# f.fields_for "product_images_attributes[]", ProductImage.new do |builder| %>
          <% f.fields_for :product_images, 4.times {ProductImage.new} do |builder| %>
              <% if builder.object.new_record? %>
                  <label>
                    Imagen <%= "#{count = count + 1}" %>
                  </label>
                  <%= builder.file_field :photo, :class => "file-upload" -%><br />
                  <br/>
              <% end %>              
              <%#= builder.text_field :testfield %>
<!--ACA VA EL CODIGO PARA IMAGENES-->
          <% end %>
        </div>
        <br/>
        <label>Descripción</label><%= f.text_area :description, :rows => 10, :class => "textarea clearfix" -%>
        <br/>

        <p>
          <%#= f.submit "Crear" %>
        <%= link_to "Crear", "#", :id => "product_submit" %>
        </p>
      </div>
  <% end %>
</div>