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() div中的内容，那么

#componend_id太大了。在这方面，Rails与PHP没有什么不同。当它从客户端收到带有XmlRpc标头的post请求时，它会以你告诉它的任何内容作出响应：

@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处理程序中收到响应时，您可以简单地使用XML或JSON（至少，我将如何将其发回）的数据填充div。 / p>

您可能希望在dataType: "json"哈希中使用$.ajax以确保正确设置了接受标头。然后只需设置$('#component_id').html(data['whatevercameback'])。

要查看整个往返行程，请在Firebug中查看，它会显示您发布的内容以及Rails发回的内容。

Rails和Ajax表单提交

1 个答案: