J'ai une page avec une liste d'articles, provenant d'un backend de rails. Je souhaite pouvoir modifier une ligne dans cette liste, à l'aide d'appels Ajax via Rails UJS. P>
J'ai ajouté un bouton d'édition jusqu'à la fin de chaque ligne. Le bouton d'édition est un
edit.html.haml strong> p> link_to ...: distant => vrai code>. En cliquant sur elle charge de nouveau la liste, mais avec la sélection
ligne en mode édition. La ligne modifitable est intégrée à un formulaire ...: distant => vrai code>.
Le bouton Enregistrer dans cette ligne est un bouton Soumettre code>. P> $("#editor").on("ajax:success", function(event, data, status, xhr) {
$("#editor").html($(data).find("#editor").html());
});
5 Réponses :
La façon dont j'ai obtenu cela pour travailler est d'utiliser la fonctionnalité intégrée des rails pour cela:
répond_to bloquer la ligne format.js . Cela vous permet de créer un fichier edit.js.erb que vous pouvez utiliser pour charger le formulaire d'édition dans votre DOM.
- Ensuite, dans votre action de mise à jour du même contrôleur, ajoutez à nouveau
format.js dans le bloc répond_to bloquer et avoir une update.js.erb fichier qui fait la manipulation DOM nécessaire via JQuery.
Je suis sûr que cela est expliqué plus loin dans des tutoriels en ligne, mais où j'ai enfin compris comment cela fonctionnait sans avoir à appeler JQuery Ajax Methodes était sur codeschool.com .
Quelle est exactement l'erreur que vous obtenez? Savez-vous à quelle distance cette approche a eu jusqu'à ce qu'elle a cessé de fonctionner?
Donc, il suffit d'aller de l'avant et de lien vers le domaine racine de codeschool comme c'est totalement utile ... hein no.
Probablement pas pour vous. Mais l'intention était pour ce lien pour fournir le point de départ pour qu'ils se soient inscrits et trouver le cours qu'ils voudraient prendre. Si je suis lié à un cours particulier, il devrai vous inscrire quand même. Mais merci pour votre commentaire utile là-bas.
Pas de problème, à tout moment. :)
Problème est que DOM a été modifié par JavaScript et rappel (sur le succès Ajax dans votre exemple) n'a été initialisé que sur DOM INIT. Ainsi, lorsque DOM a changé (dans la partie de #editor), les rappels n'ont pas fonctionné.
Donc, vous devez réinitialiser ce rappel à tout moment que vous modifiez le DOM avec JavaScript P>
$("#editor").on("ajax:success", function(event, data, status, xhr) {
$("#editor").html($(data).find("#editor").html());
});
J'ai trouvé le problème! Merci aux astuces dans les réponses de @jake Smith et @parandroid. Voici ce que j'ai trouvé en deux étapes.
Tout en obtenant le mais n'a pas abouti à un bouton de soumission de travail. Jusqu'à ce que j'ai découvert ce que j'ai mal tourné ... La solution ci-dessus a donné le bouton Soumettre un ancien _edit.html.haml (travail!) qui aurait deviné ... AJAX: le succès à tirer ne semble pas être le problème, cela ressemblait au formulaire. La manipulation n'a pas fonctionné à 100% correctement juste sur le $ ("# éditeur") sélecteur. À tout le moins qui devait être $ («# éditeur») , mais cela pourrait ne pas fonctionner si nous commençons à partir de la page d'index, qui ne contient pas encore le formulaire. Donc, l'approche suggérée par @jake Smith semblait être la meilleure façon la plus robuste d'aller après tout. Cela a abouti à: Recherche 2
POST comportement, que le serveur n'a pas Comme, comme il s'attendait à un Mettez pour atteindre l'action mise à jour . Les rails en générant un champ caché _method avec la valeur mettre . J'ai découvert que les rails génèrent ce champ (et un couple d'autres champs cachés cruciaux) _edit.html.haml partiel et
Votre problème est due à des règles HTML de ne pas permettre la mise en place d'une forme à l'intérieur d'une table. C'est pourquoi vous avez dû déplacer votre form_for en dehors de cela. Voir ce lien Stackoverflow.com/Questtions/5967564/Form-inside-A-Table
J'aimerais ajouter que j'avais le même problème avec une plaine ordinaire de (vous savez que tout ce que ces trucs avec HAML et des formes simples sont assez marqués pour ceux qui ne l'utilisent pas). Mon formulaire a été enveloppé dans certaines divs, alors après avoir retiré ces emballages, il a commencé par magie de travailler! Merci beaucoup!
J'ai eu un problème similaire à celui-ci, dans lequel une forme chargée de Via Ajax n'a pas été soumise, cela était dû à Turbolinks et j'ai trouvé que la solution était de lier mon événement au corps et non à l'élément, aux réponses pertinentes se trouvent dans ce fil:
Comment utiliser $ (document) .on ("Cliquez sur. . sur
Pour moi, le problème était de cliquer sur une étiquette, alors je devais changer
à
$ ('label'). Cliquez sur (Fonction ...
$ («corps»). On (click ',' étiquette ', fonction
J'ai eu le même problème et j'ai enfin compris la raison. Votre source HTML doit être formée de la manière suivante.
<tr>
<form>
<td><input type="text"></td>
<td><input type="submit"></td>
</form>
</tr>
Notez que votre HTML ici est entièrement invalide. Le formulaire ne peut pas être un descendant direct d'un tr .
Avez-vous des erreurs dans votre fenêtre Dev Outils? Si c'est vrai, que sont-ils? En outre, si vous avez pas déjà, je télécharger RailsPanel < / a> Si vous utilisez Chrome. Il fournit de très bons commentaires sur vos demandes de rails que vous faites.
En regardant votre section intitulée AJAX Réponse Manutention , je pense que vous voudrez peut-être essayer d'utiliser la délégation d'événements comme s'ils illustrent au bas de cette page . Bien entendu, cela signifie que vous auriez besoin d'utiliser un attribut de classe au lieu d'un attribut d'identification pour identifier votre formulaire d'édition, je crois.