Cette fois, nous allons implémenter une fonction de suppression asynchrone utilisant rails et js. Veuillez noter que jQuery n'est pas utilisé pour apprendre js. De plus, puisque je suis un débutant en programmation, veuillez signaler toute erreur!
Ajax est également appelé communication asynchrone et consiste à apporter des modifications uniquement aux parties modifiées de l'écran sans modifier l'écran. En conséquence, le temps de chargement est raccourci car le rendu inutile n'est pas effectué et les utilisateurs peuvent utiliser le service confortablement. À propos, la communication synchrone redessine tout l'écran, donc même si la partie modifiée est une partie, l'écran entier sera rendu. Cela peut être un peu stressant pour l'utilisateur.
La communication synchrone passe à l'action du contrôleur spécifié lorsque la suppression est terminée et recherche le fichier nom de l'action.html.erb. La communication asynchrone, en revanche, est la même jusqu'à ce que l'action du contrôleur spécifié soit exécutée, après quoi il recherche le fichier action name.js.erb. Soyez conscient du déroulement de ces processus et essayez de mettre en œuvre après cela.
<li><%= link_to 'Supprimer', category_path(category.id), method: :delete, remote: true, class:'category-destroy' %></li>
Ajouter remote: true à la description de link_to. Avec cela seul, vous pouvez envoyer une demande du format HTML au format JS.
En ajoutant remote: true, nous rechercherons le fichier js. De plus, en utilisant js.erb, vous pouvez incorporer la syntaxe ruby dans la description js. Ce fichier est traité comme un fichier de vue, veuillez donc le stocker dans le dossier de vues correspondant. Vous transmettez les informations que vous souhaitez supprimer avec querySelector ("# category- <% = @ category.id%>"). La cible spécifiée est supprimée avec .remove (). Avec ces descriptions, vous pouvez effacer certains éléments de la vue. En passant, même si vous n'écrivez pas js, il est supprimé de la base de données, mais il ne disparaîtra pas de l'écran à moins que vous ne le rechargiez, vous devez donc écrire js.
app/views/categories/destroy.js.erb
(function(){
document.querySelector("#category-<%= @category.id %>").remove()
})();
Ceci termine la fonction de suppression par communication asynchrone! La communication asynchrone utilisant des rails est très facile à mettre en œuvre, donc même les débutants devraient absolument l'essayer! J'espère que cet article aidera les débutants. Veuillez signaler toute erreur!
Recommended Posts