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发回的内容。