使用 ajax 和 rails 在视图中获取变量答案

【问题标题】：Using ajax with rails getting variable in the view使用 ajax 和 rails 在视图中获取变量
【发布时间】：2013-08-25 02:10:01
【问题描述】：

 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，然后由 create 操作处理。之后，我使用远程表单通过 ajax 进行处理。控制器操作点击 create.js.erb 文件，隐藏表单的第一部分，现在显示下一部分。

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

我怎样才能有这个端到端，以便变量一直传递到隐藏元素，所以现在在没有暴露的隐藏 div 中，我可以在 rails 视图中看到它。（这是所有相同的观点）。

（我正在与当地人进行实验，但没有运气）。

【问题讨论】：

您能否更清楚地了解您需要传入和传出控制器的具体内容？例如是您需要的 all_image_urls，还是 new_product，还是传递给 new_product 表单的 url？如果您阐明了产品目标，而不仅仅是代码目标，您可能会得到一些关于如何做到这一点或如何使用不同方法的答案。目前尚不清楚您真正需要什么。
当然，如果不清楚，抱歉。因此，目标是用户输入一个 url，从 url 中将图像 url 的列表放在一起（来自 nokigiri）。输入 url 后，控制器操作将可用的 url 列表放在一起，模态中的下一步现在应该显示每个要从中选择的图像的 =image_tag。我的猜测是这将遍历变量，并且每个 img 都会有一个指向新操作的 link_to 以选择最终图像。

标签： ruby-on-rails ajax twitter-bootstrap

【解决方案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>。然后，您可以通过控制器操作将图像 url 存储在您的 ProductController 中。至于你想如何处理，我会留给你。

控制器：

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

【讨论】：