Comment soumettre le formulaire et mise à jour de l'élément sur la page, sans actualisation, dans les Rails 4

Je vais avoir beaucoup de mal à essayer de faire quelque chose que j'imagine serait assez simple.

J'ai une liste d'éléments, disons, de todos. Au bas de la liste, j'ai un champ de texte où je ajouter de nouveaux éléments à cette liste. Je veux faire en sorte que les nouveaux éléments sont ajoutés au bas de la liste de manière dynamique, sans rafraichissement de la page, comme dans une fenêtre de chat.

J'ai fait de la soumettre le formulaire remote: true et il a réussi à se soumet sans recharger la page, mais je ne peux pas obtenir le nouvel élément à apparaître au bas de la liste en même temps. J'ai actualiser la page pour voir les changements.

J'ai tenté quelques approches différentes que j'ai trouvé sur (il n'y a pas de pénurie de questions similaires ici) et le web, et même un joyau appelé Synchronisation, mais chacun d'eux avait des erreurs et des problèmes qui leur sont propres et je ne pouvais pas obtenir tout fonctionne correctement. Chacun d'eux pourrait être sa propre DONC, la question. Au lieu donc je pose la question: Est-il une "recette" qui est sûr de réussir la mise en œuvre de ce dans les Rails 4?

OriginalL'auteur San Diago | 2014-03-27

  1. 7

    disons que, maintenant, vous avez un formulaire utilisateur de soumettre,

    <%=form_for @user,remote: true%><%end%>

    Et vous avez également un contrôleur, 

    UsersController

    Dans votre contrôleur, vous avez une fonction, 

    def create
  #something
end

    qui est pour la forme.

    la seule chose que vous avez besoin est de modifier la fonction comme

    def create
  #something
  respond_to do |format|
    format.js
    format.html
  end
end

    puis dans votre vue de côté, en vertu de répertoire de vue/utilisateurs/, créer un create.js fichier, dans le fichier, vous pouvez faire la js action, comme vous le nouvel album, et ajouter le nouvel enregistrement à la liste des utilisateurs.

    référence:

    http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for

    OriginalL'auteur Chuanpin Zhu

  2. 3

    Il y a plusieurs façons de faire ce que vous demandez. Mon approche serait:

    • Créer un AJAX appel au contrôleur qui passe les paramètres de la forme

    • À l'intérieur de la manette, vous enregistrer/mettre à jour des choses, et de renvoyer un JSON objet

    • Sur le success rappel de la AJAX fonction, vous ajoutez un élément de la liste/tableau ligne, en utilisant les valeurs de l'objet de

    Le code pourrait être quelque chose comme ceci:

    model.js

    $(function() {
  $("#submit_button").on("click", function(event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "your_controller_url",
      data: "your_form_data"
      success: function(result) {
        // Append the result to a table or list, $("list").append(result)
      },
    });
  });
});

    contrôleur.rb

    def your_action
  # Do your stuff
  # return JSON to the ajax call
end

    Bien, c'est juste un squelette. Je préfère faire les choses de cette façon. (Parce que je déteste le js.erb approche)

    OriginalL'auteur MurifoX

  3. 0

    Vous pouvez voir les changements à l'aide de javascript.
    Par exemple considérons un contrôleur de Mycontroller avec l'action index et que vous soumettez le formulaire sur l'index.
    Puis créer un fichier en vue de my_controller/index.js.erb

    Pour refléter les changements de l'utilisation de javascript dans ce modèle.
    Certainement à distance envoie l'appel ajax, donc pour voir les changements que vous avez besoin de la manipulation à l'aide de javascript.

    Grâce

    OriginalL'auteur Paritosh Singh