jquery 从刀片控制器传递参数以过滤选择字段

34gzjxbg  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(93)

我有3个选择字段,sitesareasdevices我需要根据在sitesareas中选择的内容过滤设备列表,因此列表将仅包括来自该站点和该区域的设备。
使其仅适用于areas,但在JS中尝试为sites传递另一个变量时出现错误500
路线:

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

字符串
控制器:

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


如何正确发送第二个需要的参数site_id到控制器,并同时通过area_idsite_id过滤设备?

vcirk6k6

vcirk6k61#

需要将参数添加到方法中。根据需要更新你的查询,同时对你在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
您需要将参数添加到url中,以便能够发送到方法。

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

z6psavjg

z6psavjg2#

路线

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

字符串
控制器中的代码

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
        //checking empty because possibly receive 0 or ''
        //via jquery/javascript 
        ->when(!empty($site_id), function($query){
          return $query->where('site_id', $site_id);
        })
        ->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)
    //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('');
        }
    });
  });
});

相关问题