Custom script 'shift_select' is not working-CodePudding

I would like to custom a field in the laravel field by using the JS code but when i tried .show(), .hide(), .val(), and .text('TEST') all not working please help me. Below i will include the code from the controller and the custom js query.

This is the code from the UserCrudController.php

$this->crud->addField([
        'name' => 'department',
        'label' => __('Departments'),
        'type' => 'select',
        'entity' => 'departmentObj',
        'attribute' => 'name',
        'model' => 'App\Models\Department',
        'wrapper' => [
            'class' => 'form-group col-md-6'
        ],
        'options'   => (function ($query) {
            return $query->where('name','!=', "HQ")->get();
        }),
        'default' => $defaultType
    ]);
    
    $this->crud->addField([
        'name' => 'shift_id',
        'label' => __('Shift'),
        'type' => 'shift_select',
        'entity' => 'shift',
        'attribute' => 'name',
        'model' => 'App\Models\Shift',
        'wrapper' => ['class' => 'form-group col-md-6'],
    ]);

Here is the script from the custom one "shift_select.blade.php

<script>
$("input[name=shift_id]").hide();
$("input[name=department]").on('change', function() {
    $("input[name=shift_id]").show();
    
}); </script>

I'm using onchange inside the crud as i need the select shift_id field to show if there is a value from the department. Please help me and thank you in advance.

CodePudding user response：

Wrap your JS code in $(document).ready(). See full code below.

<script>
    $(document).ready(function () {
            $("input[name=shift_id]").hide();
            $("input[name=department]").on('change', function () {
                $("input[name=shift_id]").show();

            });
        });

</script>

CodePudding user response：

<script>
$('select[name=department]').on('change', function() {
    
    var _departmentType = $('select[name=department]').val();
    // console.log(_departmentType);
    if(_departmentType == 12){
        $('#shift_Label').show(); 
        $('#shift_field').show(); 
        $("input[name=shift_id]").parent().show();
    }else{
        $('#shift_Label').hide(); 
        $('#shift_field').hide(); 
        $("input[name=shift_id]").parent().hide();
    }
}); </script>

This is how i did thank you