Fatal编程技术网
  • javascript/
  • Javascript 动态模式不适用于Laravel Yajra datatable操作按钮

Javascript 动态模式不适用于Laravel Yajra datatable操作按钮

javascript php ajax laravel

Javascript 动态模式不适用于Laravel Yajra datatable操作按钮,javascript,php,ajax,laravel,datatable,Javascript,Php,Ajax,Laravel,Datatable,我想将我的创建和编辑页面动态加载到模态体。它适用于创建项，但不适用于编辑页面e。我使用了Yajra datatable服务器端呈现，并从中生成了操作按钮。不知道实际问题发生在哪里 单击编辑按钮，它甚至不会发送任何编辑操作请求 以下是我的主模板中的模式代码master.blade.php @yield('content') <!-- Container-fluid Ends--> <!-- Dynamic Modal -->

我想将我的创建和编辑页面动态加载到模态体。它适用于创建项，但不适用于编辑页面e。我使用了Yajra datatable服务器端呈现，并从中生成了操作按钮。不知道实际问题发生在哪里

单击编辑按钮，它甚至不会发送任何编辑操作请求

以下是我的主模板中的模式代码master.blade.php

@yield('content')
          <!-- Container-fluid Ends-->
          <!-- Dynamic Modal -->
          <div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="loader-container">
                    <img class="loader text-center py-15" width="60" src="{{asset('assets/images/loader.gif')}}"/>
                </div>
                <div class="modal-content">
                  <!-- Modal Header -->
                <div class="modal-header bg-success text-white">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body"></div>
              </div>
            </div>
          </div>
        <!-- footer start-->
        @include('layouts.simple.footer')   
      </div>
    </div>
    <!-- latest jquery-->
    @include('layouts.simple.script') 
    @yield('script') 

<script src="{{asset('assets/js/jquery-3.5.1.min.js')}}"></script>
<!-- Bootstrap js-->
<script src="{{asset('assets/js/bootstrap/popper.min.js')}}"></script>
<script src="{{asset('assets/js/bootstrap/bootstrap.js')}}"></script>
<!-- feather icon js-->
<script src="{{asset('assets/js/icons/feather-icon/feather.min.js')}}"></script>
<script src="{{asset('assets/js/icons/feather-icon/feather-icon.js')}}"></script>
<!-- Sidebar jquery-->
<script src="{{asset('assets/js/config.js')}}"></script>
<!-- Plugins JS start-->

<script src="{{asset('assets/js/sidebar-menu.js')}}"></script>
<script src="{{asset('assets/js/select2/select2.full.min.js')}}"></script>
<script src="{{asset('assets/js/select2/select2-custom.js')}}"></script>
<script src="{{asset('assets/js/tooltip-init.js')}}"></script>
<script src="{{asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>

<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="{{asset('assets/js/script.js')}}"></script>
<script src="{{asset('assets/js/theme-customizer/customizer.js')}}"></script>


<script>
    $(document).ready(function() {
        $('.single-select-2').select2();
    });
</script>
<!-- Modal Scripts -->
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name="_token"]').attr('content')
        }
    });
    
    $('.load-ajax-modal').click(function(){
        var title = $(this).attr('data-id');
        var url_data = $(this).attr('data-path');
        $.ajax({
            type : 'GET',
            url : url_data,
            beforeSend: function(){
                $(".loader-container").show();
                $(".modal-content").hide();
            },
            complete: function(){
                $(".loader-container").hide();
                $(".modal-content").show();
            },
            success: function(result) {
                console.log(result);
                $('#dynamic-modal div.modal-body').html(result);
                $('#dynamic-modal div.modal-header .modal-title').html(title);
            }
        });
    });
</script>

<!-- Toastify -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script>
    $("#single").select2({
        placeholder: "Select a programming language",
        allowClear: true
    });
    $("#multiple").select2({
        placeholder: "Select a programming language",
        allowClear: true
    });
</script>

