Ajax validace formuláře v modal okně

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

Zdravím,
prošel jsem si zdejší fórum, vyzkoušel některá řešení, ale pořád mám následující problém:

Ve svém projektu otevírám formulář v modálním okně pomocí jQuery Colorboxu (http://www.jacklmoore.com/colorbox) – Outside HTML (Ajax). Vše funguje správně, až na validaci – při chybě se formulář nevaliduje ajaxově, ale otevře se modální okno jako nová html stránka. Nevíte jak docílit toho, aby se chyba vypsala ajaxově v modálním okně?

Používám doplňky jquery.nette.js a jquery.ajaxform.js

šablona:

<?php
    <div id="formTwoColumn" class="form">

    {snippet form}
      {control userForm}
    {/snippet}

    </div>
?>

presenter

<?php
    protected function createComponentUserForm()
    {
        $form = new Form();
            $form->setTranslator($this->context->translator);
            $form->getElementPrototype()->class[] = "ajax";

            $form->addGroup('General info')->setOption('container', Html::el('fieldset')->class("leftArea"));
            $form->addText('degreeBefore', 'Degree:', 20, 32);
            $form->addText('firstname', 'First name:', 40, 128)
                ->addRule(Form::FILLED, 'Required item.');
            $form->addText('surname', 'Surname:', 40, 128)
                ->addRule(Form::FILLED, 'Required item.');
            $form->addText('degreeBehind', 'Degree:', 20, 32);
            $form->addSelect('gender', 'Gender:')
                ->setItems(array('male' => 'Male','female' => 'Female'));


            $form->addGroup('Login info')->setOption('container', Html::el('fieldset')->class("rightArea"));
            $form->addText('username', 'Username:', 40, 128);
            $form->addPassword('password', 'Password:', 40);
            $form->addPassword('confirmPassword', 'Confirm password:', 40)
                ->addConditionOn($form['password'], Form::FILLED, TRUE)
                    ->addRule(Form::FILLED, 'The new password must be entered again for confirmation.')
                    ->addRule(Form::EQUAL, 'Both passwords must be identical.', $form['password']);


            $form->addGroup('Avatar')->setOption('container', Html::el('fieldset')->class("rightArea"));
            $form->addUpload('avatar', 'Avatar:', 10)
                ->addCondition(Form::FILLED)
                    ->addRule(Form::MIME_TYPE, 'Attached file format must be .jpg .', 'image/jpeg')
                    ->addRule(Form::MAX_FILE_SIZE, 'Attachment size can be at most 2 MB.', 2097152);


        $form->addGroup('')->setOption('container', Html::el('fieldset')->class("buttonArea"));
        $form->addSubmit('save', 'Save')->setAttribute('class', 'btn btn-gebo ajax');
        $form->addSubmit('cancel', 'Cancel')->setAttribute('class', 'btn btn-danger')->setValidationScope(NULL);
        $form->onValidate[] = callback($this, 'validateUserForm');
        $form->onSuccess[] = $this->userFormSubmitted;
        $form->addProtection('Please submit this form again (security token has expired).');

		    return $form;
	  }

    public function userFormSubmitted(Form $form)
    {
 		    if ($form['save']->isSubmittedBy() && $form->isValid()) {
			       $id = (int) $this->getParam('id');

			       if ($id > 0) {
                    /*
                     * editace
                     */
                    $this->users->updateUser($id, $form->values, $this->context->parameters["security"]["salt"]);
                        /*
                         * Kontrola, zda-li byl obrazek nahran a zda se jedna o obrazek
                         .....  */
				               $this->flashMessage('The user has been successfully updated.');
			       } else {
                    /*
                     * uložení
                     */
                    if($inserted = $this->users->createUser($form->values, $this->context->parameters["security"]["salt"])){
                        /*
                         * Kontrola, zda-li byl obrazek nahran a zda se jedna o obrazek
                         .... */
				                $this->flashMessage('The user has been successfully added.', 'success');
                    } else {
                        $this->flashMessage('User could not added.', 'warning');
                    }
			       }
		    }


        if (!$this->isAjax()) {
			     $this->redirect('User:showlist');
		    }
		    else {
            $form->setValues(array(), TRUE);
            $this->invalidateControl('form');
            $this['userForm']->invalidateControl();
		    }
	  }

    public function validateUserForm($form) {
        $values = $form->getValues();
        if ($this->users->findByName($values->username)) {
            $form->addError('This username is already use. Please select a different.');
        }
    }
?>
Vojtěch Dobeš
Gold Partner | 1316
+
0
-

Ukaž hlavně ten Javascript, kterým vyvoláváš ten Colorbox. Co myslíš větou „při chybě se formulář nevaliduje ajaxově, ale otevře se modální okno jako nová html stránka“?

Schischkin
Člen | 2
+
0
-

Ahoj, javascript pro aktivaci colorboxu mám takto:

<script>
	$(document).ready(function(){
		$(".modalAjax").colorbox();
	});
</script>

Tou větou myslím to, že například na stránce s názvem SHOW si otevřu modální okno, ve kterém se zobrazí formulář (načtený z šablony např. EDIT). Pokud ale formulář odešlu, a vyskytuje se mi v něm nějaká chyba (některá z položek nesplňuje validační pravidlo), tak se formulář s chybovou hláškou nezobrazí v tom otevřeném modálním okně, ale načte se úplně nová stránka renderovaná podle šablony EDIT (i s novou URL). Doufám že jsem to vysvětlil srozumitelně :)