Detailed explanation of pjax use cases in laravel framework
This time I will bring you a detailed explanation of the use cases of pjax in the laravel framework. What are the precautions for using pjax in the laravel framework. The following is a practical case, let's take a look.
Regarding what pjax is, readers are asked to Baidu.
Preparation:
1. Download the jquery.pjax.js file and click download
2. Download NProgress
3. Put the required files into the project. and referenced in the layout file. (Under the framework public directory)
Start:
Here I am using the adminLTE backend template. For specific usage, please refer to Using AdminLTE in Laravel5.*
Installing pjaxcomposer Package (laravel middleware):
$ composer require spatie/laravel-pjax
Add code to the kernel.php file:
// app/Http/Kernel.php ... protected $middleware = [ ... \Spatie\Pjax\Middleware\FilterIfPjax::class, ];
Configure pjax to complete page interaction: (ps: The author uses pjax to load pages throughout the site, Therefore, pjax is configured in the global js file, and readers can configure it separately as needed)
$.pjax.defaults.timeout = 5000;
$.pjax.defaults.maxCacheLength = 0;
//配置可点击的<a>标签使用pjax
$(document).pjax('a:not(a[target="_blank"])', {
container: '#pjax-container'//配置pjax刷新容器
});
NProgress.configure({parent: '#pjax-container'});
//超时执行函数
$(document).on('pjax:timeout', function (event) {
event.preventDefault();
});At this point, laravel combined with pjax has been completed.
Attachment:
The author’s layout (layout.blade.php):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="{{ asset('AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css')}}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('AdminLTE/bower_components/font-awesome/css/font-awesome.min.css') }}">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('AdminLTE/bower_components/Ionicons/css/ionicons.min.css') }}">
<!-- select2 -->
<link rel="stylesheet" href="{{ asset('AdminLTE/bower_components/select2/dist/css/select2.min.css') }}">
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('js_expand/dataTables.buttons/buttons.dataTables.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('AdminLTE/dist/css/AdminLTE.min.css') }}">
<!-- AdminLTE Skins -->
<link rel="stylesheet" href="{{ asset('AdminLTE/dist/css/skins/skin-blue.min.css') }}">
<!-- nprogress -->
<link rel="stylesheet" href="{{ asset('js_expand/nprogress/nprogress.css') }}">
<!-- toastr -->
<link rel="stylesheet" href="{{ asset('js_expand/toastr/build/toastr.min.css') }}">
<!-- sweetalert -->
<link rel="stylesheet" href="{{ asset('js_expand/sweetalert/dist/sweetalert.css') }}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="{{ asset('AdminLTE/bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- jQuery 2 -->
<script src="{{ asset('js_expand/jQuery/jQuery-2.1.4.min.js') }}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<!-- Select2 -->
<script src="{{ asset('AdminLTE/bower_components/select2/dist/js/select2.full.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('AdminLTE/dist/js/adminlte.min.js') }}"></script>
<!-- dataTables -->
<script src="{{ asset('AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('js_expand/dataTables.lan.js') }}"></script>
<script src="{{ asset('js_expand/dataTables.buttons/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<p class="wrapper">
<!-- Main Header -->
@include('admin::partials.header')
<!-- Left side column. contains the logo and sidebar -->
@include('admin::partials.sidebar')
<!-- Content Wrapper. Contains page content -->
<p class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid" id="pjax-container">
@yield('content')
</section>
<!-- /.content -->
</p>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
@include('admin::partials.control')
<!-- /.control-sidebar -->
<!-- Main Footer -->
@include('admin::partials.footer')
</p>
<!-- ./wrapper -->
<script>
var csrf_token = '{{ csrf_token() }}';
</script>
<!-- nprogress -->
<script src="{{ asset('js_expand/nprogress/nprogress.js') }}"></script>
<!-- pjax -->
<script src="{{ asset('js_expand/jquery-pjax/jquery.pjax.js') }}"></script>
<!-- toastr -->
<script src="{{ asset('js_expand/toastr/build/toastr.min.js') }}"></script>
<!-- sweetalert -->
<script src="{{ asset('js_expand/sweetalert/dist/sweetalert.min.js') }}"></script>
<!-- admin.base -->
<script src="{{ asset('js_expand/laravel-admin/admin.base.js') }}"></script>
<!-- custom script-->
<script>
var selectedMenu = "{!! $requestUri !!}";
</script>
</body>
</html>Global js file (admin-base.js):
toastr.options = {
closeButton: true,
progressBar: true,
showMethod: 'slideDown',
positionClass: 'toast-top-right',
timeOut: 4000
};
$.pjax.defaults.timeout = 5000;
$.pjax.defaults.maxCacheLength = 0;
$(document).pjax('a:not(a[target="_blank"])', {
container: '#pjax-container'
});
NProgress.configure({parent: '#pjax-container'});
$(document).on('pjax:timeout', function (event) {
event.preventDefault();
});
$(document).on('submit', 'form[pjax-container]', function (event) {
$.pjax.submit(event, '#pjax-container')
});
$(document).on("pjax:popstate", function () {
$(document).one("pjax:end", function (event) {
$(event.target).find("script[data-exec-on-popstate]").each(function () {
$.globalEval(this.text || this.textContent || this.innerHTML || '');
});
});
});
$(document).on('pjax:send', function (xhr) {
if (xhr.relatedTarget && xhr.relatedTarget.tagName && xhr.relatedTarget.tagName.toLowerCase() === 'form') {
$submit_btn = $('form[pjax-container] :submit');
if ($submit_btn) {
$submit_btn.button('loading')
}
}
NProgress.start();
});
$(document).on('pjax:complete', function (xhr) {
if (xhr.relatedTarget && xhr.relatedTarget.tagName && xhr.relatedTarget.tagName.toLowerCase() === 'form') {
$submit_btn = $('form[pjax-container] :submit');
if ($submit_btn) {
$submit_btn.button('reset')
}
}
NProgress.done();
});
$(function () {
$('.sidebar-menu li:not(.treeview) > a').on('click', function () {
var $parent = $(this).parent().addClass('active');
$parent.siblings('.treeview.active').find('> a').trigger('click');
$parent.siblings().removeClass('active').find('li').removeClass('active');
});
$('[data-toggle="popover"]').popover();
//整页刷新时，菜单显示
var selector = $('.sidebar-menu').find('a[href="/'+ selectedMenu +'"]');
selector.parent().addClass('active');
selector.parents('ul.treeview-menu').css('display', 'block');
selector.parents('li.treeview').addClass('menu-open');
//datatables删除按钮
$('#pjax-container').on('click', '.row-delete', function () {
var del_url = $(this).data('url');
swal({
title: "确定删除此项？",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确 定",
closeOnConfirm: false,
cancelButtonText: "取 消"
}, function(){
$.ajax({
method: 'post',
url: del_url,
data: {
_method:'delete',
_token:csrf_token,
},
success: function (data) {
if (typeof data === 'object') {
if (data.status) {
swal(data.message, '', 'success');
$.pjax.reload('#pjax-container');
} else {
swal(data.message, '', 'error');
}
}
}
});
});
});
});I believe I have read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the steps for combining React with TypeScript and Mobx
Detailed explanation of the steps for using React-router v4
The above is the detailed content of Detailed explanation of pjax use cases in laravel framework. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to get the return code when email sending fails in Laravel?
Apr 01, 2025 pm 02:45 PM
Method for obtaining the return code when Laravel email sending fails. When using Laravel to develop applications, you often encounter situations where you need to send verification codes. And in reality...
Laravel schedule task is not executed: What should I do if the task is not running after schedule: run command?
Mar 31, 2025 pm 11:24 PM
Laravel schedule task run unresponsive troubleshooting When using Laravel's schedule task scheduling, many developers will encounter this problem: schedule:run...
In Laravel, how to deal with the situation where verification codes are failed to be sent by email?
Mar 31, 2025 pm 11:48 PM
The method of handling Laravel's email failure to send verification code is to use Laravel...
How to implement the custom table function of clicking to add data in dcat admin?
Apr 01, 2025 am 07:09 AM
How to implement the table function of custom click to add data in dcatadmin (laravel-admin) When using dcat...
Laravel Redis connection sharing: Why does the select method affect other connections?
Apr 01, 2025 am 07:45 AM
The impact of sharing of Redis connections in Laravel framework and select methods When using Laravel framework and Redis, developers may encounter a problem: through configuration...
Laravel multi-tenant extension stancl/tenancy: How to customize the host address of a tenant database connection?
Apr 01, 2025 am 09:09 AM
Custom tenant database connection in Laravel multi-tenant extension package stancl/tenancy When building multi-tenant applications using Laravel multi-tenant extension package stancl/tenancy,...
Laravel Eloquent ORM in Bangla partial model search)
Apr 08, 2025 pm 02:06 PM
LaravelEloquent Model Retrieval: Easily obtaining database data EloquentORM provides a concise and easy-to-understand way to operate the database. This article will introduce various Eloquent model search techniques in detail to help you obtain data from the database efficiently. 1. Get all records. Use the all() method to get all records in the database table: useApp\Models\Post;$posts=Post::all(); This will return a collection. You can access data using foreach loop or other collection methods: foreach($postsas$post){echo$post->
Laravel database migration encounters duplicate class definition: How to resolve duplicate generation of migration files and class name conflicts?
Apr 01, 2025 pm 12:21 PM
A problem of duplicate class definition during Laravel database migration occurs. When using the Laravel framework for database migration, developers may encounter "classes have been used...
