Ajax – klikem na odkaz prectu hodnotu z inputu ale funguje to jen na poprvé

novaCZek
Člen | 8
+
0
-

Zdravíčko lidi, uz jsem zoufali tak se chci poradit s Vámi..
smysl: mam formular – do nej napisu nejakou hodnotu – vedle je odkaz – kdyz na nej kliknu – ajaxem odeslu data – hodnota se zobrazi – ale pri opakovani uz to nejede..

protected function createComponentTestForm()
    {
        $form = new Form;

        $form->addGroup('')->setOption('container','fieldset class=col-md-6');
        $form->addText('Skladem','Skladem:')->setAttribute('class', 'maxwidth form-control')->setDefaultValue(0);

        $form->addGroup('')->setOption('container','fieldset class="col-md-6 col-xs-12"');
        $form->addSubmit('send', 'Uložit a publikovat')
            ->setAttribute('class', 'btn btn-success fl_right');
        $form->onSuccess[] = [$this, 'postFormSucceeded'];

        // prevedeni formatovani HTML z Table do DIV bootstrap
        $renderer = $form->getRenderer();
        $renderer->wrappers['controls']['container'] = 'div'; //celý form
        $renderer->wrappers['pair']['container'] = 'div class="form-group" ';
        $renderer->wrappers['label']['container'] = ''; //label neni zabaleno
        $renderer->wrappers['control']['container'] = ''; //label neni zabaleno

        return $form;
    }
//-----------------------------------------
public function handleChangeFoo(){
	$this->ajax_n++;
	$this->foo = 'AJAX HURA! '.$this->ajax_n;
	if ($this->isAjax()) {
		$this->redrawControl('alltest');
		$this->redrawControl('pokus');
		$this->redrawControl('ajaxtest');
		}
}
//-----------------------------------------
public function handleAjaxTest($promena)
{
    $this->ajax_n++;
    $this->ajaxtest = 'AJAX HURA! '.$promena."---".$this->ajax_n;
    $this->Apromena=$promena;
    bdump($this->Apromena);

	if ($this->isAjax()) {
	    $this->redrawControl('alltest');
	    $this->redrawControl('pokus');
		$this->redrawControl('ajaxtest');
	}
}
//-----------------------------------------
a v renderu mam toto:

		$this->template->ajaxtest = $this->ajaxtest;
		$this->template->foo = $this->foo;
		$this->template->ajax_n = $this->ajax_n;
		$this->template->Apromena = $this->Apromena;
//-----------------------------------------

sablona:

{define js_A}
			{include jsCallback,input =>Skladem, link => ajaxTest}
{/define}

{snippetArea alltest}

{snippet pokus}
			<div class="col-md-12 text-center relative">
		    <a n:href="changeFoo!" class="ajax">update foo</a><br/>
			foo: {$foo} ----<br/>
			--{$ajax_n}--
			</div>
{/snippet}

{snippet ajaxtest}

		--{$ajaxtest}--<br/>--{$ajax_n}--<br/>{$Apromena}<br/>

		<a n:href="ajaxTest!" id="readAres" class="ajax" >test a ›</a>
		{control testForm}

		{include js_A}

{/snippet}
{/snippetArea}

{define jsCallback}
	<script>

	$(document).ready(function(){

		$('#readAres').on('click', function() {
			$.nette.ajax({
				type: 'GET',
				url: {link {$link}!},
				data: {
					'promena': $('#frm-testForm-Skladem').val(),
				},
				success: console.log("ok "+$('#frm-testForm-Skladem').val())
			});

		});

	});

	</script>
{/define}

ten snippet pokus handleChangeFoo() je tam jsem tam nechal – kdyz jsem to daval dohromady – jen jako pocitadlo.. (to nema zadny skryty smysl)

budu rad za rady – ja uz nevim :(

Šaman
Člen | 2659
+
+1
-

Nejspíš to je tím, že po kliknutí se ti překreslí i ten odkaz. Po překreslení máš NOVÝ odkaz, na ten ale není navázaná JS událost. Třeba Naja si tohle už hlídá sama a na nové elementy navazuje JS, jindy to musíš provést sám v nějaké události, která proběhne po ajaxovém requestu.

Tady mi ale připadá, že nemusíš překreslovat ten samotný odkaz, což by ti ušetřilo práci.

novaCZek
Člen | 8
+
0
-

ted nevim jetli rozumim… takto? – nemyslim si jelikoz pak to nejak nefuguje ($ajax-n ++ se pak ani nepricita)

<a n:href="ajaxTest!" id="readAres" class="ajax" >test a ›</a>

{snippet ajaxtest}
		--{$ajaxtest}--<br/>--{$ajax_n}--<br/>{$Apromena}<br/>
		{control testForm}
		{include js_A}
{/snippet}

Editoval novaCZek (25. 3. 2021 17:52)

novaCZek
Člen | 8
+
0
-

a nebylo by lepsi se na ten odkaz vykaslat a spustit ajax pri zmene inputu? (jquery chance..misto click co je tam ted? )

novaCZek
Člen | 8
+
0
-

tak jsem to zkousel a stale stejny vysledek – zkousel jsem dat i ten odkaz mimo snippety – ale nepomohlo to…

Kamil Valenta
Člen | 815
+
0
-

A co přesně nejde? Ajaxový request se vůbec nevykoná? Nebo ano? A co se vrátí? Vrátí se invalidované snippety? A jen se nepřekreslí?

novaCZek
Člen | 8
+
0
-
  1. ajax bezi – proto jsem tam dal to pocitadlo pro kontrolu.
  2. kdyz poprve kliknu na odkaz #readAres – script odesle hodnotu z inputu formulare – tu zobrazi v console.log – a po prekresleni snippetu i v nem… ale kdyz jiz zapsanou hodnotu ve formulari zmením a kliknu (podruhe) na odkaz #readAres – z inputu formulare ctu javascriptem – tu zobrazi v console.log(to funguje vzdy) – uz se mi hodnota nepropise na stranku jako pri prvnim kliku (ale ajax pocitadlo funguje dal..)
  • pri tom druhem kliku bdumpnu($Apromena) co mel odeslat script ajaxe GETem – je tam NULL
jiri.pudil
Nette Blogger | 1029
+
0
-

Popořadě:

  1. Na tom odkazu (#readAres) máš třídu ajax. Díky tomu ho po kliknutí ajaxově odesílá už samotný nette.ajax.js. Ten si sám hlídá znovunavěšení listenerů po překreslení, proto se ti tenhle request vyvolává i po překreslení.
  2. Zároveň máš nad tím stejným odkazem i vlastní chování. Jelikož je však ten odkaz uvnitř snippetu, po každém překreslení se změní. Element $('#readAres'), na který navěšuješ svoje chování, na stránce po překreslení snippetu přestane existovat a je nahrazen jiným, který sice možná vypadá úplně stejně, ale browser ho v DOMu reprezentuje jinou instancí.

Co s tím:

ad 1. Smaž z odkazu třídu ajax. Jelikož si ajaxové zpracování vyvoláváš ručně, nepotřebuješ ji tam.

ad 2. Tady je možností víc:

  • pokud se ten odkaz nemění, můžeš ho vytáhnout mimo snippet, aby se nepřekresloval;
  • můžeš ten listener navěsit na nějaký rodičovský element, který je mimo snippet, a zacílit na #readAres pomocí parametru selector;
  • můžeš ten listener navěsit po každém překreslení snippetů – v nette.ajax.js k tomu slouží tuším událost load – jen si v tomhle případě musíš pohlídat, aby se pro změnu nenavěsil vícekrát.