web-dev-qa-db-fra.com

Rails soumettant un formulaire via ajax et mettant à jour la vue

Je souhaite mettre à jour un formulaire via ajax sans recharger la page et mettre à jour la vue en conséquence. J'ai essayé les différentes méthodes et j'ai échoué car je ne connaissais pas encore Rails.

Voici la situation. 

En modal

def new
    @new_entry = current_user.notes.build
    @words = current_user.notes
    @notes_false_list = current_user.notes.where(known: false).order("title").group_by { |note| note.title[0] }
    @notes_true_list = current_user.notes.where(known: true).order("title").group_by { |note| note.title[0] }
  end

Voir le code du formulaire.

<%= form_for @new_entry, :html => {:class => 'home-form without-entry clearfix'}  do |f| %>
      <%= f.text_field :title, placeholder: 'Squirrel', autofocus: true, class: 'title-field pull-left' %>
      <%= f.submit '', class: 'btn home-add without-entry' %>
  <% end %>

L'action de création

def create
    @new_note = current_user.notes.build(new_note_params)
    if @new_note.save
      @notes_list = current_user.notes.count
      unless @new_note.user.any_entry
        @new_note.user.toggle!(:any_entry) if @notes_list >= 50
        redirect_to root_url
      end
    else
      redirect_to root_url
    end
  end

et enfin dans la vue je veux changer

<p class="instructions count-instruction text-center">
      <%= @words.count %>
    </p>

Nous avons passé beaucoup de temps à mettre cela à jour avec AJAX, mais nous avons échoué à chaque fois. Y a-t-il de l'aide? Merci d'avance.

javascriptjqueryruby-on-railsajaxforms
7
Praveen KJ

votre code est bon, mais pour ajax,

  1. vous devez ajouter remote=true à votre formulaire. 

    <%= form_for(@image,:html=>{:id=>"your_form_id",:multipart => true,:remote=>true}) do |f |%>

  2. De plus, côté serveur, vous devez créer un fichier js.erb dans views/users/show_updated_view.js.erb pour répondre au navigateur en tant qu’appel js Et NON en HTML, et par conséquent nécessaire. montrer à l'utilisateur que quelque chose s'est passé (succès/erreur) après la soumission du formulaire (si son users_controller),

si dans votre action, vous avez besoin de quelque chose comme: - 

        respond_to do |format|  
            format.js { render 'users/show_updated_view'}
        end

  1. Et dans show_updated_view.js.erb, vous devriez mettre à jour votre vue pour les utilisateurs afin de savoir Que la vue a été mise à jour ou que le formulaire a été soumis avec succès. Soit en masquant le formulaire complet/en réinitialisant le formulaire, soit en remplaçant le formulaire par une nouvelle div indiquant que les données sont mises à jour .. ou que tout ce qui est intuitif.Il existe de nombreuses façons :).

    // ici je remplace tout votre formulaire par div ayant un message 

    $("#your_form_id").html("<div><p>You have submitted the form successfully.</p></div>");

_ {Le nom de la vue peut être n'importe quoi mais vous devez vous occuper de la réussite et de l'échec.} _

14
Milind

Voici un court article sur la pratique de AJAX avec Rails . Quelques points à noter:

  1. Ajoutez remote: true dans votre form_for.
  2. Incluez format.js dans votre contrôleur pour qu'il rende create.js.erb .

  3. Dans create.js.erb , procédez comme suit (non testé):

    $("p.instructions").innerHTML("<%= @notes_list %>")

1
Yen-Ju

La chose à retenir avec AJAX est que vous ne redirigez pas la demande (normalement), vous générez simplement du texte à renvoyer au navigateur. AJAX est fondamentalement juste du javascript pour extraire du texte du navigateur et en faire quelque chose. Souvent, vous voudriez remplacer une section de la page, c'est-à-dire remplacer une balise html et son contenu, par le texte que vous récupérez, auquel cas vous voulez que le texte soit du html. Pour rendre une partie du code HTML dans Rails, vous devez effectuer un rendu partiel. Ainsi, vous utilisez souvent du javascript pour indiquer au navigateur quoi faire avec le texte, généralement pour remplacer un élément ayant un identifiant spécifique avec le texte.

def create
  @new_note = current_user.notes.build(new_note_params)
  if @new_note.save 
    @notes_list = current_user.notes.count
    unless @new_note.user.any_entry
      @new_note.user.toggle!(:any_entry) if @notes_list >= 50
    end
  end
  respond_to do |format|
    format.html { redirect_to root_url }
    format.js #default behaviour is to run app/views/notes/create.js.erb file
  end
end

le bloc respond_to ici vous permet de traiter différemment les requêtes html et js (par exemple, ajax).

App/views/notes/create.js.erb pourrait avoir quelque chose comme:

page.replace "foo", :partial => "app/views/notes/bar"
0
Max Williams

Essayez d'ajouter respond_to block dans l'action de votre contrôleur "create", et respectez create.js.erb et indiquez dans votre js que vous souhaitez exécuter après l'action de création, et publiez toute erreur que vous obtenez sur votre console du navigateur ou de la console du serveur Rails, nous pouvons vous aider à localiser votre erreur.

0
sghosh968