Načítání obsahu webových stránek bez nutnosti obnovení stránky prostřednictvím AJAXového volání je dnes běžnou praxí.
Zavést toto funkčnost web postaveném na Nette frameworku, je velice jednoduché a rychlé. Ukážeme si jak na to s ajaxovou knihovnou s názvem Naja. Pokud děláte úplně nový projekt, doporučuji Nette 3.0, zapomeňte na nette.ajax.js ale rovnou použijte Naju. Nette,ajax.js je již „hotový“ a dál se nevyvijí. Naja je jeho nástupce.
Instalace a zprovoznění Naja knihovny
npm install naja –save-dev
Pro sloučení všech js souborů a jejich minifikaci používám Gulp. V Gulp tasku přidáme Naja.js do našeho jednoho velkého minifikovaného main.min.js souboru:
var uglify = require('gulp-uglify-es').default;
//…..
gulp.task('jsMain', done => {
gulp
.src(['node_modules/jquery/dist/jquery.min.js',
'node_modules/popper.js/dist/umd/popper.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/tether/dist/js/tether.min.js',
'node_modules/naja/dist/Naja.js',
'venor/nette/forms/src/assets/netteForms.min.js',
'src/js/main.js'], {allowEmpty: true})
.pipe(uglify({
mangle: false,//disable rename variables and functions
}))
.pipe(concat('main.min.js'))
.pipe(gulp.dest('www/js'));
done();
});
TIP: je potřeba použít knihovnu gulp-uglify-es ( gulp-uglify nestačí)
npm gulp-uglify-es --save-dev
Pak jen jednoduše tento 1 minifikovaný JS vložíme do šablony:
<script src="{$basePath}/js/main.min.js"></script>
Do souboru /src/js/main.js (který se také přidává do main.min.js přidáme tento kód pro inicializaci Naji):
document.addEventListener(
'DOMContentLoaded',
() => {
naja.initialize();
}
);
A máme hotovo. Nyní jen přidáme class=“ajax“ prvků, které chceme mít ajaxově, stejně jako u Nette.ajax.js
Demo signálu
Po kliknutí na tlačítko aktualizujeme ajaxem snippet, ve kterém se překreslí aktuální datum. Jednoduché 🙂
Presenter:
<?php
declare(strict_types=1);
namespace App\FrontModule\Presenters;
use App;
use Nette\Utils\DateTime;
class HomepagePresenter extends BasePresenter
{
private $dateTime;
public function handleActualiseDateTime()
{
$this->dateTime = new DateTime();
if ($this->isAjax()) {
$this->redrawControl('dateTimeSnippet');
}
}
public function renderDefault(): void
{
if ($this->dateTime === null) {
$this->dateTime = new DateTime();
}
$this->template->dateTime = $this->dateTime;
}
}
Šablona:
<div class="col-12">
<hr/>
{snippet dateTimeSnippet}
{$dateTime|date:'j. n. Y H:i:s'}
{/snippet}
<a n:href="actualiseDateTime!" class="ajax">AKTUALIZOVAT</a>
</div>