6
Tôi đang sử dụng pjax với laravel để tải trang nhanh hơn lần đầu tiên, vì vậy tôi không có nhiều kiến thức về nó. Tôi đang sử dụng gói this. Tôi đã thiết lập nó và nó có vẻ là làm việc, chỉ cho một số trang mà tôi có một số javascript cho nội dung, tôi có một số vấn đề.Laravel pjax - thiết lập
Đây là main.js tập tin của tôi:
$(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
}
},
]
}]
});
}
});
Tôi có liên kết cho nội dung mà là trên "pjax" container, vì vậy họ không phải là một phần của pjax nạp lại, thiết lập như thế này:
<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>
Thanh chính:
<!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>
Tôi gọi các tập lệnh như sau:
<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>
Một trong những vấn đề của tôi là nó không được đưa ra các lớp is-active và bulletpoint để liên kết về biến đổi trang, và phụ thêm lĩnh vực đầu vào dựa trên trang, vì các trang không được nạp lại nên nó không nhận được giá trị mới cho window.location.pathname . Điều gì sẽ là cách tốt nhất để thiết lập một cái gì đó như thế này, để di chuyển từ một đến một tab khác và thay đổi các lớp học hoạt động trơn tru.
Phần này là thiết lập tôi có bây giờ, trong tập tin main.js tôi:
//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;
}
Cũng trên trang của mình articles/create Tôi đang sử dụng jFiler nhiều tải lên, mà không tải với pjax. Và trên admin/statistic, tôi đang tải 3 loại biểu đồ có dữ liệu từ máy chủ và hiển thị hai biểu đồ, nhưng không phải là biểu đồ cuối cùng.