Question

 View:
 / Modal products
 #productModal.modal.fade
  .modal-header
    %button.close{"data-dismiss" => "modal"} ×
     %h3 Add a product to your list
  .modal-body
 #product_step_1
   = form_for(@new_product, :url => products_path, :remote => true, :html =>            
   {:class => 'form-horizontal'}) do |f|
    .inputs
      = f.text_field :url, :required => false, :autofocus => true,  
      placeholder: "the url to the product..."
      %br
      %br
      = f.submit "Add", :class => "btn btn-primary"
  #product_step_2{:style => "display:none;"}


controller:
 @all_the_urls = "list of urls"

 respond_to do |format|
  format.js { render :template => 'products/create', :locals =>   
    {:all_image_urls => @all_image_urls}}
  end

 create.js.erb
 $("#product_step_1").hide();
 $("#product_step_2").show();

我在创建我的引导程序多步模式向导中显示数据时遇到问题。该过程是，用户首先输入由创建操作处理的URL。之后，我使用远程表单通过ajax进行处理。控制器操作命中create.js.erb文件，隐藏表单的第一部分，现在显示下一部分。

一切尽善尽美。问题是在表单的第一部分，变量是用数据设置的（来自用户输入的内容），现在我仍然需要表单中不再隐藏的部分中的新数据来自jquery。虽然在控制器命中respond_to并正确处理create.js.erb之后，变量都会从控制器操作中丢失。

如何将端到端这样的变量一直传递给隐藏元素，所以现在在隐藏的div中没有暴露，我可以在rails视图中看到它。（这是完全相同的观点）。

（我正在尝试没有运气的当地人）。

Answer 1

根据我的最新评论后的理解，这可能会帮助您找到正确的方向。对于给出的URL，我创建一个Product模型，然后在模型中生成一些随机图像URL，然后将产品和那些图像传递回json。然后，在视图中，我通过为每个标记生成ajax:success标记来监听img并处理作为json返回的图像。您可以使用此示例，并将每个img包装在其他<a>标记中，并使用数据，这样当您单击它时，您将“选择”所提供产品的图像。例如<a href='/product/1/choose_image?image_url=http%3A%2F%2Fplacekitten.com%2F101%2F101'><img></a>。然后，您可以通过ProductController中的控制器操作存储图像URL。我会告诉你如何处理它。

控制器：

class ProductsController < ApplicationController
  def new
    @product = Product.new
  end

  def create
    @product = Product.create(create_product_params)

    render json: { product: @product, images: @product.fetch_images }
  end

  private 
  def create_product_params
    {}.tap do |h|
      h[:url] = params[:url]
    end
  end
end

观点：

<h2>Add a new product</h2>

<div id="new-product">
  <%= form_for @product, url: products_url, remote: true do |f| %>
    <%= f.text_field :url %>
    <br/>
    <%= f.submit("Add") %>
  <% end %>
</div>
<div id="product-images"></div>

<script type="text/javascript">
  $("#new-product").on("ajax:success",function(e,data,status,xhr){
    var imageHtml = [],
        i = 0,
        len = data.images.length,
        $imagesArea = $("#product-images");
    $(this).hide();

    for(;i<len;i++){
      imageHtml.push("<img src='")
      imageHtml.push(data.images[i])
      imageHtml.push("' alt='image' /><br/>");
    }
    $imagesArea.html(imageHtml.join(''));
    $imagesArea.show();
  });
</script>

模特：

class Product < ActiveRecord::Base
  attr_accessor :url

  def fetch_images
    images = []

    (100..200).each do |i|
      images.push "http://placekitten.com/#{i}/#{i}"
    end

    images
  end

end

在视图中使用带有rails的ajax变量

1 个答案: