Question 211999 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Passing params from blade controller to filter a select field

I have 3 selection fields, sites, areas, devices
I need to filter the devices list according to what was selected in sites and areas
so the list will include only devices from that site and that area only.

Made it work only with areas but getting error 500 when trying to pass another variable for sites in JS

Route:

Route::get('devices/workarea/{work_area_id?}/{site_id?}','DevicesController@getDevicesByArea')->name('devices.byArea');

Controller:

public function getDevicesByArea($work_area_code = NULL) {
    $devices = array();
    
    if($work_area_code != NULL){
        $workArea = WorkArea::find($work_area_code);
       
        if($workArea) {
            
            $devices = Device::selectRaw('id, CONCAT(device_alias) as work_device')
            ->where('belongs_to_work_area_id',$work_area_code)
            ->get()
            ->pluck('work_device', 'id');
        }
    }
    return json_encode($devices);
}

JQuery:

$(document).ready(function () {
    $("#area_id").on('change', function(){
        var area_id = this.value;
        var site_id = $('#site_id').val();

        console.log(area_id)
        console.log(site_id)
        
        var deviceUrl = "{{ route('admin.devices.byArea') }}/" + area_id;

        $.ajax({
            url: deviceUrl,
            success: function(result){
                var html = '<option value="">Please select</option>';
                result = jQuery.parseJSON(result);
                console.log(result);
                for(var key in result) {
                    html += '<option value="'+key+'">'+result[key]+'</option>';
                }
                $("#device_id").html(html);
                $('#device_id').val('');
            }
        });
    });
});

How to correctly send the second needed parameter site_id to controller and filter the devices at the same time by both area_id and site_id?

Tags:

2

Answers


  1. 0

    You need to add the parameter to the method. Update your query as needed, and also sanitize the input value from both values you are getting in the url.

    public function getDevicesByArea($work_area_code = NULL, $site_id = NULL) {
    $devices = array();

    if($site_id == NULL){
         // default site_id when none is present
         $site_id = 1;
    }
    
    if($work_area_code != NULL){
        $workArea = WorkArea::find($work_area_code);
       
        if($workArea) {
            
            $devices = Device::selectRaw('id, CONCAT(device_alias) as work_device')
            ->where('belongs_to_work_area_id',$work_area_code)
            ->where('site_id','=',$site_id)    // <<<<<< change to your needs
            ->get()
            ->pluck('work_device', 'id');
        }
    }
    return json_encode($devices);
}

    jQuery
    You need to add the parameter to the url, to be able to be send to the method.

    $(document).ready(function () {
    $("#area_id").on('change', function(){
        var area_id = this.value;
        var site_id = $('#site_id').val();

        console.log(area_id)
        console.log(site_id)
        // added site_id 
        var deviceUrl = "{{ route('admin.devices.byArea') }}/" + area_id +"/"+site_id;

        $.ajax({
            url: deviceUrl,
            success: function(result){
                var html = '<option value="">Please select</option>';
                result = jQuery.parseJSON(result);
                console.log(result);
                for(var key in result) {
                    html += '<option value="'+key+'">'+result[key]+'</option>';
                }
                $("#device_id").html(html);
                $('#device_id').val('');
            }
        });
    });
});
    Login or Signup to reply.
  2. 0

    Route

    Route::get('devices/workarea/{work_area_id?}/{site_id?}','DevicesController@getDevicesByArea')->name('devices.byArea');

    Code in Controller

    public function getDevicesByArea($work_area_id = null, $site_id = null) {
  $devices = [];

  if(!empty($work_area_id)){
    $workArea = WorkArea::find($work_area_id);
   
    if($workArea) {
        
        $devices = Device::selectRaw('id, CONCAT(device_alias) as work_device')
        ->where('belongs_to_work_area_id',$work_area_id)
        //below code run only when site is not empty
        ->when(!empty($site_id), function($query){
          return $query->where('site_id', $site_id);
        })
        ->get()
        ->pluck('work_device', 'id');
    }
  }
  return json_encode($devices);
 }

    jQuery Code

    $(document).ready(function () {
  $("#area_id").on('change', function(){
    var area_id = this.value;
    var site_id = $('#site_id').val();

    console.log(area_id)
    console.log(site_id)
    //added site_id 
    var deviceUrl = "{{ route('admin.devices.byArea') }}/" + area_id + "/" + site_id;

    $.ajax({
        url: deviceUrl,
        success: function(result){
            var html = '<option value="">Please select</option>';
            result = jQuery.parseJSON(result);
            console.log(result);
            for(var key in result) {
                html += '<option value="'+key+'">'+result[key]+'</option>';
            }
            $("#device_id").html(html);
            $('#device_id').val('');
        }
    });
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search