在視圖中使用帶有滑軌的ajax

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文件，隱藏表單的第一部分，現在顯示下一部分。在視圖中使用帶有滑軌的ajax

一切都到了這一點工作正常。問題是，在表單的第一部分，變量是由數據（來自用戶放置的）設置的，現在我仍然需要在不再隱藏的表單部分中顯示新數據，來自jquery。儘管在控制器命中respond_to並正確處理create.js.erb之後，變量都從控制器操作中丟失。

我怎樣才能讓這個端到端的變量一直傳遞到隱藏的元素，所以現在隱藏的div沒有暴露出來，我可以在rails視圖中看到它。（這是所有相同的看法）。

（我正在嘗試與當地人沒有運氣）。

來源

2013-08-25 stonep

你能爲你特別需要傳遞，並從你的控制器更重要的是清楚了嗎？例如它是你需要的all_image_urls，或new_product，或傳遞給new_product表單的url？如果你澄清了產品目標，而不僅僅是你的代碼目標，你可能會得到一些如何去做的答案，或者如何使用不同的方法。目前還不清楚你真正需要什麼。 – Carl

當然，對不起，如果這不清楚。因此，目標是用戶輸入一個URL，從URL的圖像url的列表放在一起（從nokigiri）。輸入url後，控制器操作將可用的URL列表放在一起，模式中的下一步現在應該顯示每個圖像的可選圖像。我的猜測是這將遍歷變量，並且每個img都會有一個link_to來選擇最終圖像。 – stonep

從我瞭解您的最新評論後，也許這將有助於你在正確的方向。對於給定的網址，我創建了一個產品模型，並在模型中生成一些隨機圖像網址，然後將產品和這些圖像作爲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

來源

2013-08-25 03:17:30 Carl

在視圖中使用帶有滑軌的ajax

回答

相關問題