Problém se zavřením modálního okna

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

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 !

llook
Člen | 407
+
0
-

Myslím, že problém je zde (jestli to je jQuery UI dialog):

$("#snippet--frm-carsForm").dialog( "destroy" );

Takhle se dialog nezavírá. Zavírá se metodou destroy() na objektu dialogu – tj. na tom, co ti vrátí metoda dialog(), která ten dialog vytváří.

MW
Člen | 626
+
0
-

jak by to tedy melo prosím vypadat v tomto pripade ?
Pokud tomu formu nedam class(‚ajax‘), tak se zavre.. to je me divne…

A nebo, ze by to zaviral jen ten refresh stranky !?

Toto jsem obslehnul z nejakeho prikladu tady na foru…

Diky !

MW
Člen | 626
+
0
-

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
+
0
-

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)