@extends('layouts.simple.master')
@section('title', 'Support Ticket')

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/vendors/datatables.css')}}">
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
<h3>{{ trans('cruds.service.title') }}</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Apps</li>
<li class="breadcrumb-item active">{{ trans('cruds.service.title_singular') }}</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header b-l-primary border-3">
                    <div class="row">
                        <div class="col-lg-10">
                            <h5>{{ trans('cruds.service.list') }}</h5>
                            <span>{{ trans('cruds.service.list-title') }}</span>
                        </div>
                        <div class="col-lg-2">
                            <button data-path="{{route('services.create')}}" class="btn btn-sm btn-success load-ajax-modal" data-id="Create New Service" data-toggle='modal' data-target='#dynamic-modal' > Create </button>
                        </div>
                    </div>
                    </div>
                <div class="card-body">
                    <div class="table-responsive">
                      <table class="display datatables" id="server-side-datatable">
                        <thead>
                          <tr>
                            <th>{{ trans('global.serial') }}</th>
                            <th>{{ trans('cruds.service.fields.title') }}</th>
                            <th>{{ trans('cruds.service.fields.description') }}</th>
                            <th>{{ trans('cruds.service.fields.category_id') }}</th>
                            <th>{{ trans('cruds.service.fields.regular_price') }}</th>
                            <th>{{ trans('cruds.service.fields.promotional_price') }}</th>
                            <th>{{ trans('cruds.service.fields.allowed_connection') }}</th>
                            <th>{{ trans('cruds.service.fields.visibility') }}</th>
                            <th>{{ trans('global.action') }}</th>
                          </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                          <tr>
                            <th>{{ trans('global.serial') }}</th>
                            <th>{{ trans('cruds.service.fields.title') }}</th>
                            <th>{{ trans('cruds.service.fields.description') }}</th>
                            <th>{{ trans('cruds.service.fields.category_id') }}</th>
                            <th>{{ trans('cruds.service.fields.regular_price') }}</th>
                            <th>{{ trans('cruds.service.fields.promotional_price') }}</th>
                            <th>{{ trans('cruds.service.fields.allowed_connection') }}</th>
                            <th>{{ trans('cruds.service.fields.visibility') }}</th>
                            <th>{{ trans('global.action') }}</th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
  $(function () {
    var table = $('#server-side-datatable').DataTable({
      "processing": true,
      "serverSide": true,
      ajax: "{{ route('services.index') }}",
      columns: [
        {data: 'id'},
        {data: 'title'},
        {data: 'description'},
        {data: 'category_id'},
        {data: 'regular_price'},
        {data: 'promotional_price'},
        {data: 'allowed_connection'},
        {data: 'visibility'},
        {data: 'action', orderable: false, searchable: false},
      ]
    });
  });
</script>
@endsection

<form class="needs-validation" novalidate="" role = "form"  method="POST" action="{{ route('services.update', [$category->id]) }}" enctype="multipart/form-data">
    @method('PATCH')
    @csrf
    <div class="row">
        <div class="col-lg-6 py-1">
            <label class="form-label" for="parent_id">{{ trans('cruds.service_category.fields.parent_id') }}</label>
            <select id="single" name="parent_id" value={{$category->parent_id}} class="js-states form-control">
                <option value="">Select..</option>
                @foreach ($serviceCategories as $serviceCategory )
                    <option {{$serviceCategory->parent_id == $category->id ? 'selected' : ''}} value="{{$serviceCategory->id}}">{{$serviceCategory->title}}</option>
                @endforeach
              </select>
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-lg-6 py-1">
            <label class="form-label" for="title">{{ trans('cruds.service_category.fields.title') }}</label>
            <input class="form-control form-control-sm " name="title" id="title" type="text" value="{{$category->title}}" required="">
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-lg-12 py-1">
            <label class="form-label" for="description">{{ trans('cruds.service_category.fields.description') }}</label>
            <textarea class="form-control form-control-sm" name="description" id="description" value="{{$category->description}}" placeholder="" required="" spellcheck="false"></textarea>
            <div class="valid-feedback">Looks good!</div>
        </div>
    </div>

    <div class="float-right py-1">
        <button class="btn btn-sm btn-primary" type="submit">{{ trans('global.submit') }}</button>
        <button class="btn btn-sm btn-danger" data-dismiss="modal">{{ trans('global.cancel') }}</button>
    </div>
