Dynamická modální okna s AJAXem

serten

Zdravím,

rád bych vás zkušenější požádal o radu, protože mě zatím nenapadlo vhodné řešení.
Při vývoji nového systému jsem se dostal do situace, kdy potřeboval dynamicky do modálních oken nahrávat obsah různých šablon podle stisknutého tlačítka.
Aktuálně jsem měl v plánu takové řešení, kdy jsem si chtěl vytvořit komponentu čistě pro vypsání několika úrovní modálních oken (používám stackable modals). Tady je výpis modálních oken:

<div n:for=" $i = 1; $i <= $levels; $i++" id="stack-{$i}" class="modal container fade" tabindex="-1">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h4 class="modal-title"></h4>
	</div>
	<div class="modal-body">
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-outline dark">{_"Close"}</button>
	</div>
</div>

Co ale dále potřebuji udělat, je do tohoto modálního okna do části modal-body vykreslit obsah šablony. Uživatel stiskne tlačítko, vyvolá se ajaxový požadavek, obsah stránky se natáhne do modálu a modál se zobrazí. Pro různá tlačítka různý obsah. Nejlépe ještě do části modal-title natáhnout nadpis.
Chtěl jsem to zkusit udělat pomocí snippetů, ale nenapadá mě bohužel řešení jak to udělat. Nasadil jsem i Nittro framework pro zajaxování celé aplikace, ale ještě jsem do toho nepronikl natolik, abych to nějak využil.
Díky za jakoukoliv radu a informaci.

Editoval serten (9. 6. 2016 23:03)

janys80

To mi připadá hrozně kostrbaté řešení.

Osobně bych to udělal tak, že budeš mít jen jeden div id=„modal“ a informaci o obsahu, který se ti do modalu má vygenerovat budeš nést v odkazech …

{foreach $levels as $l}
<a href="#" data-modal-content="http://example.com/{$l}">Obsah {$l}</a>
{/foreach}

Pak jen v JS inicializaci nastavíš akce na tlačítka …

<script>
$(document).ready(function(){
  $('a[data-modal-content']).on('click', function(e){
    $('#modal .modal-body').load($(this).data("modal-content"));
    e.preventDefault();
    return false;
  });
});
</script>

Toto mi připadá čistější řešení

Editoval janys80 (9. 6. 2016 23:33)