뷰에 레일이있는 변수가있는 아약스 사용

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에서 레일스 뷰에서 볼 수 있습니다. (이것은 모두 같은 견해 임).

(나는 운이없는 지방 주민과 실험 중이었다).

Answer 1

귀하의 최근 의견을 이해 한 후, 아마도 이것이 올바른 방향으로 가도록 도와줍니다. 주어진 URL에 대해 Product 모델을 만들고 모델에서 임의의 이미지 URL을 생성 한 다음 제품과 이미지를 json으로 다시 전달합니다. 그런 다음보기에서 나는 ajax:success을 청취하고 각각에 대해 img 태그를 생성하여 json으로 반환 된 이미지를 처리합니다. 이 예제를 사용하여 다른 <a> 태그의 각 img을 데이터와 함께 포장하여 클릭하면 제공되는 제품의 해당 이미지를 "선택할"수 있습니다. 예 : <a href='/product/1/choose_image?image_url=http%3A%2F%2Fplacekitten.com%2F101%2F101'><img></a>. 그런 다음 Controller 액션을 통해 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