Soumission de formulaire Rails et Ajax

Question

J'écris une application qui permettra à un utilisateur d'ajouter un composant à une page particulière dans ma base de données, mais je suis coincé sur un petit peu de la JS.

J'ai le formulaire de soumission très bien. Je suis bloqué sur la façon de "rafraîchir" le div conteneur qui montre tous les composants actuels liés à une page.

Je viens d'un environnement PHP, donc je sais que je pourrais écrire une méthode dans mon modèle et y faire un appel ajax et utiliser simplement jQuery pour repeupler le conteneur div. Comment ferais-je cela dans Rails? Ou y a-t-il une meilleure façon de faire cela?

Forme:

<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; 
    }); 

Merci à l'avance pour l'aide!

Code du travail

Contrôleur:

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() est trop gros marteau si vous êtes désireux de mettre à jour ce qui est dans le #componend_id div. Rails n'est pas différent de PHP à cet égard. Lorsqu'il reçoit une demande de poste du client avec un en-tête de XmlRpc, il répond alors avec tout ce que vous dites à:

@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 

Lorsque la réponse est reçue dans votre gestionnaire success, vous pouvez simplement remplir la div avec les données qui est renvoyé, soit en XML ou JSON (au moins, c'est comme ça que je l'expédierais).

Vous pouvez utiliser dataType: "json" dans votre hachage $.ajax pour vous assurer que les en-têtes d'acceptation sont correctement définis. Ensuite, réglez simplement $('#component_id').html(data['whatevercameback']).

Pour voir l'ensemble du voyage aller-retour, jetez un œil à Firebug, qui vous montrera ce que vous publiez et ce que Rails renvoie.