Laravel 复选框过滤ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30414103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel checkbox filter ajax
提问by Mistiqe
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.
我需要实现一个基于ajax的空缺复选框过滤器。所以我在页面上有一些类别，当用户标记一些复选框时，结果块只显示选定类别中的空缺。如果没有选中的复选框页面会显示所有类别的所有职位空缺。
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
我的 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>
This is my search.js
这是我的 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.
Mb 你现在为我的情况提供了一些可行的例子。
UPDATE 2 NEW .JS:
更新 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 + ")");
});
});
});
});
回答by tommy
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:
在 search.js 中，遍历所有选中的复选框并收集数组中的值。然后这个数组将被发布到服务器：
$(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 inquery:
在您的控制器方法中，您可以获取类别数组并构建where in查询：
public function searchcat()
{
$categories = \Input::get('categories');
$vacancies = \Vacancy::whereIn('category_id', $categories)->get();
return \View::make('vacancies.empty')->with('vacancies', $vacancies);
}
