jQuery à travers les modèles dans Ruby on Rails

Question

J'ai cette application plutôt simple Ruby on Rails: deux modèles Lists et Items. Lists ont beaucoup Items et Items appartiennent à Lists. D'ACCORD.

La méthode show de ListsController imprime une page avec la liste des éléments appartenant à la liste donnée (dans un lists/_listOfItems.html.erb partiel). À la fin de la vue show.html.erb, un formulaire permet aux utilisateurs d'ajouter un élément à la liste. En standard (sans jQuery) RoR, cela fonctionne parfaitement.

Maintenant, ce que je veux faire est de laisser l'utilisateur ajouter un élément à la liste sans recharger la page. J'ai réussi avec jQuery à ajouter l'élément à la base de données mais maintenant mon problème est d'actualiser la liste html sans recharger la page. Je suis parvenu à un create.js.erb exécuté dans ItemsController et je peux faire des choses apparaissent sur la page avec elle, mais le problème est que cette create.js.erb vit à ItemsController et non pas dans ListsController de sorte que si j'essaie de faire create.js.erb rendre la _listOfItems.html.erb partielle, il sera Échec car create.js.erb vit dans ItemsController et ne peut donc pas accéder aux variables définies dans la méthode show de ListsController.

Je suppose que cela fonctionnerait comme un charme si j'utilisais la méthode index de ItemsController pour afficher la liste des éléments puisque tout serait là, mais cela pourrait engendrer d'autres complications.

J'espère que c'était clair. Pouvez-vous m'aider? Merci beaucoup!

Answer 1

Si je comprends bien, je pense que la solution réside dans javascript + une action dans votre contrôleur:

votre point de vue du spectacle devrait avoir un appel ajax comme suit, cela devrait être déclenché par un clic/changement/... fonction jquery, par exemple:. $ ("sélecteur") changement (function() {ici l'appel ajax est placé})

$.ajax({ 
    type: 'get', 
    url: "/ajax/somepageofyourown", 
    async: false, 
    data: { add here any variables your controller method would need }, 
    success: function(r) { 
     $(' the selector that needs to be replaced ').html(r); 
    } 
    }); 

ajouter l'URL que ce ajax appelle à vos itinéraires, de sorte que votre contrôleur répond

ajouter votre action de contrôleur, il devrait déclencher cela rend le html que vous voulez remplacer le html précédent avec.