javascript - 动态模式不适用于 Laravel Yajra 数据表操作按钮
问题描述
我想将我的创建和编辑页面动态加载到 Modal body。它适用于创建项目，但不适用于编辑页面e。我使用了 Yajra 数据表服务器端渲染，并从那里生成操作按钮。无法弄清楚实际问题发生在哪里。
它甚至不会在单击编辑按钮时发送任何编辑操作请求。
这是我的主模板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">×</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')
这是scripts.blade.php
<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>
控制器 中的索引
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 = " <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);
}
这是我的index.view.php
@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
这是我的edit.blade.php
<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>
它不会进行任何更改，也不会在网络调试器或控制台中创建任何请求。
解决方案
推荐阅读
- python - 熊猫中 for 循环的矢量化
- c++ - 在c ++中逐行拆分段落
- javascript - how to run a function when context changes in react
- c++ - How do you use the MySQL Connector/C++ and XDevAPI while using XAMPP to run MySQL?
- swift - Passing Index of a selected row to another ViewController
- c# - Azure 媒体服务作业长时间处于处理状态
- c - 为子类添加额外的“方法”
- android - Blank screen after Expo publish
- python - Python Pandas Dataframe Datetime Range
- vue.js - Vue.js v-bind 类宽度条件