Formular v modalni okně a validace

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
MW
Člen | 626
+
0
-

Zdravim,

prosim o radu. Mam formular v modalnim okne. A chova se to tak, ze to vyhodi treba prvni dve validacni pravidla, ale form lze presto odeslat… a nebo pridam do formu

$form->getElementPrototype()->class('ajax');

pak to validuje, ale nevypise jednou chybu a po odeslani se modalni okno nezavre.

edit: validace vyřešena viz. níže …

latte:

<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--modalForm").dialog( { modal: true, draggable: false } );
	    }, "json");
        });
    });
    // aktivace "ajaxoveho" formulare
    function activateAjaxForm () {
        $("#snippet--modalForm form :submit").click(function () {
	    $(this).ajaxSubmit();
	    $("#snippet--modalForm").dialog( "destroy" ); // po submitnuti zavreme dialog
	    return false;
        });
    }
</script>

......
// datovy grid
{snippet cars}
{control carsGrid}
{/snippet}

// modalni okno
{snippet modalForm}
{if isset($showModalForm)}
{control carsForm}
{/if}
{/snippet}

......

v presenteru formular:

function createComponentCarsForm() {

	$form = new Form;
	$form->addGroup('Základní údaje');
	$form->addText('id', 'ID:')->setDisabled();
	$form->addText('spz', 'SPZ:')
		->addRule(Form::FILLED, 'SPZ !');
	$form->addSelect('use', 'Firma/Soukr.', array('f' => 'Firemní', 's' => 'Soukromé'));
	$form->addText('name', 'Název/značka:')
		->addRule(Form::FILLED, 'Zadejte název !');
	$form->addText('type', 'Typ:')
		->addRule(Form::FILLED, 'Zadejte typ !');
	$form->addDatePicker('since', 'Od:')
		->addRule(Form::FILLED, 'Zadejte datum Od !');

	$form->addSubmit('save', 'Uložit');
	$form->onSuccess[] = callback($this, 'formSubmitted');

	.......

	if ($this->getParam('id')) {
	    $cars = $this->context->carsModel->getDataById($this->getParam('id'))->fetch();
	    if (!$cars) {
		throw new Nette\Application\BadRequestException;
	    }
	    $form->setDefaults($cars);
	}

	return $form;
    }

    function formSubmitted($form) {

	$values = $form->values;

	if ($this->getParam('id')) {
	    $this->context->carsModel->saveCars($values, $this->getParam('id'));
	} else {
	    try {
		$this->context->carsModel->saveCars($values);
	    } catch (\Exception $e) {
		$form->addError($e->getMessage());
		return;
	    }
	}

	$this->flashMessage('Vozidlo bylo vlozeno');
	$this->invalidateControl('cars');

Predem díky za radu

Editoval MW (3. 10. 2012 23:45)

MW
Člen | 626
+
0
-

Tak problem vyresen.
Jenom nevim, jak toto udelat universalne.

Problem byl v tom, ze jen musim rucne navazat ajax na form.

Slo by to napsat nějak universalně prosim?

spatne:

// aktivace "ajaxoveho" formulare
    function activateAjaxForm () {
        $("#snippet--modalForm form :submit").click(function () {
        $(this).ajaxSubmit();
        $("#snippet--modalForm").dialog( "destroy" ); // po submitnuti zavreme dialog
        return false;
        });

správně:

// aktivace "ajaxoveho" formulare
    function activateAjaxForm () {
        $("#snippet--frm-carsForm form :submit").click(function () {
	    $(this).ajaxSubmit();
	    $("#snippet--frm-carsForm").dialog( "destroy" ); // po submitnuti zavreme dialog
	    return false;
        });

Editoval MW (3. 10. 2012 10:12)

MW
Člen | 626
+
0
-

Ještě jedna věc, prosim. Po kliknutí na a.ajaxdialog, pred otevrením modalniho okna, formular problikne dole na strance (v miste {snippet modalForm}), nez se zobrazi v modalnim okne.

Napadá nekoho, jak by to slo poresit?

Diky

murdej
Člen | 26
+
0
-

Slo by to napsat nějak universalně prosim?

Já na toto dělám tak že označím všechny prvky, pro které chci aby fungovalo, jednou html class.

<div class="jq-modal-form"><form>
...

Potom aktivuji všechny prvky se zadaným html class

<?php
    function activateAjaxForm () {
        var forms = $(".jq-modal-form");
        for(var i in forms.toArray()) {
            function(c) {
                var control = c;
                $(control).find("form :submit").click(function () {
                    $(this).ajaxSubmit();
                    $(control).dialog( "destroy" ); // po submitnuti zavreme dialog
                    return false;
                });
            }(forms[i]);
        }
?>

Ten class zajistí že ti je jedno jaké id vygeneruje nette a umožní mít na stránce víc prvků se stejnou funkcionalitou ovládanou jedním kódem.

Psal jsem to z hlavy takže bude potřeba opravit nejaké chybky

lukyn
Člen | 21
+
0
-

Ahoj MW,
podařilo se ti rozjet v modal okně i css styly? Mě se při zobrazení modal okna nenačte css styly a dokonce část skriptů… Netuším vůbec, kde je chyba…

David Zadražil
Člen | 62
+
0
-

@lukyn: Nainstaluj si do Firefoxu plugin Firebug a přes ten zjistíš chybu.

lukyn
Člen | 21
+
0
-

Davide,
nainstaloval jsem si plugin Firebug, nicméně nevidím problém ani chybu.
Já mám vytvořenej grid – z něho pak edit tlačítko, které mi otevře modal okno s formulářem pro možnost úpravy. Bohužel ale v okně nejsou linknutý css fonty a ani js scripty z hlavní šablony @default.latte. Jak je tam naimportuji?
Naťuknete, kde je chyba :-( díky

Editoval lukyn (8. 4. 2013 9:03)