Rails和Ajax表單提交

Question

我正在編寫一個應用程序，它允許用戶將一個組件添加到我的數據庫中的特定頁面，但是我被困在了一點JS上。

我的表單提交得很好。我堅持如何「刷新」顯示與頁面關聯的所有當前組件的容器div。

我來自PHP的背景，所以我知道我可以在我的模型中編寫一個方法，並對其進行ajax調用，並使用jQuery重新填充容器div。我如何在Rails中做到這一點？或者有更好的方法來做到這一點？

形式：

<div class="add_component_block" style="display: none"> 
       <%= form_for page, :url => page_url(page), :class => "edit_page" do |p| %> 
         <div class="field"> 
          <%= select_tag :component_id, options_for_select(@components.collect { |comp| [comp.name, comp.id] }), :include_blank => 'Select a Component' %> 
         </div> 

         <div class="action"> 
          <%= p.submit :Submit %> 
         </div> 
        <% end %> 
      </div> 

的jQuery：

$('#page_submit').click(function(e){ 
     $.ajax({ 
      url: $('.edit_page').attr('action'), 
      type: "PUT", 
      data: "component_id=" + $('#component_id').val(), 
      success: function(data){ 
       location.reload(); 
      } 
     }); 
     return false; 
    }); 

在此先感謝您的幫助！

工作守則

控制器：

def create 
    if !params[:component_id] 
     @component = Component.new(params[:component]) 

     respond_to do |format| 
     if @component.save 
      params[:page_id].each { |p| 
      PagesComponent.create({ :page_id => p, :component_id => @component.id }) 
      } unless params[:page_id].nil? 
      format.html { redirect_to(@component, :notice => 'Component was successfully created.') } 
      format.xml { render :xml => @component, :status => :created, :location => @component } 
     else 
      format.html { render :action => "new" } 
      format.xml { render :xml => @component.errors, :status => :unprocessable_entity } 
     end 
     end 
    else 
     @component = PagesComponent.new(:page_id => params[:page_id], :component_id => params[:component_id]) 

     if @component.save 
      @all_components = Page.where("id = ?", params[:page_id]) 
      @component_list = [] 

      @all_components.each do |pc| 
      pc.components.each do |c| 
       @component_list << c.name 
      end 
      end 

      render :json => @component_list 
     end 
    end 
    end 

的jQuery：

$('#page_submit').click(function(){ 
     $('.add_component_block').hide(); 
     $.ajax({ 
      url: $('.edit_page').attr('action'), 
      type: "POST", 
      data: "component_id=" + $('#component_id').val(), 
      success: function(data){ 
       console.log(data) 
       $('#page_components').empty(); 
       $.each(data, function(i, itemData){ 
        $('#page_components').append("Name: " + itemData + "<br />") 
       }); 
      } 
     }); 
     return false; 
    }); 

Answer 1

location.reload()過大錘子，如果你只是想更新什麼是在#componend_id DIV。 Rails在這方面與PHP沒有區別。當它收到來自客戶端的POST請求與XML-RPC頭，則它與任何迴應你告訴它：

@my_data = MyModel.find(whatever) 

if request.xhr? do 
    respond_to do |format| 
    format.html  # if this method responds to HTML 

    format.xml do 
     render @my_data.to_xml, :layout => false 
    end 

    format.json do 
     render @my_data.to_json, :layout => false 
    end 
    end 
end 

當響應在您success事件接受，你可以簡單地用數據填充DIV這是運回，無論是XML或JSON（至少，這就是我將它運回）。

您可能希望在$.ajax散列中使用dataType: "json"以確保接受標頭設置正確。然後簡單地設置$('#component_id').html(data['whatevercameback'])。

要查看整個往返行程，請在Firebug中查看它，它會顯示您發佈的內容以及Rails發回的內容。