</form>

@yield（'content'））
&时代；
@包括（'layouts.simple.footer'）
@包括（'layouts.simple.script'）
@屈服（'脚本'）
下面是scripts.blade.php

@yield('content')
          <!-- Container-fluid Ends-->
          <!-- Dynamic Modal -->
          <div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="loader-container">
                    <img class="loader text-center py-15" width="60" src="{{asset('assets/images/loader.gif')}}"/>
                </div>
                <div class="modal-content">
                  <!-- Modal Header -->
                <div class="modal-header bg-success text-white">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body"></div>
              </div>
            </div>
          </div>
        <!-- footer start-->
        @include('layouts.simple.footer')   
      </div>
    </div>
    <!-- latest jquery-->
    @include('layouts.simple.script') 
    @yield('script') 

<script src="{{asset('assets/js/jquery-3.5.1.min.js')}}"></script>
<!-- Bootstrap js-->
<script src="{{asset('assets/js/bootstrap/popper.min.js')}}"></script>
<script src="{{asset('assets/js/bootstrap/bootstrap.js')}}"></script>
<!-- feather icon js-->
<script src="{{asset('assets/js/icons/feather-icon/feather.min.js')}}"></script>
<script src="{{asset('assets/js/icons/feather-icon/feather-icon.js')}}"></script>
<!-- Sidebar jquery-->
<script src="{{asset('assets/js/config.js')}}"></script>
<!-- Plugins JS start-->

<script src="{{asset('assets/js/sidebar-menu.js')}}"></script>
<script src="{{asset('assets/js/select2/select2.full.min.js')}}"></script>
<script src="{{asset('assets/js/select2/select2-custom.js')}}"></script>
<script src="{{asset('assets/js/tooltip-init.js')}}"></script>
<script src="{{asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>

<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="{{asset('assets/js/script.js')}}"></script>
<script src="{{asset('assets/js/theme-customizer/customizer.js')}}"></script>


<script>
    $(document).ready(function() {
        $('.single-select-2').select2();
    });
</script>
<!-- Modal Scripts -->
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name="_token"]').attr('content')
        }
    });
    
    $('.load-ajax-modal').click(function(){
        var title = $(this).attr('data-id');
        var url_data = $(this).attr('data-path');
        $.ajax({
            type : 'GET',
            url : url_data,
            beforeSend: function(){
                $(".loader-container").show();
                $(".modal-content").hide();
            },
            complete: function(){
                $(".loader-container").hide();
                $(".modal-content").show();
            },
            success: function(result) {
                console.log(result);
                $('#dynamic-modal div.modal-body').html(result);
                $('#dynamic-modal div.modal-header .modal-title').html(title);
            }
        });
    });
</script>

<!-- Toastify -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script>
    $("#single").select2({
        placeholder: "Select a programming language",
        allowClear: true
    });
    $("#multiple").select2({
        placeholder: "Select a programming language",
        allowClear: true
    });
</script>

