Dynamicke nacitani html do Dialog UI JQuery

saimons

Chci se zeptat jakym zpusobem by jste resili tento priklad:
Mam nake prodkuty na strance a chci jejich detail zobrazovat vyskakovacim oknem JQuery UI Dialog
Ted resim jakym zpusobem nacitat tyto data, napadli me dve moznosti:

udelat si nekde cast kodu, ktera by se mi po kliknuti na produkt pres snippet zaktualizovala a potom zobrazit dialog
nebo po kliknuti odeslat pozadavek a v presenteru si pripojit template a pomoci JSON poslat do dialogu html

Co si myslite ze je nejlepsi, popripade jina varianta? Nebo jestli ma nekdo nakej priklad?

Etch

třeba:

<script type="text/javascript">

	$(document).ready(function(){
		$('.produkt').live('click', function(){
			id = $(this).attr('id');
			opt = { autoOpen: false,
				modal: true,
				title: 'Detail',
				open: function(){ $("#dialog").load({plink detail, 'id' => id}); }
			};
			$("#dialog").dialog(opt).dialog('open');
			return false;
		});
	});

</script>

<div id="dialog"></div>

Pravděpodobně budeš muset v renderDetail() zavolat $this->setLayout(false).

Editoval Etch (8. 2. 2012 13:03)

Ot@s

Aplikace by měla být 100% funkční i bez JS. Tj. vykreslit dialog do stránky s určitým classem a ten pak v onload pomocí JQeury přeměnit na dialog.

saimons

jj to je presne ono a jak by jeste vypadal ten handle v presenteru? Jeste tam neco patri? Nevim jak je to presne s tim $this->payload->promena = ‚Neco‘;, nebo to co jsem napsal nize uz odesle to html do JS?

public function handleDetail($id)
{
    if ($this->isAjax()) {
        $this->template->setFile('path/to/ajax.latte');
	$this->template->produkt = ...nactiDB;
    }
}

Editoval saimons (8. 2. 2012 13:15)

Etch

Ot@s napsal(a):

Aplikace by měla být 100% funkční i bez JS.

No tak to spíše záleží na povaze aplikace. Navíc i to co jsem napsal já bude teoreticky „100%“ funkční i bez JS.

Šablona:

<a id="{$produkt['id']}" class="produkt" href="{plink detail, 'id' => $produkt['id']}">Produkt</a>

Presenter:

<?php

public function renderDetail($id){
	$this->template->produkt = $this->model->getProdukt($id)
	if($this->isAjax()){
		$this->setLayout(false);
	}
}

?>

Ot@s napsal(a):

Tj. vykreslit dialog do stránky s určitým classem a ten pak v onload pomocí JQeury přeměnit na dialog.

Tak to jsem vůbec nepochopil, jak tohle myslíš a jakou to má výhodu? Přece nebudu vypisovat, třeba do nějaké Homepage, X skrytých dialogů, abych je pak pomocí jQuery vyhazoval. Kde je ta výhoda? Když budou skryté, tak bez JS už je nikdy nezobrazím a defaultě zobrazené být nemohou, protože by zase rozsypaly celej Homepage. Takže by si stejně ten click musel poslat na nějaký Products:detail. Navíc by si musel vždy natahovat data pro všechny dialogy. To co jsem zde uvedl já ty data natahuje lazy až po kliknutí na daný produkt. Neříkám, že je to úplně ideální řešení, protože mě hned takhle z patra napadají situace, kdy by to mohlo působit třeba problémy s pozicováním daného dialogu, ale to také není neřešitelné.

Byl bych opravdu rád, kdyby si tu svojí myšlenku nějak rozvedl.

Editoval Etch (8. 2. 2012 13:57)

saimons

Etch napsal(a):

Diky za rady, uz mi to funguje jak jsem si predstavoval. Myslim, ze tvoje reseni je idealni, nic mi nebrani tomu pokud se nebude jednat o JS pozadavek, presmerovat na pozadovany vypis detailu bez dialogu.

$('a.detail').live('click', function(){
            url = $(this).attr('href');
            opt = { autoOpen: false,
                    modal: true,
                    title: 'Detail',
                    open: function(){ $("#dialog_detail").load(url); }
            };
            $("#dialog_detail").dialog(opt).dialog('open');
            return false;
    });

<a class="detail" href="{plink detail!, $p->detail_id}">{$p->name}</a>

 public function handleDetail($detail_id) {
     if ($this->isAjax()) {
         $this->template->setFile(APP_DIR . '/ProductModule/templates/Product/detail.latte');
         //$this->setLayout(false);
     } else {
	$this->redirect('nekam jinam');
 	}
}

Editoval saimons (8. 2. 2012 14:28)

Etch

Ještě jedna taková věc. Nevím, k čemu to přesně chceš, ale je opravdu výhodné používat signál? Nevím možná na to koukám nějak špatně, ale mě to přijde jako čistokrevné view. Nebylo by výhodnější, aby to do toho dialogu loadovalo speciální view než to řešit signálem?

Např:

V šabloně:

<a class="detail" href="{plink :Product:Product:detail, $p->detail_id}">{$p->name}</a>

V presenteru:

<?php

	public function actionDetail($id){
		if($this->isAjax()){
			$this->setView('detailAjax');
		}
	}

	public function renderDetail($id){
		$this->template->data = '...';
	}

	public function renderDetailAjax($id){
		if(!$this->isAjax()){
			throw new \Nette\Application\BadRequestException();
		}
		$this->template->data = '...';
	}

?>

a to co máš v souboru /ProductModule/templates/Product/detail.latte hodit do šablony detailAjax.latte.

To tvoje řešení signálem mi přijde nevýhodné hlavně v případě, když by to mělo být používané ve více presenterech, ale samozřejmě nevím, jak to budeš přesně používat.

saimons

S tim signalem jsem na to uz take prisel a zmenil to na action (jak rikas, chtel jsem to volat i odjinud). Ale tvuj priklad vypada jako uplne nejslepsi reseni. Predelam to, diky moc za rady a za nazornej priklad, myslim ze ho urcite oceni i dalsi.

Editoval saimons (8. 2. 2012 22:29)

akadlec

Vím že to je drobátko staré téma ale řeším něco podobného a zatím nevím jak na to.
V aplikaci mám klasika menu, jednotlivé položky a načítají své presentery a akce, to je ok, ale u některých položek potřebuju aby se otevřely do modal okna, ale tak aby bylo jedno na které stránce jsem.

Např. budu si prohlížet uložené články a narazím na nějaký dotaz, tak kliknu na link v menu poslat dotaz, to mi otevře modal okno kde vyplním nějaký form a ten se odešle.

Pokud bych to řešil čiste pomocí JS a Ajax tak no problém, prostě na ten klik navážu akci ať pomocí Ajaxu načte obsah a ten si pak dokáži vložit do stránky. Co ale řeším je aby to fungovalo i bez toho ajaxu. Prostě kliknu na link, a zpracuje se presenter co mam aktuální, tj budu stále vidět ty články, ale do toho se mi tam vloží modal okno. Přemýšlel sem to řešit nějak pomocí signálu jak tu bylo uvedeno, ale to bych všechny tyto signály (těch oken může být více) musel naházet do basepresenteru že? Nebo jsem na špatné cestě a jde to i jinak?