lundi 8 août 2016

Filtering with ajax and checkboxes in Rails

Im trying to filter results of a search based on what boxes the user checks in a list of different cuisines in a dropdown menu. Ive watched the rails cast #240 on search,sort and paginate but in there he deals with links and not sure how to change that to handle a bunch of checkboxes (will add other categories also but for now just trying to get this working). I have my current controller which looks like this:

def index
    @recipes = RecipeSearch.new(query: params[:search], options: params).search 
end

This is searching using searchkick and here is the code for that:

def search
        constraints = {
            aggs: [:cuisines, :techniques, :ingredients],
            operator: "or"
        }

        constraints[:where] = where
        constraints[:order] = order
        puts query
        puts constraints
        Recipe.search query, constraints
end

The where and order lines is where I will handle the different parameters that would be sent and have some codes to add it in (this all works fine). What Im having trouble figuring out is how to set up my form with checkboxes and the jquery/ajax code to read what is checked and update the results.

<%= form_tag(recipes_path, :method => "get", id: "filter-form") do %>
    <div class="row align-center">
        <div class="medium-5 large-2 columns">
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                    <a>Sort By Cuisine:</a>
                    <ul class="menu vertical">
                        <fieldset>
                        <% if @recipes.aggs['cuisines']['buckets'].present? %>
                            <% @recipes.aggs['cuisines']['buckets'].reduce('') do |r, h| %>
                                <li><input id="<%= h['key'] %>" type="checkbox"><label for="<%= h['key'] %>"><%= h['key'] %></label></li>
                            <% end %>
                        <% end %>
                        </fieldset>
                    </ul>
                </li>
            </ul>
        </div>
<% end %>

This is where Im stuck and not sure what to do next. Any help would be appreciate (or if there is a plugin/gem that would make my life easier I would be open to that)

I did try isotope which is what I wanted but doesnt work with Foundation flex-grid so couldnt use it




Aucun commentaire:

Enregistrer un commentaire