@extends('layouts.simple.master')
@section('title', 'Support Ticket')

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/vendors/datatables.css')}}">
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
<h3>{{ trans('cruds.service.title') }}</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Apps</li>
<li class="breadcrumb-item active">{{ trans('cruds.service.title_singular') }}</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header b-l-primary border-3">
                    <div class="row">
                        <div class="col-lg-10">
                            <h5>{{ trans('cruds.service.list') }}</h5>
                            <span>{{ trans('cruds.service.list-title') }}</span>
                        </div>
                        <div class="col-lg-2">
                            <button data-path="{{route('services.create')}}" class="btn btn-sm btn-success load-ajax-modal" data-id="Create New Service" data-toggle='modal' data-target='#dynamic-modal' > Create </button>
                        </div>
                    </div>
                    </div>
                <div class="card-body">
                    <div class="table-responsive">
                      <table class="display datatables" id="server-side-datatable">
                        <thead>
                          <tr>
                            <th>{{ trans('global.serial') }}</th>
                            <th>{{ trans('cruds.service.fields.title') }}</th>
                            <th>{{ trans('cruds.service.fields.description') }}</th>
                            <th>{{ trans('cruds.service.fields.category_id') }}</th>
                            <th>{{ trans('cruds.service.fields.regular_price') }}</th>
                            <th>{{ trans('cruds.service.fields.promotional_price') }}</th>
                            <th>{{ trans('cruds.service.fields.allowed_connection') }}</th>
                            <th>{{ trans('cruds.service.fields.visibility') }}</th>
                            <th>{{ trans('global.action') }}</th>
                          </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                          <tr>
                            <th>{{ trans('global.serial') }}</th>
                            <th>{{ trans('cruds.service.fields.title') }}</th>
                            <th>{{ trans('cruds.service.fields.description') }}</th>
                            <th>{{ trans('cruds.service.fields.category_id') }}</th>
                            <th>{{ trans('cruds.service.fields.regular_price') }}</th>
                            <th>{{ trans('cruds.service.fields.promotional_price') }}</th>
                            <th>{{ trans('cruds.service.fields.allowed_connection') }}</th>
                            <th>{{ trans('cruds.service.fields.visibility') }}</th>
                            <th>{{ trans('global.action') }}</th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
  $(function () {
    var table = $('#server-side-datatable').DataTable({
      "processing": true,
      "serverSide": true,
      ajax: "{{ route('services.index') }}",
      columns: [
        {data: 'id'},
        {data: 'title'},
        {data: 'description'},
        {data: 'category_id'},
        {data: 'regular_price'},
        {data: 'promotional_price'},
        {data: 'allowed_connection'},
        {data: 'visibility'},
        {data: 'action', orderable: false, searchable: false},
      ]
    });
  });
</script>
@endsection

<form class="needs-validation" novalidate="" role = "form"  method="POST" action="{{ route('services.update', [$category->id]) }}" enctype="multipart/form-data">
    @method('PATCH')
    @csrf
    <div class="row">
        <div class="col-lg-6 py-1">
            <label class="form-label" for="parent_id">{{ trans('cruds.service_category.fields.parent_id') }}</label>
            <select id="single" name="parent_id" value={{$category->parent_id}} class="js-states form-control">
                <option value="">Select..</option>
                @foreach ($serviceCategories as $serviceCategory )
                    <option {{$serviceCategory->parent_id == $category->id ? 'selected' : ''}} value="{{$serviceCategory->id}}">{{$serviceCategory->title}}</option>
                @endforeach
              </select>
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-lg-6 py-1">
            <label class="form-label" for="title">{{ trans('cruds.service_category.fields.title') }}</label>
            <input class="form-control form-control-sm " name="title" id="title" type="text" value="{{$category->title}}" required="">
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-lg-12 py-1">
            <label class="form-label" for="description">{{ trans('cruds.service_category.fields.description') }}</label>
            <textarea class="form-control form-control-sm" name="description" id="description" value="{{$category->description}}" placeholder="" required="" spellcheck="false"></textarea>
            <div class="valid-feedback">Looks good!</div>
        </div>
    </div>

    <div class="float-right py-1">
        <button class="btn btn-sm btn-primary" type="submit">{{ trans('global.submit') }}</button>
        <button class="btn btn-sm btn-danger" data-dismiss="modal">{{ trans('global.cancel') }}</button>
    </div>
</form>


