我第一次使用 pjax 和 laravel 来加快页面加载速度，所以我对此了解不多。我正在使用 this包裹。我已经设置好它并且它似乎可以正常工作，但仅对于某些页面，其中我有一些内容的 javascript，我有一些问题。
这是我的 main.js 文件:
$(document).ready(function() {
if ($.support.pjax) {
$.pjax.defaults.timeout = 5000;
}
$(document).pjax('.link', "#pjax");
//add class active to tab based on url
var loc = window.location.pathname;
switch (window.location.pathname) {
case '/admin/statistics':
$('#statistics').addClass('is-active bulletpoint');
break;
case '/admin/articles':
$('#articles').addClass('is-active bulletpoint');
$('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
break;
case '/admin/users':
$('#users').addClass('is-active bulletpoint');
$('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
break;
case '/admin/articles/create':
$('#create').addClass('is-active bulletpoint');
break;
}
var table = $('#table').DataTable({
"paging": false,
"ordering": false,
"info": false,
"dom": 'lrtip',
"language": {
"zeroRecords": "Ingen treff funnet"
}
});
$('#search-table').keyup(function(){
table.search($(this).val()).draw();
});
//add input field for external media, and remove if empty
$(document.body).on("input", ".external-media-input:last", function () {
var inputID = (parseInt($(this).attr('id')) + 1);
$(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
}).on('blur', ".external-media-input:not(:last)", function () {
if(!$(this).val()) $(this).remove();
});
//autocomplete for challenge question
$("#challenge_question").autocomplete({
source: "http://myApp.app/admin/challenges/autocomplete",
minLength: 2,
select: function( event, ui ) {
$('#challenge_question').val(ui.item.id);
}
});
//slider
var orbit = new Foundation.Orbit($('#slider'));
//donut charts
for(var key in myApp.categoryViewsPercentage) {
$('[id="' + key + '"]').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: '#2A2E34'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '<style="font-size:14px; color:#FFFFFF">'+ myApp.categoryViewsPercentage[key] + '%</style>' +'<br><style="font-size:8px; color:#FFFFFF"">'+ key +'</style>',
align: 'center',
verticalAlign: 'middle',
y: 0
},
plotOptions: {
pie: {
borderWidth: 0,
dataLabels: {
enabled: false
},
size: 95,
startAngle: 0,
endAngle: 360,
}
},
series: [{
type: 'pie',
innerSize: '70%',
data: [
[key , myApp.categoryViewsPercentage[key]],
{
y: 100 - myApp.categoryViewsPercentage[key],
dataLabels: {
enabled: false
}
},
]
}]
});
}
});
我有“pjax”容器上方内容的链接，因此它们不是pjax重新加载的一部分，设置如下:
<ul class="tabs" data-tabs>
<li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}" class="link">Nytt inlegg</a></li>
<li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}" class="link">Mine innlegg</a></li>
<li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}" class="link">Statistikk</a></li>
<li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}" class="link">Brukere</a></li>
</ul>
主 Blade :
<!DOCTYPE html>
<html lang="en">
<head>
@section('head')
@include('layouts.partials.head')
@show
</head>
<body id="app-layout">
@section('topBar')
@include('layouts.partials.top-bar')
@show
<div class="expanded row">
<div class="large-12 columns">
<div class="large-3 columns">
@mirror()
</div>
<div class="large-9 columns">
<div>
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="row expanded columns header">
@section('headerLinks')
@include('layouts.partials.headerLinks')
@show
</div>
<div class="content" id="pjax">
@yield('content')
</div>
</div>
</div>
</div>
@include('layouts.partials.foot')
</body>
</html>
我这样调用脚本:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datepicker/datepicker.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
<script src="{{ asset('js/charts.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
我的一个问题是它没有为页面更改的链接提供 is-active 和 bulletpoint 类，也没有根据页面附加输入字段，因为页面没有重新加载，因此它没有为 window.location.pathname 获取新值。设置这样的东西的最佳方式是什么，以便从一个选项卡移动到另一个选项卡并更改类表现得顺畅。
这部分是我现在的设置，在我的 main.js 文件中:
//add class active to tab based on url
var loc = window.location.pathname;
switch (window.location.pathname) {
case '/admin/statistics':
$('#statistics').addClass('is-active bulletpoint');
break;
case '/admin/articles':
$('#articles').addClass('is-active bulletpoint');
$('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
break;
case '/admin/users':
$('#users').addClass('is-active bulletpoint');
$('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
break;
case '/admin/articles/create':
$('#create').addClass('is-active bulletpoint');
break;
}
同样在我的 articles/create 页面上，我正在使用 jFiler多次上传，即不使用 pjax 加载。在我的 admin/statistic 上，我正在加载 3 种类型的图表和来自服务器的数据，它会呈现其中两个，但不会呈现最后一个。
最佳答案
pjax 代表 pushState + AJAX，意味着它使用 History Web API .
这反过来意味着使用 jQuery 你可以像这样监听 pjax 触发的 popstate 事件:
$(window).on('popstate', function(ev){
console.log('popstate!', ev);
});
然后相应地更新 css 类。
关于javascript - Laravel pjax - 设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37437683/