Laravel whereIn issue with Ajax multiselect checkbox

Question

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 1

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