$（文档）.ready（函数（）{
$（'.single-select-2'）.select2（）；
});
$.ajaxSetup({
标题：{
'X-CSRF-Token'：$（'meta[name=“\u-Token”]”）。attr（'content'）
}
});
$（'.load ajax modal'）。单击（函数（）{
var title=$（this.attr（'data-id'）；
var url_data=$（this.attr（'data-path'）；
$.ajax({
键入：“GET”，
url:url_数据，
beforeSend:function（）{
$（“.loader容器”）.show（）；
$（“.modal content”）.hide（）；
},
完成：函数（）{
$（“.loader容器”）.hide（）；
$（“.modal content”）.show（）；
},
成功：功能（结果）{
控制台日志（结果）；
$（'#dynamic modal div.modal-body'）.html（结果）；
$（'#dynamic modal div.modal-header.modal title'）.html（title）；
}
});
});
$（“#单个”）。选择2({
占位符：“选择一种编程语言”，
allowClear:对
});
$（“#倍数”）。选择2({
占位符：“选择一种编程语言”，
allowClear:对
});
控制器中的索引

public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = ServiceCategory::get();
            return DataTables::of($data)
                    ->addIndexColumn()
                    ->addColumn('parent', function($data){
                        return  ($data->parent_id != '') ? $data->parent->title: "-";
                    })
                    ->addColumn('action', function($data){
                        $show =  route('service-categories.show',[$data->id]);
                        $edit =  route('service-categories.edit',[$data->id]);
                        $delete =  route('service-categories.destroy',[$data->id]);
                        $csrf =  csrf_token();
                        $btn =  "&emsp;<div class='btn-group ' role='group' aria-label='Basic example'>
                                    <button data-path='{$show}' role='button'  class='btn btn-xs btn-success load-ajax-modal' data-id='Details of This Service Category' data-toggle='modal' data-target='#dynamic-modal' ><i class='fa fa-eye'></i></button>
                                    <button data-path='{$edit}' role='button'  class='btn btn-xs btn-primary load-ajax-modal' data-id='Edit This Service Category' data-toggle='modal' data-target='#dynamic-modal'><i class='fa fa-pencil'></i></button>
                                    <form action='{$delete}' method='POST'>
                                        <input type='hidden' name='_method' value='DELETE'>
                                        <input type='hidden' name='_token' value='{$csrf}' />
                                        <button type='submit' class='btn btn-xs btn-danger'><i class='fa fa-trash'></i></button>
                                    </form>
                                </div>";
                        return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }

        return view('admin.service-category.index');
    }

public function edit(Request $request,$id)
    {
        $data['category'] = ServiceCategory::find($id)->first();
        $data['serviceCategories'] = ServiceCategory::get();
        return view('admin.service-category.edit', $data);
    }

公共功能索引（请求$Request）
{
如果（$request->ajax（））{
$data=ServiceCategory:：get（）；
返回数据表：：of（$data）
->addIndexColumn（）
->addColumn（'parent'，函数（$data）{
返回（$data->parent_id！=''）？$data->parent->title:“-”；
})
->addColumn（'action'，函数（$data）{
$show=route（'service-categories.show'，[$data->id]）；
$edit=route（'service-categories.edit'，[$data->id]）；
$delete=route（'service-categories.destroy'，[$data->id]）；
$csrf=csrf_令牌（）；
$btn=“&emsp；
";
返回$btn；
})
->rawColumns（['action']））
->使（真实）；
}
返回视图（'admin.service category.index'）；
}
公共功能编辑（请求$Request，$id）
{
$data['category']=ServiceCategory:：find（$id）->first（）；
$data['serviceCategories']=ServiceCategory:：get（）；
返回视图（'admin.service category.edit'，$data）；
}
这是我的index.view.php

@yield('content')
          <!-- Container-fluid Ends-->
          <!-- Dynamic Modal -->
          <div class="modal fade" id="dynamic-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="loader-container">
                    <img class="loader text-center py-15" width="60" src="{{asset('assets/images/loader.gif')}}"/>
                </div>
                <div class="modal-content">
                  <!-- Modal Header -->
                <div class="modal-header bg-success text-white">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body"></div>
              </div>
            </div>
          </div>
        <!-- footer start-->
        @include('layouts.simple.footer')   
      </div>
    </div>
    <!-- latest jquery-->
    @include('layouts.simple.script') 
    @yield('script') 

