Ajax validace formuláře v modal okně
- Schischkin
- Člen | 2
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
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
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ě :)