Egoblog.cz - Petr Kobelka

Nette Grido Ajax a Modal dialog

Krátkýk ale zajímavý post o použití NETTE datagridu GRIDO v modal dialogu.


PHP | Komentáře (0) | Shlédnuto 1950 × | Vloženo: 26. května 2015

Vyvstala přede mnou výzva. Měl jsem použít GRIDO v modal dialogu a navíc, aby v něm šly vykonávat potřebné operace třídění a filtrování.

Nastavení aplikace

Vše běží v uzákladním Nette 2.2, Boostrap 3.4. Proces tvorby modal dialogu vypadá asi takto:

  • Mám základní šablonu dialogu
  • při kliknutí vytvořím AJAX požadavek na presenter, aby mi vrátil obsah pro modal dialog
  • tento požadavek zpracuje handle EVENT a sice tak, že obsah je tvořen do vlastní šablona latte
  • obsah vložím do výchozí šablony modal okna a to pomocí javascriptu zobrazím uživateli

Základní rozhraní: Nette + Bootstrap

Hodně mi věci zjednodušuje využívání Bootstrapu při tvorbě aplikací v Nette, protože za mě vyřeší obvyklé problémy. Např. modal dialog. Vůbec neřeším jeho podobu a strukturu. Nebo to, jak ho správně zavolat v různých internetových prohlížečích. Vše za mě vyřešil již Bootstrap a já jen, dle potřeby, do základního schématu, které vypadá např. takto

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

doplním AJAXem obsah, titulek a potřebné eventy.

Grido v modal dialogu

Základní problém Grida je v tom, že jeho nativní javascriptové knihovny, a tedy ajaxové volání upravuje requesty tak, aby výsledkem byla unikátní URL adresa. např. /priklad/grido/?doSort&filter[nazev]=ahoj.

Tedy vážný problém, protože by jste pak ko každém requestu museli nějak znovu inicializovat okno dialogu. To je ale dost blbé, protože je to nejen hodně práce navíc, ale pořád na to budete muset pamatovat. Dalším argumentem proti je, že taková operace zabere nějaký čas a nechat uživatele v situaci, kdy po každém kliknutí mu okno zmizí a znovu se objeví je nesmyslná situace.

Řešení

Řešení, které jsem našel spočívá v tom, že nepoužívám javascriptové knihovny Grido - použiju pouze nette-ajax.js a v šabloně. tedy pouze základní AJAX metody. Pokud chci grid vykreslit zavolám ještě

$('.grido').netteAjax();

Tedy reinicializuji AJAXové vazby v datagridu. Tím se mi nemění request a vše šlape přesně jak má.

Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

Oups, žádné komentáře? Buďtě první !!!

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.