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. Когда он получает запрос от клиента с заголовком XmlRpc, он отвечает тем, что вы ему сообщаете:

@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 (по крайней мере, так я бы его отправил).

Возможно, вы захотите использовать dataType: "json" в вашем хэше $.ajax, чтобы убедиться, что заголовки принятия установлены правильно. Затем просто установите $('#component_id').html(data['whatevercameback']).

Чтобы увидеть весь круговой тур, проверьте его в Firebug, который покажет вам, что вы публикуете и что отправляет Rails.