Modal okno s inputem a odeslání zadaných dat AJAXem

Pouzij JQuery UI dilaog + jquery.nette.js + jquery.ajaxform.js

Ukazka sablony presenteru:

<script>
// aktivace odkazu na zobrazeni dialogu
jQuery(function($) {
	$('a.ajaxdialog').live('click', function(event) {
		event.preventDefault();
		$.post($.nette.href = this.href, function(data) {
			// (mimo jine) injektovani formulare do HTML
			$.nette.success(data);
			// aktivace ajaxoveho submitu formulare
			activateAjaxForm();
			// zobrazeni formulare v dialogu
			$("#snippet--simpleForm").dialog();
		}, "json");
	});
});
// aktivace "ajaxoveho" formulare
function activateAjaxForm () {
	$("#snippet--simpleForm form :submit").click(function () {
		$(this).ajaxSubmit();
		$("#snippet--simpleForm").dialog( "destroy" ); // po submitnuti zavreme dialog
		return false;
	});
}
</script>

{snippet flashMsg}
<ul n:foreach="$flashes as $flash">
	<li>{$flash->message}</li>
</ul>
{/snippet}

<a n:href="getSimpleForm!" class="ajaxdialog">Otevri dialog</a>

{snippet simpleForm}
{if isset($showSimpleForm)}{control simpleForm}{/if}
{/snippet}

V presenteru pak:

public function handlegetSimpleForm() {
	$this->template->showSimpleForm = true;
	if ($this->presenter->isAjax()) {
		$this->invalidateControl('simpleForm');
	}
}

protected function createComponentSimpleForm() {
	$form = new Nette\Application\UI\Form;
	$form->addText('email', 'Email:')
		->addRule(Form::FILLED, 'Zadejte email');

	$form->addSubmit('register', 'Registrovat')
		->onClick[] = callback($this, 'simpleFormSubmitted');

	return $form;
}

public function simpleFormSubmitted($btn) {
	// ... zde se zpracuj vysledky z $btn->form->getValues()
	$this->flashMessage('Vysledek byl ulozen/zpracovan.');
	if ($this->presenter->isAjax()) {
		$this->invalidateControl('simpleForm');
		$this->invalidateControl('flashMsg');
	} else {
		$this->redirect('this');
	}
}

Editoval Ot@s (7. 11. 2011 15:07)

Tak jsem nakonec použil řešení od Ot@se a funguje velmi dobře. Měl bych ještě dotaz, jak a kam můžu nadefinovat parametry toho dialogu (např. width: 300, height: 200, modal: true, …) ?

Ot@s napsal(a):

lumen napsal(a):

… jak a kam můžu nadefinovat parametry toho dialogu (např. width: 300, height: 200, modal: true, …) ?

Viz. paramtery (tab Option) třeba při vyvolání dialogu:

$("#snippet--simpleForm").dialog({height: 300, width: 400, modal: true});
// + minHeight/maxHeight a minWidth/maxWidth

Tak jsem to vyzkoušel:

jQuery(function($) {
        $('a.ajaxdialog').live('click', function(event) {
                event.preventDefault();
                $.post($.nette.href = this.href, function(data) {
                        // (mimo jine) injektovani formulare do HTML
                        $.nette.success(data);
                        // aktivace ajaxoveho submitu formulare
                        activateAjaxForm();
                        // zobrazeni formulare v dialogu
                        $("#snippet--simpleForm").dialog({height: 300, width: 400, modal: true});
                }, "json");
        });
});

a Nette mi na tom řádku (.dialog(…)) vyhazuje výjimku:

Nette\Latte\ParseException

Unknown macro {height} in …/templates/@layout.latte:91

Pokud nevypisuješ do těla skriptu žádné proměnné {$var}, můžeš použít tohle

<script n:syntax="off">
    var obj = {var: 123}; // tohle neni makro
</script>

a neřešit ty mezery u složených závorek.

Něco takového jsem taky scháněl. Tohle řešení je funkční, ale při ajaxSubmit nefunguje javascriptova validace. Můžete mi poradit, co je třeba do kódu přihodit?

JJ, našel jsem, už to šlape :) Díky :)

Zdravím

Udělal jsem vše přesně jak psal Ot@s, ale když si nechám vykreslit formulář, tak je jakoby odeslaný (jsou vypsané chyby o nevyplnění polí) a když se formulář odešle, dojde k chybě při redirectu a odeslání flashMessage.

Nevíte kde by mohla být chyba?

PHP 5.3.6 | Server Apache/2.2.8 (Win32) PHP/5.3.6 | Nette Framework 2.1-dev