avinash avinash - 2 months ago 16
Ajax Question

Laravel whereIn issue with Ajax multiselect checkbox

I have a multi-select checkbox which I am using to identify checked boxes and passing those values to Laravel Controller using AJAX Get.

When I pass Ajax data to the controller the json returning only one collection.To be specific it is only returning for the first value from the passed string. So if I select 1,2,4,8 in checkbox. It is returning projects of category_id = 1 . If I select 2,9,10 it is returning only projects of category_id = 2. To check if the Input is correct i passed the input to view and also to console.log which always say the input is correct.

I can retrieve all projects but when I use whereIn and pass the data it only gets the collection of the first value in the passed array.

I have tried making it into array and pass:
1) passing ajax data to an array then convert to a string using implode and passed it in array to whereIn
2) passing directly the array to whereIn

I have also attached several queries i tried with fail.

Any suggestion would be of Immense help.

ProjectsController

public function getPaginate(Request $request) {

$input = array(Input::get('categories'));
//$input2 = array($input);
//$value = implode(',', $input);
$sql = [1,2];

$projects = \App\Project::whereIn('category_id' , $sql)->get(); //working
//$projects = DB::table('projects')->whereIn('category_id', array($value))->get();
//$projects = DB::select("select * from categories INNER JOIN projects on categories.id = projects.category_id where category_id IN('$value')" );


//$projects = \App\Project::paginate(4);
$categories = \App\Category::all();


// $projects = DB::select('select * from categories INNER JOIN projects on categories.id = projects.category_id where category_id IN('.$products.')' );

// changed for AJAX
if(Request::ajax()) {


$projects = \App\Project::whereIn('category_id' ,$input)->get(); //not working
//$value = implode(',', $input);
//return Response::json(View::make('layouts.projects',array('projects'=>$input))->render());

return Response::json(array('projects' =>$projects,'input'=>$input));
}

return view('paginate', ['projects' =>$projects,'categories'=>$categories]);
}


Ajax & Jquery Selector

$(document).ready(function() {
$('input[type="checkbox"]').on('change', function(event) {
var checkboxValues = [];
$('input[type="checkbox"]:checked').each(function(index, elem) {
checkboxValues.push($(elem).val());

});
$('#myResponse').html(checkboxValues.join(','));
categories = checkboxValues.join(',');
getfilters();
});
});

var getfilters = function () {
$.ajax({
type: 'GET',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: '{{URL::route('get.paginate')}}',
data: {categories: categories},
error: function(e) {
console.log(e.responseText);
},

success: function (data) {
console.log(data);
$('#projects').html(data);

}});
};

Answer
  • Call .get() to turn the resulting jQuery object into a true array.
  • Use the built-in Array.toString method
  • it's better to use POST instead Of GET
  • change array(Input::get('categories')) to Input::get('categories')
var categories;
var getfilters = function () {
    $.ajax({
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: '',
        data: {categories: categories},
        error: function(e) {
            console.log(e.responseText);
        },
        success: function (data) {
            console.log(data);
            $('#projects').html(data);
        }});
};

$(':checkbox').on('change', function(event) {
    event.preventDefault();
    categories = $("input:checkbox:checked").map(function(){
        return $(this).val();
    }).get(); // <----
    $('#myResponse').html(categories.toString()); // <---- 'one,two,three;
    getfilters();
});