<script src="{{asset('assets/js/jquery-3.5.1.min.js')}}"></script>
<!-- Bootstrap js-->
<script src="{{asset('assets/js/bootstrap/popper.min.js')}}"></script>
<script src="{{asset('assets/js/bootstrap/bootstrap.js')}}"></script>
<!-- feather icon js-->
<script src="{{asset('assets/js/icons/feather-icon/feather.min.js')}}"></script>
<script src="{{asset('assets/js/icons/feather-icon/feather-icon.js')}}"></script>
<!-- Sidebar jquery-->
<script src="{{asset('assets/js/config.js')}}"></script>
<!-- Plugins JS start-->

<script src="{{asset('assets/js/sidebar-menu.js')}}"></script>
<script src="{{asset('assets/js/select2/select2.full.min.js')}}"></script>
<script src="{{asset('assets/js/select2/select2-custom.js')}}"></script>
<script src="{{asset('assets/js/tooltip-init.js')}}"></script>
<script src="{{asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>

<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="{{asset('assets/js/script.js')}}"></script>
<script src="{{asset('assets/js/theme-customizer/customizer.js')}}"></script>


<script>
    $(document).ready(function() {
        $('.single-select-2').select2();
    });
</script>
<!-- Modal Scripts -->
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name="_token"]').attr('content')
        }
    });
    
    $('.load-ajax-modal').click(function(){
        var title = $(this).attr('data-id');
        var url_data = $(this).attr('data-path');
        $.ajax({
            type : 'GET',
            url : url_data,
            beforeSend: function(){
                $(".loader-container").show();
                $(".modal-content").hide();
            },
            complete: function(){
                $(".loader-container").hide();
                $(".modal-content").show();
            },
            success: function(result) {
                console.log(result);
                $('#dynamic-modal div.modal-body').html(result);
                $('#dynamic-modal div.modal-header .modal-title').html(title);
            }
        });
    });
</script>

<!-- Toastify -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script>
    $("#single").select2({
        placeholder: "Select a programming language",
        allowClear: true
    });
    $("#multiple").select2({
        placeholder: "Select a programming language",
        allowClear: true
    });
</script>

@extends('layouts.simple.master')
@section('title', 'Support Ticket')

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/vendors/datatables.css')}}">
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
<h3>{{ trans('cruds.service.title') }}</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Apps</li>
<li class="breadcrumb-item active">{{ trans('cruds.service.title_singular') }}</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header b-l-primary border-3">
                    <div class="row">
                        <div class="col-lg-10">
                            <h5>{{ trans('cruds.service.list') }}</h5>
                            <span>{{ trans('cruds.service.list-title') }}</span>
                        </div>
                        <div class="col-lg-2">
                            <button data-path="{{route('services.create')}}" class="btn btn-sm btn-success load-ajax-modal" data-id="Create New Service" data-toggle='modal' data-target='#dynamic-modal' > Create </button>
                        </div>
                    </div>
                    </div>
                <div class="card-body">
                    <div class="table-responsive">
                      <table class="display datatables" id="server-side-datatable">
                        <thead>
                          <tr>
                            <th>{{ trans('global.serial') }}</th>
                            <th>{{ trans('cruds.service.fields.title') }}</th>
                            <th>{{ trans('cruds.service.fields.description') }}</th>
                            <th>{{ trans('cruds.service.fields.category_id') }}</th>
                            <th>{{ trans('cruds.service.fields.regular_price') }}</th>
                            <th>{{ trans('cruds.service.fields.promotional_price') }}</th>
                            <th>{{ trans('cruds.service.fields.allowed_connection') }}</th>
                            <th>{{ trans('cruds.service.fields.visibility') }}</th>
                            <th>{{ trans('global.action') }}</th>
                          </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                          <tr>
                            <th>{{ trans('global.serial') }}</th>
                            <th>{{ trans('cruds.service.fields.title') }}</th>
                            <th>{{ trans('cruds.service.fields.description') }}</th>
                            <th>{{ trans('cruds.service.fields.category_id') }}</th>
                            <th>{{ trans('cruds.service.fields.regular_price') }}</th>
                            <th>{{ trans('cruds.service.fields.promotional_price') }}</th>
                            <th>{{ trans('cruds.service.fields.allowed_connection') }}</th>
                            <th>{{ trans('cruds.service.fields.visibility') }}</th>
                            <th>{{ trans('global.action') }}</th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
  $(function () {
    var table = $('#server-side-datatable').DataTable({
      "processing": true,
      "serverSide": true,
      ajax: "{{ route('services.index') }}",
      columns: [
        {data: 'id'},
        {data: 'title'},
        {data: 'description'},
        {data: 'category_id'},
        {data: 'regular_price'},
        {data: 'promotional_price'},
        {data: 'allowed_connection'},
        {data: 'visibility'},
        {data: 'action', orderable: false, searchable: false},
      ]
    });
  });
