Laravel复选框过滤器ajax [英] Laravel checkbox filter ajax

问题描述

我需要实现一个基于ajax的空缺复选框过滤器.因此，我在页面上有一些类别，并且当用户标记了某些复选框时，结果框仅显示所选类别中的空缺.如果没有选中复选框，则页面将显示所有类别中的所有空缺.

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.

我现在所拥有的:

我的html标记

    <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>

这是我的search.js

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);

        });

});

控制器

    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); 

}

和路线

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

现在请您为我的情况提供一些可行的例子.

Mb you now some workable examples for my situation.

更新2个新的.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 + ")");            
    });            

});

});

推荐答案

首先，为您的复选框提供相同的名称(数组符号)和一个值:

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>

在search.js中，遍历所有选中的复选框，并将值收集在数组中.然后，此数组将发布到服务器:

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);
        });            

    });

});

在控制器方法中，您可以获取类别数组并构建where in查询:

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); 
}

这篇关于Laravel复选框过滤器ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！