formular nette.ajax.js ve vyskakovacim okne

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
před 11 lety
vosy
Člen | 532
+
0
-

ahoj, potreboval bych zprovoznit odesilani dat z formulare ve vyskakovacim jqueryui dialog okne.
na strance amm jeden formular ktery se odesila v pohode pomoci ajaxu.

ale kdyz knilknu na tlacitko ktery mi zobrazi plovouci dialog onko a tam amm nastaveny

<form action="/admin/zajezdy/upravit/4?do=pridatTerminZajezdu-submit" method="post" id="frm-pridatTerminZajezdu" novalidate="novalidate" class="ajax">

ale tlacitko ajaxove nefunguje

<input type="submit" name="ulozit" id="frm-pridatTerminZajezdu-ulozit" value="Uložit" class="btn btn-success">

kdyz se provede otevreni dialogu provede se

open:function( event, ui)
                            {
                                nsZajezdy.termin.setupDialog();
                            }



setupDialog:function()
        {

            $.nette.ext('#frm-pridatTerminZajezdu', {
            init: function(r)
            {
            },
            complete: function (r)
            {
                var okFce = function(json)
                {
                };

                var fData = {r:r, okFce:okFce, showR:false};

                nsVosy.myDialog.default(fData);

            }}, {

            });


        }

prijde mi ze formular ktery se externe nacte jiz po nacteni stranky a po provedeni $.nette.init(); tak ho nete uz neprechroupe prez ajax ikdyz ma class=„ajax“

před 11 lety
akadlec
Člen | 1326
+
0
-

Přidej tomu tlačítku class „ajax“

před 11 lety
vosy
Člen | 532
+
0
-

to jsem taky zkousel

a pri zmacknuti se refreshe stranka takze se provede asi submit

Editoval vosy (20. 5. 2014 16:52)

před 11 lety
vosy
Člen | 532
+
0
-

potreboval bych neco jako $.nette.reinit();

před 10 lety
Honzy
Člen | 22
+
0
-

