Problém se zavřením modálního okna
- MW
- Člen | 626
Zdravím a prosím o pomoc.
Mám následující :
latte:
<!--modal dialog-->
<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--carsForm").dialog( { modal: true, draggable: false } );
}, "json");
});
});
// 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;
});
}
</script>
<!--konec modal dialogu-->
....
{snippet carsForm}
{if isset($showCarsForm)}
{control carsForm}
{/if}
{/snippet}
....
presenter:
function createComponentCarsForm() {
$form = new Form;
$form->getElementPrototype()->class('ajax');
$form->addGroup('Základní údaje');
$form->addText('id', 'ID:')->setDisabled();
...
$form->addGroup('Technická data');
$form->addText('vin', 'VIN:');
...
$form->addGroup('Povinné ručení');
$form->addText('respons_fa', 'Pojištovna.:');
...
$form->addCheckbox("leasing", "Leasing")
->addCondition(Form::EQUAL, 1)
->toggle("leasing_group"); // zobrazíme skupinu s id "leasing_group"
$form->addCheckbox("insurance", "Pojištění")
->addCondition(Form::EQUAL, 1)
->toggle("insurance_group"); // zobrazíme skupinu s id "insurance_group"
$form->addGroup('Leasing')->setOption('container', \Nette\Utils\Html::el('fieldset')->id("leasing_group")->style("display:none"));
$form->addText('leasing_fa', 'Leasingová spol.:');
$form->addText('leasing_pact', 'Smlouva:');
$form->addDatePicker('leasing_to', 'Leasing do:');
$form->addText('leasing_payment', 'Splátka:');
$form->addGroup('Pojištění')->setOption('container', \Nette\Utils\Html::el('fieldset')->id("insurance_group")->style("display:none"));
$form->addText('insurance_fa', 'Pojišťovna:');
$form->addText('insurance_pact', 'Smlouva:');
$form->addDatePicker('insurance_to', 'Pojištění do:');
$form->addText('insurance_payment', 'Platba:');
$form->addGroup();
if ($this->getUser()->isAllowed('auta', 'edit')) {
$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 ulozeno');
$this->invalidateControl('cars');
//$backlink = $this->application->restoreRequest($this->backlink); jiz nepouzivam
//$this->redirect('Cars:');
}
a chovaní je takové:
pokud dam pryc
$form->getElementPrototype()->class('ajax');
tak se form odesle, okno zavre data ulozi.
pokud to tam necham tak se data zmení (vidim to na pozadi modalniho okna) ale okno zustane otevrene…
Divné je, ze tak jednou z 15 pokusu se to okno po ulozeni zavre… Stejne tak, jako nekdy z X pokusu nefunguje toggle. Tedy se skupina neotevre… Jinak ano…
Prosím o radu, jak to nejlépe vystopovat. Bugzilla v konzoli nic neukaze… Cache cista, IE o FF stejné chovani…
Predem moc diky !
- MW
- Člen | 626
Stále nic.
Dal jsem na pastebin
vygenerovany kod s IDckama, jestli nekdo neco uvidite, prosim. Označil
jsem začátek formu. Podle me mam problem v selektorech, ale nevim presne, na
cem zavolat ten dialog(„destroy“).
a tady jeste aktualni script:
<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--carsForm").dialog( { modal: true, draggable: false } );
}, "json");
});
});
// aktivace "ajaxoveho" formulare
function activateAjaxForm () {
$("#frm-carsForm form :submit").click(function () {
$(this).ajaxSubmit();
$("#snippet--carsForm").dialog("destroy"); // po submitnuti zavreme dialog
return false;
});
}
</script>
Editoval MW (17. 10. 2012 11:28)
- ji_ri_k
- Člen | 44
Když vidím s čím se tu plácáš :-) tak jsem ti tu zlehka nastřelil jak by se to mohlo dělat a mělo by to být použitelné pro libovolné množství modal oken. Napsal jsem ti k tomu i komentář. Netestoval jsem to, takže snad tam nebude chybička.
<script>
$("a.modal").live("click", function() {
// vytvoris si jedinecny ID pro dany modal (doporucuji inteligentneji - tohle jen pocita pocet modalu, coz neni uplne ok, protoze kdyz jeden zavres tak uz to bude zlobit - ale chtel jsem ti ukazat ze je treba mi jedinecne ID)
var id = $('.modal-window').length + 1;
// v data-onclose si muzes zadat co se ma stat po uzavreni okna
var onclose = $(this).data('onclose');
// ziskas url kterou to ma v modalu zobrazit
var href = $(this).attr('href');
// pomoci atributu data-<something> muzes pouzit co potrebujes, takze treba titulek, velikost apod a pak ji jen predas modalu
// vytvoris modal a pridas ho k body
$('body').append('<div class="modal-window" id="modal-' + id + '"></div>');
// otevres modal okno
$("#modal-" + id).dialog({
modal: true,
closeOnEscape: true,
resizable: true,
open: function(event, ui) {
// nactes do modal okna obsah - napr. jiny view
$("#modal-" + id).load(href, function(response, status, xhr) {
// pokud se pri nacitani neco pokaka, tak muzes zalogovat, nebo se nejak zachovat
if (status == "error") {
alert('An error has been occured while loading content of this window.');
}
// v modalu muzou byt formulare, tak vsechny inicializujes, aby v nich fungovala nette validace
$("#modal-" + id + ' form').each(function() {
Nette.initForm(this); // nastavis validaci pro Nette formulare v nove nactenem modal okne
});
// inicializujes opet ajax.nette - aby ti opet fungoval ajax
$.nette.load();
});
},
close: function(event, ui) {
// zavres modal - uplne ho odstranis z DOMu
$("#modal-" + id).remove();
// pokud mas nastaveny v atributu data-onclose nejakou url, muzes ji ajaxove zavolat (obnovi ti napr. stranku apod)
if(onclose != undefined) $.nette.ajax({url: onclose});
}
});
return false;
});
</script>
Okno pak otevřeš např. takto:
<a n:href=„add“ class=„modal“
data-onclose=„refreshPage!“>otevři modal okno</a>
Potřebovat budeš jquery, jquery ui, super knihovničku nette.ajax.js od Vojty Dobeše a pak samozřejmě NetteForms.js nebo jak se to jmenuje :-)
Co je potřeba si uvědomit! Když budeš volat nějakou url adresu do modalu (nějaké view) – asi tam nebudeš chtít mít hlavní layout tak ho musíš někde přepnout/vypnout – tudíž proto nemusí být k dispozici např. všechny snippety (co jsou v hlavním layoutu) – proto je musís invalidovat až poté co uzavřeš modal okno a budeš zpět v původním view
Snad ti to pomůže, ten tvůj kód zahoď – je použitelný jen pro jeden jedinný snippet.
čao
Editoval ji_ri_k (18. 10. 2012 16:34)