Comment puis-je changer mon formulaire de filtre normal en utilisant un submit, pour utiliser AJAX?

Question

J'ai une table des lieux. La page d'index des lieux par défaut répertorie tous les enregistrements de lieu et vous permet de les filtrer par zone et ou type en utilisant un formulaire sur la même page avec un bouton de soumission et un rechargement de page.

Tous les lieux trouvés sont alors affichés et le formulaire se réinitialise.

Comment puis-je faire en sorte que la liste des lieux se mette à jour sans recharger la page en cliquant simplement sur les différentes options de filtrage? Il n'y a donc pas de bouton Soumettre et le formulaire conserve son état modifié.

Le contrôleur des lieux

def index 
    if 
     @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas]).order("average_rating DESC").all 
    else 
     @venues = Venue.all 
    end 
    @venues = @venues.paginate :per_page => 15, :page => params[:page] 
    end 

Les lieux index.html.erbCe utilise déjà jQuery-UI pour obtenir une meilleure recherche des cases à cocher

<div class="filter_options_container"> 
    <%= form_tag '', :method => :get, :id => 'filter_form' do %> 

    <fieldset class="filter_form_fieldset venuetypes"> 
     <% Venuetype.all.each do |v| %> 
     <p class="venuetype_check"><%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %> 
     <label for="venuetype-<%= v.id %>"><%= v.name %></label></p> 
     <% end %> 
    </fieldset> 

    <fieldset class="filter_form_fieldset areas"> 
     <% Area.all.each do |a| %> 
     <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %> 
     <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p> 
     <% end %> 
    </fieldset> 

    <div class="filter_form_button"> 
     <p2><input type="submit" value="Filter"/></p2> 
    </div> 
    <% end %> 
</div> 

<div class="venue_partials_container"> 
    <%= render :partial => 'venue', :collection => @venues %> 
    <div class="clearall"></div> 

    <div class="paginate_container"> 
    <div class="paginate"> 
     <%= will_paginate @venues %> 
    </div> 
    </div> 
</div> 

Merci beaucoup pour toute aide est très appréciée!

Answer 1

Vous voudrez probablement utiliser jquery pour cela.

Le plus simple sera d'utiliser jquery pour envoyer automatiquement le formulaire quand on clique sur un filtre, il y a toujours un rechargement de page mais le visiteur n'a pas besoin de cliquer sur le bouton soumettre.

Le code sera quelque chose comme:

$(".checkbox-which-send-form-when-clicked").change(function(e){ 
    $(this).parents("form:first").submit(); 
}); 

S'il vous plaît lire la documentation sur jquery website

Une autre solution qui ne fera pas la page rechargées chaque fois une case à cocher est cliqué est d'utiliser la requête Ajax pour envoyer le former et obtenir le résultat. Un bon tutoriel peut être trouvé here

Answer 2

Donc, je ne connais pas du tout Ruby, mais je connais l'architecture que vous devez implémenter avec jQuery. Vous devez d'abord configurer un point de terminaison qui retournera JSON au client. Lorsqu'un utilisateur crée, modifie ou soumet tout simplement le formulaire de filtre, vous postez ou obtenez le point de terminaison JSON. C'est votre option, vous pouvez le récupérer lorsque chaque champ est modifié par l'utilisateur ou juste lorsque le bouton Soumettre est cliqué, c'est entièrement à vous de décider à quel point vous voulez le faire.

Vous utiliseriez les fonctions jQuery $ .ajax pour récupérer le JSON. Je recommande le $ .post ou $ .get pour récupérer les données mises à jour. jQuery AJAX Shorthand functions

Vous pouvez également configurer un gestionnaire d'événements de clic pour votre bouton d'envoi de formulaire. Cela peut ressembler à ceci, il est important d'utiliser e.preventDefault car cela empêche la publication de toute la page.

$ ("formulaire: soumettre") cliquez sur (function (e) {

e.preventDefault();

$..getJSON ([votre URL AJAX], [données du filtre], fonction (résultat) { // mise à jour du tableau à l'aide des modèles });

});

Dans le rappel $ getJSON, je recommande d'utiliser les modèles jQuery ou d'autres fonctionnalités de fusion de modèles comme les micro-modèles de Resig.

J'ai écrit toute une série de billets sur ce genre de choses dans ASP.NET. Cela devrait se traduire plutôt bien pour Ruby, il suffit de remplacer le contenu ASP.NET par votre côté serveur Ruby et vous devriez être sur votre chemin.

My Thin ASP.NET Series