Laravel checkbox filter ajax

Question

I need to realize a checkbox filter for vacancies based on ajax. So I have some categories on page, and when user marks some checkboxes the result block shows only vacancies in selected categories. If there are no selected checkboxes page shows all vacancies in all categories.

Now I have my current variant, but it doesnt work with array of checkboxes values, and every time after loading results checkboxes states are resetting.

What I have now:

My html markup

    <div class="category">
        <input type="checkbox" name="category[]" id="cat1" value="1" style="display: none;">
        <label for="cat1" class='cat-check'>Category-1</label>
    </div>
    <div class="category">
        <input type="checkbox" name="category[]" id="cat2" value="2" style="display: none;">
        <label for="cat2" class='cat-check'>Category-2</label>
    </div>
    <div class="category">
        <input type="checkbox" name="category[]" id="cat3" value="3" style="display: none;">
        <label for="cat3" class='cat-check'>Category-3</label>
    </div>

This is my search.js

    $(document).ready(function () {

    $(':checkbox').click(function (e) {

        e.preventDefault();

        var cat = $(':checkbox:checked').val();

            $.post('/vacancies/searchcat', {cat: cat}, function(markup)
            {
                $('#search-results').html(markup);
            });            

        console.log(cat);

        });

});

Controller

    public function searchcat()
{

    $cat = \Input::get('cat');

    $cat = (int) $cat;

    $vacancies = \Vacancy::where('category_id', '=', $cat)->get();

    return \View::make('vacancies.empty')->with('vacancies', $vacancies); 

}

and route

Route::post('/vacancies/searchcat', 'SearchController@searchcat');

Mb you now some workable examples for my situation.

UPDATE 2 NEW .JS:

$(document).ready(function () {

var categories = [];

// Listen for 'change' event, so this triggers when the user clicks on the checkboxes labels
$('input[name="category[]"]').on('change', function (e) {

    e.preventDefault();
    categories = []; // reset 

    $('input[name="category[]"]:checked').each(function()
    {
        categories.push($(this).val());
    });

    $.post('/vacancies/searchcat', {categories: categories}, function(markup)
    {
        $('#search-results').html(markup);
        var count = $('#count').val(); // vacancies count, from hidden input   
        $(".page-title").html("(" + count + ")");            
    });            

});

});

tommy · Accepted Answer · 2015-05-24 01:17:32Z

3

First, give your checkboxes all the same name (array notation) and a value:

<div class="category">
    <input type="checkbox" name="cat[]" value="1" id="cat1" style="display: none">
    <label for="cat1" class='cat-check'>Category-1</label>
</div>
<div class="category">
    <input type="checkbox" name="cat[]" value="2" id="cat2" style="display: none;">
    <label for="cat2" class='cat-check'>Category-2</label>
</div>
<div class="category">
    <input type="checkbox" name="cat[]" value="3" id="cat3" style="display: none;">
    <label for="cat3" class='cat-check'>Category-3</label>
</div>

In search.js, loop over all checked checkboxes and collect the values in an array. This array will then be posted to the server:

$(document).ready(function () {

    var categories = [];

    // Listen for 'change' event, so this triggers when the user clicks on the checkboxes labels
    $('input[name="cat[]"]').on('change', function (e) {

        e.preventDefault();
        categories = []; // reset 

        $('input[name="cat[]"]:checked').each(function()
        {
            categories.push($(this).val());
        });

        $.post('/vacancies/searchcat', {categories: categories}, function(markup)
        {
            $('#search-results').html(markup);
        });            

    });

});

In your controller method, you can fetch the categories array and build a where in query:

public function searchcat()
{
    $categories = \Input::get('categories');

    $vacancies = \Vacancy::whereIn('category_id', $categories)->get();

    return \View::make('vacancies.empty')->with('vacancies', $vacancies); 
}

edited May 24, 2015 at 1:17

answered May 23, 2015 at 16:01

tommy

3,63520 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mistiqe Over a year ago

It works, but it shows only vacancies from 1 category, when I mark second checkbox it shows records only from 2nd category. Seems like page refreshes and it is loosing values from previous checkbox. How is it possible to implement the multiple selection ?

Mistiqe Over a year ago

UPDATE: Just added the submit button, and everything works fine with it, but I need to do this filter without submit button.

tommy Over a year ago

Ok, I edited my answer to fulfill your requirements. I changed the click event on $('input[name="cat[]"]') to a change event. I just realized your checkboxes are hidden in your example, so now the event triggers even if you click the checkboxes labels.

Mistiqe Over a year ago

Everything works fine, but I cant understand why ajax is sending always 2 posts requests instead of 1 ?

tommy Over a year ago

Could you please edit your question and provide some more code (the JS part)?

|

Collectives™ on Stack Overflow

Laravel checkbox filter ajax

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related