6
Używam pjax z laravel do szybszego ładowania stron po raz pierwszy, więc nie mam za dużo wiedzy na ten temat. Używam pakietu this. Zrobiłem to i wydaje się, że działa, tylko na niektórych stronach, gdzie mam trochę javascript dla treści, mam pewne problemy.Python Laravel - zestaw
To jest mój plik 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
}
},
]
}]
});
}
});
mam linki do treści, które są powyżej "pjax" container, więc nie są one częścią pjax przeładunku, skonfigurować tak:
<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>
master:
<!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>
Wołam skrypty jak to:
<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>
Jednym z moich problemów jest to, że nie daje klasę is-active i bulletpoint do linków na zmianę strony i dołączanie pola wprowadzania na podstawie strony, ponieważ strony nie są przeładowane więc nie jest uzyskiwanie nowych wartości dla window.location.pathname . Jaki byłby najlepszy sposób skonfigurowania czegoś takiego, aby przechodzenie od jednej do drugiej karty i zmiana klasy zachowywało się gładko.
Ta część jest konfiguracja mam teraz, w moim pliku 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;
}
także na moim articles/create stronie używam jFiler wielokrotnego upload, że nie jest ładowanie z pjax. I na moim admin/statistic, ładuję 3 rodzaje wykresów z danymi z serwera, i renderuje dwa z nich, ale nie ostatni.