</script>
@endsection

<form class="needs-validation" novalidate="" role = "form"  method="POST" action="{{ route('services.update', [$category->id]) }}" enctype="multipart/form-data">
    @method('PATCH')
    @csrf
    <div class="row">
        <div class="col-lg-6 py-1">
            <label class="form-label" for="parent_id">{{ trans('cruds.service_category.fields.parent_id') }}</label>
            <select id="single" name="parent_id" value={{$category->parent_id}} class="js-states form-control">
                <option value="">Select..</option>
                @foreach ($serviceCategories as $serviceCategory )
                    <option {{$serviceCategory->parent_id == $category->id ? 'selected' : ''}} value="{{$serviceCategory->id}}">{{$serviceCategory->title}}</option>
                @endforeach
              </select>
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-lg-6 py-1">
            <label class="form-label" for="title">{{ trans('cruds.service_category.fields.title') }}</label>
            <input class="form-control form-control-sm " name="title" id="title" type="text" value="{{$category->title}}" required="">
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="col-lg-12 py-1">
            <label class="form-label" for="description">{{ trans('cruds.service_category.fields.description') }}</label>
            <textarea class="form-control form-control-sm" name="description" id="description" value="{{$category->description}}" placeholder="" required="" spellcheck="false"></textarea>
            <div class="valid-feedback">Looks good!</div>
        </div>
    </div>

    <div class="float-right py-1">
        <button class="btn btn-sm btn-primary" type="submit">{{ trans('global.submit') }}</button>
        <button class="btn btn-sm btn-danger" data-dismiss="modal">{{ trans('global.cancel') }}</button>
    </div>
</form>

@extends（'layouts.simple.master'））
@章节（‘标题’、‘支持票证’）
@节（“css”）
@端部
@节（“样式”）
@端部
@章节（“面包屑标题”）
{{trans（'cruds.service.title'）}
@端部
@章节（“面包屑-项目”）
应用程序

  • {{trans（'cruds.service.title_singular'）}
    • 
@端部
@节（“内容”）
{{trans（'cruds.service.list'）}
{{trans（'cruds.service.list title'）}
创造
{{trans（'global.serial'）}
{{trans（'cruds.service.fields.title'）}
{{trans（'cruds.service.fields.description'）}
{{trans（'cruds.service.fields.category_id'）}
{{trans（'cruds.service.fields.regular_price'）}
{{trans（'cruds.service.fields.promotional_price'）}
{{trans（'cruds.service.fields.allowed_connection'）}
{{trans（'cruds.service.fields.visibility'）}
{{trans（'global.action'）}
{{trans（'global.serial'）}
{{trans（'cruds.service.fields.title'）}
{{trans（'cruds.service.fields.description'）}
{{trans（'cruds.service.fields.category_id'）}
{{trans（'cruds.service.fields.regular_price'）}
{{trans（'cr