6
Sto usando pjax con laravel per caricare le pagine più velocemente per la prima volta, quindi non ho molta conoscenza a riguardo. Sto usando il pacchetto this. L'ho impostato e sembra che funzioni, solo per alcune pagine in cui ho alcuni javascript per il contenuto, ho alcuni problemi.Laravel pjax - setup
Questo è il mio file 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
}
},
]
}]
});
}
});
Ho link per il contenuto che sono al di sopra "pjax" container, in modo che non fanno parte della pjax ricarico, impostare in questo modo:
<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>
Maestro lama:
<!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>
io chiamo gli script come questo:
<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>
Uno dei miei problemi è che non sta dando la classe is-active e bulletpoint i collegamenti in cambio pagina, e aggiungendo campo di input basato sulla pagina, perché le pagine non vengono ricaricate in modo che non sta ottenendo nuovi valori per window.location.pathname . Quale sarebbe il modo migliore per impostare qualcosa di simile, in modo che lo spostamento da una scheda a un'altra e la modifica delle classi si comporti in modo fluido.
Questa parte è la configurazione che ho ora, nel mio file 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;
}
anche sulla mia pagina articles/create sto usando jFiler Carica più, che non viene caricato con pjax. E sul mio admin/statistic, sto caricando 3 tipi di grafici con dati dal server, e ne restituisce due, ma non l'ultimo.