Dopadlo to nejak? Mam zrovna stejny problem :(

před 10 lety
akadlec
Člen | 1326
+
0
-

a co ten reinit má jako dělat?

před 10 lety
Honzy
Člen | 22
+
0
-

v mem pripade: otevru si dialog a do nej ajaxem natahnu formular, ktery ale v tu chvili pri odeslani prestane byt ajaxovy :-/ kdyz s tim formularem nataham i <script> na jquery a nette.ajax, tak ajax funguje (ale je to hlupe reseni a navic prestane fungovat ajax po zavreni dialogu)

před 10 lety
akadlec
Člen | 1326
+
0
-

Tak to děláš blbě. Normálně si tahám obsah modalu na pozadí a ajax funguje bez sebemenšího problému, stačí mi dávat css classu ajax na ty elementy které se mají ajaxovat.

před 10 lety
Honzy
Člen | 22
+
0
-

class tam je, ukazu:

form.latte:
{control classicForm}
  main.js:
  $( document ).on( "click", "a.noveokno", function(e) {
        e.preventDefault();

        var url = $(this).attr('href');
        var snippUrl = $(this).attr('data-url');

        $("#UIdialog").dialog({
            modal: true,
            autoOpen: true,
            closeOnEscape: true,
            resizable: true,
            open: function ()
            {
                $(this).load(url);
            },
            height: 400,
            width: 500,
            title: '',
            close: function() {
                $(this).dialog('destroy');
                $.nette.ajax({url: snippUrl});
            }
        });
});
Presenter:


public function createComponentClassicForm()
    {
            $form = new Form;
            $form->getElementPrototype()->class('ajax form');
            $form->setAction('');
            $form->setMethod('POST');
            $form->addProtection('Vypršel časový limit, odešlete formulář znovu');

		    ...
		    ...
		    ...

            $form->addSubmit('send', 'Uložit');

            $form->onSuccess[] = callback($this, 'classicFormSubmitted');

            return $form;
    }

AJAX ve formu funguje, kdyz ho zobrazim normalne. Kdyz formular dam do dialogu → viz. zdrojaky, tak neajaxuje

Editoval Honzy (10. 9. 2014 16:38)

před 10 lety
akadlec
Člen | 1326
+
0
-

a form odešleš buttonem nebo enterem?

před 10 lety
Honzy
Člen | 22
+
0
-

Buttonem.

před 10 lety
akadlec
Člen | 1326
+
0
-

Tak zkus ještě přidat tu ajax classu i tomu buttonu.

před 10 lety
Honzy
Člen | 22
+
0
-

Bohuzel nepomohlo, porad to ajaxuje jen mimo ten dialog.

před 10 lety
akadlec
Člen | 1326
+
0
-

a používáš nette.ajax.js ?

před 10 lety
wodCZ
Člen | 49
+
0
-

Zkus $.nette.load(); – to by mělo fungovat jako „reinit“, ale ruku do ohně za to nedám.

Bindování událostí v jquery funguje tak, že se na prvky aktuálně se nacházející na stránce navážou dané události (ajaxové odesílání).
Nově přidané prvky už tím ovlivněny nejsou.
nette.ajax.js se automaticky „znovunabinduje“ po požadavku, který byl přes něj zpracován. Tím že taháš form jinak než přes $.nette.ajax se nepřebindovává.

U čehokoliv ostatního nette.ajax.js se dynamické bindování (na stávající i nově přidané prvky) používá jquery plugin livequery (sleduje změny DOM a když něco přibyde, tak nabinduje). Vyžaduje to ale modifikaci kódu.

Editoval Inkode (10. 9. 2014 19:19)

před 10 lety
Honzy
Člen | 22
+
0
-

Pouzivam. Stahl jsem ted pro jistotu nejnovejsi verzi, ale zadna zmena. Ono to vypada, ze nefunguje v pripade ajaxem nacteneho kodu, jakoby nette.ajax neumel odchytavat udalosti po zmene kodu. Zajimave je, ze validace formulare je OK. Zkousel jsem znovu volat i $.nette.init(); resp $.nette.load() pri open, coz vede k uncaught exception: Cannot initialize nette-ajax twice, takze plugin asi bezi. Fakt netusim, co s tim :(

open: function ()
           {
               $(this).load(url);
               // $.nette.init();
               $.nette.load();
           },
před 10 lety
wodCZ
Člen | 49
+
0
-

Zkus

open: function ()
           {
               $(this).load(url);
				setTimeout(function(){
			       $.nette.load();
				   alert('loaded nette ajax');
				}, 500);
           },

tím ověříš, jestli se $.nette.load pouští až po tom, co je formulář v DOM. nejsem javascriptař, ale tohle by se mělo starat o to přebindování.

Editoval Inkode (10. 9. 2014 19:42)

před 10 lety
Honzy
Člen | 22
+
0
-

Inkode napsal(a):

Zkus $.nette.load(); – to by mělo fungovat jako „reinit“, ale ruku do ohně za to nedám.

to bohuzel nefunguje

Inkode napsal(a):

nette.ajax.js se automaticky „znovunabinduje“ po požadavku, který byl přes něj zpracován. Tím že taháš form jinak než přes $.nette.ajax se nepřebindovává.

a nejde to nejak natahnout pres $.nette.ajax? Ze bych v tom load misto $(this).load(url)? Ted jsem to prepsal na

open: function ()
            {
                $.nette.ajax({url: url});
            }

a validace funguje (i kdyz jinak, ale to by nevadilo), AJAX taky funguje, akorat se zavola 2× s tim, ze prvni je „Aborted“ a druhy posila nesmysl a ne data formulare.

Editoval Honzy (10. 9. 2014 21:01)

před 10 lety
Honzy
Člen | 22
+
0
-

Inkode napsal(a):

Zkus

open: function ()
           {
               $(this).load(url);
				setTimeout(function(){
			       $.nette.load();
				   alert('loaded nette ajax');
				}, 500);
           },

to pro zmenu prestane fungovat validace a odesle se to opet 2×

před 10 lety
akadlec
Člen | 1326
+
0
- 
$.nette.load();

nemůžeš volat vícekrát, dělalo by ti to kolize.

Já to tipuju že někde špatně skládáš JS. Já mám nette.ajax inicializaci v layoutu a tím to hasne, žádné další includované JS a funguje to ok.

před 10 lety
wodCZ
Člen | 49
+
0
-

akadlec napsal(a):

$.nette.load();

nemůžeš volat vícekrát, dělalo by ti to kolize.

nedělalo: zde vidíš, že se vždy nejdříve vše odbinduje a pak zase nabinduje.
Jinak s tebou souhlasím.

před 10 lety
Honzy
Člen | 22
+
0
- 
				<script src="{$basePath}/js/jquery.min.js"></script>
		        <script src="{$basePath}/js/main.js"></script>
<script src="{$basePath}/js/jquery-ui.min.js"></script>
<script src="{$basePath}/js/datepicker.cs.js" type="text/javascript"></script>
<script src="{$basePath}/js/netteForms.js"></script>
<script src="{$basePath}/js/nette.ajax.js"></script>

nic vic neni :-/ je to v <head> v @layout.latte

Editoval Honzy (10. 9. 2014 20:57)

před 10 lety
Vojtěch Dobeš
Gold Partner | 1316
+
0
-

Hm, zajímavý snippet kódu. Pokud to dobře chápu, tvůj javascriptový kód se nenachází v main.js, je to tak?

před 10 lety
Honzy
Člen | 22
+
0
-

nachazi se v main, viz https://forum.nette.org/…kovacim-okne#…

před 10 lety
Vojtěch Dobeš
Gold Partner | 1316
+
0
-

V tom případě proč se nette.ajax.js tahá až po něm? main.js by měl být poslední.

před 10 lety
Honzy
Člen | 22
+
0
-

Dal jsem main.js dolu, ale zadna zmena. Nefunguje to ani pres snippet, ani pres dialog ( $(this).load(url); )

před 10 lety
akadlec
Člen | 1326
+
0
-

a když děláš změny mažeš cache?

před 10 lety
Honzy
Člen | 22
+
0
-

Jojo mazu.

před 10 lety
akadlec
Člen | 1326
+
0
-

no chtělo by to někam hodit ukázku kodu co ti to vygeneruje a jak se o to snažíš, takto je to dle mě vaření z vody.

před 10 lety
Honzy
Člen | 22
+
0
-

nakonec jsem to predelal do snippetu:

@layout.latte

<html>
<head>
	<script src="{$basePath}/js/jquery.min.js"></script>
	<script src="{$basePath}/js/jquery-ui.min.js"></script>
    <script src="{$basePath}/js/datepicker.cs.js" type="text/javascript"></script>
    <script src="{$basePath}/js/netteForms.js"></script>
    <script src="{$basePath}/js/nette.ajax.js"></script>
    <script src="{$basePath}/js/main.js"></script>
</head>
<body>

	<div class="main-content">
		<div class="container">
			{include #content}
		</div>
	</div>

	<div id="UIdialog">
    	{snippet UIdialog}{/snippet}
    </div>
</body>
</html>

form.latte

{block content}
	{snippet UIdialog}
		{control classicForm}
	{/snippet}
{/block}

main.js

$(function () {
    $.nette.init();
});

$(document).ready(function(){

    $( ".datepicker" ).datepicker($.datepicker.regional[ "cs" ]);

    $( document ).on( "click", "a.noveokno", function(e) {
        e.preventDefault();

        var url = $(this).attr('href');
        var snippUrl = $(this).attr('data-url');

        $("#UIdialog").dialog({
            modal: true,
            autoOpen: true,
            closeOnEscape: true,
            resizable: true,
            open: function ()
            {
                $.nette.ajax({url: url});
            },
            height: 400,
            width: 500,
            title: '',
            close: function() {
                $(this).dialog('destroy');
                $.nette.ajax({url: snippUrl});
            }
        });

    });
});

Presenter:

public function createComponentClassicForm()
    {
            $form = new Form;
            $form->getElementPrototype()->class('ajax form');
            $form->setAction('');
            $form->setMethod('POST');
            $form->addProtection('Vypršel časový limit, odešlete formulář znovu');

            ...
            ...
            ...

            $form->addSubmit('send', 'Uložit');

            $form->onSuccess[] = callback($this, 'classicFormSubmitted');

            return $form;
    }

…a funguje to dobre, az na to ze se odeslani formulare vola 2× viz http://www.nahraj-obrazek.cz/?…

Editoval Honzy (11. 9. 2014 10:12)

před 10 lety
akadlec
Člen | 1326
+
0
-

to vypadá jako by se ti na ten form dvakrát nabindovala akce

před 10 lety
Honzy
Člen | 22
+
0
-

No jo, ale kde? :-/ Navic nechapu, proc je prvni „Aborted“, kdyz je to 2× uplne stejny pozadavek ( i kdyz v tomto pripade je to dobre, neb to alespon funguje)

před 10 lety
wodCZ
Člen | 49
+
0
-

Honzy napsal(a):

Navic nechapu, proc je prvni „Aborted“, kdyz je to 2× uplne stejny pozadavek

nette.ajax.js automaticky zruší předchozí požadavek, když se vytvoří nový. kde ti vzniká ale nevím.