Štítek: naja

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>