Formulár generovaný ajaxom v komponente – problém s odosielaním cez ajax

misiak

Zdravím,

narazil som na problém v komponente, ktorú si vytváram pre svoj projekt.

Šablóna komponenty:

<?php

<div>
    {if $isAdmin}
    <div id="ewAdminMenu">
        <ul>
            <li>
                <a href="{link add!}" class="ajax">Pridať</a>
            </li>
        </ul>
    </div>
    {/if}

    {foreach $flashes as $flash}
    <div id="flash" class="{$flash->type}">{$flash->message}</div>
    {/foreach}

    {snippet addForm}
    {if isset($showAddForm) && $showAddForm == true}
        {control eventAddForm}
    {/if}
    {/snippet}

    {snippet ewMainFrame}
    <div class="main">

    </div>
    {/snippet}

</div>

?>

Kód z komponenty EventViewer:

<?php

class EventViewer extends Control
{

	/* ... */

    public function handleAdd()
    {
        $this->template->showAddForm = true;

        $this->invalidateControl('addForm');
    }


    protected function createComponentEventAddForm()
    {
        $eventAddForm = new AppForm();

        $eventAddForm->getElementPrototype()->class = 'ajax';

        $eventAddForm->addText('title', 'Názov')
                     ->addRule(Form::FILLED, 'Názov udalosti musí byť vyplnený.')
                     ->addCondition(Form::FILLED)
                        ->addRule(Form::MAX_LENGTH, 'Názov udalosti nesmie byť dlhší ako 100 znakov.', 100)
                        ->addRule(Form::MIN_LENGTH, 'Názov udalosti nesmie byt kratší ako 5 znakov.', 5);

        $eventAddForm->addText('date', 'Dátum')
                     ->addRule(Form::FILLED, 'Dátum udalosti musí byť vyplnený.')
                     ->addCondition(Form::FILLED); //pridat validator na datumy

        $eventAddForm->addCheckbox('repeat', 'Opakovať každý týždeň?')
                     ->setDefaultValue(false);

        $eventAddForm->addTextArea('description', 'Popis')
                     ->addRule(Form::FILLED, 'Popis udalosti nesmie byť prázdny.')
                     ->addCondition(Form::FILLED)
                        ->addRule(Form::MIN_LENGTH, 'Popis udalosti nesmie byť kratší ako 5 znakov.', 5);

        $eventAddForm->addSubmit('eventAddFormSubmitOk', 'Pridaj');

        $eventAddForm->onSubmit[] = callback($this, 'validSubmitEventAddForm');

        return $eventAddForm;
    }


    public function validSubmitEventAddForm(AppForm $eventAddForm)
    {
        $em = Nette\Environment::getService('EntityManager');

        $event = new \Models\Entities\Event;
        $event->setTitle($eventAddForm['title']->value);
        $event->setStart($eventAddForm['date']->value);
        $event->setDescription($eventAddForm['description']->value);
        $event->setRepeat($eventAddForm['repeat']->value);

        $em->persist($event);
        $em->flush();

        $this->flashMessage('Udalosť je pridaná.', 'success');
        $this->template->showAddForm = false;

        $this->invalidateControl('addForm');
    }

	/* .... */

}

?>

Problémom je, že keď kliknem na Pridať tak sa mi formulár normalne cez ajax zobrazí, akonáhle odošlem formulár, celá stránka sa prekreslí. Použil som aj tento doplnok pre ajax formuláre: https://componette.org/search/?…, ked som vypol javascript tak sa mi stalo, že sa tato komponenta vykreslila bez formulára a tak som ani nevidel chybové hlásenia pri validácii.

Neviete ako to vyriešiť aby ten formulár šlo odoslať a prijať flashMessage od úspechu akcie alebo errors pri validácii bez toho aby to refreshlo celú stránku?

Používam Nette 2.0-alpha.

Jan Tvrdík

Místo

// po načtení stránky
$(function () {
        // odeslání na formulářích
        $("form").submit(function () {
                $(this).ajaxSubmit();
                return false;
        });

        // odeslání pomocí tlačítek
        $("form :submit").click(function () {
                $(this).ajaxSubmit();
                return false;
        });
});

zkus použít

// po načtení stránky
$(function () {
        // odeslání na formulářích
        $("form").live('submit', function () {
                $(this).ajaxSubmit();
                return false;
        });

        // odeslání pomocí tlačítek
        $("form :submit").live('click', function () {
                $(this).ajaxSubmit();
                return false;
        });
});

a obalit flash message snippetem a ten invalidovat.

Editoval Jan Tvrdík (10. 10. 2010 22:03)

misiak

Táto rada pomohla len na odoslanie formulára cez ajax, bohužial ak ho pošlem nevyplnený a neprejde cez validáciu tak bez JS mi to zobrazí validačné hlášky s JS to má stále len zobrazený ten formulár a nič sa nedeje. Cez firefox developer tools som sa pozrel čo vrátilo AJAX odoslanie formulára a nebol to formulár ale celý layout. Neviete kde je problém?

misiak

Ok vyriešil som to. Je potrebné pridať formuláru handler na invalidSubmit.

Napríklad:

<?php

protected function createComponentEventAddForm()
    {
        $eventAddForm = new AppForm();

        /* ... deklaracia prvkov ... */

        $eventAddForm->addSubmit('eventAddFormSubmitOk', 'Pridaj');

        $eventAddForm->onSubmit[] = callback($this, 'validSubmitEventAddForm');
        $eventAddForm->onInvalidSubmit[] = callback($this, 'invalidSubmitEventAddForm');

        return $eventAddForm;
    }


    public function validSubmitEventAddForm(AppForm $eventAddForm)
    {
        /* .... */

        $this->flashMessage('Udalosť je pridaná.', 'success');
        $this->template->showAddForm = false;

        $this->invalidateControl('addForm');
        $this->invalidateControl('eventFlashes');
    }


    public function invalidSubmitEventAddForm(AppForm $eventAddForm)
    {
        $this->flashMessage('Nevalidny form.');
        $this->template->showAddForm = true;

        $this->invalidateControl('addForm');
        $this->invalidateControl('eventFlashes');
    }

?>

Dúfam, že to pomôže niekomu čo bude mať podobný problém.