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

- novaCZek
 - Člen | 8
 
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 | 2668
 
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
 
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)

- Kamil Valenta
 - Člen | 846
 
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
 
- ajax bezi – proto jsem tam dal to pocitadlo pro kontrolu.
 - 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 | 1034
 
Popořadě:
- Na tom odkazu (
#readAres) máš tříduajax. 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í. - 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 
#readArespomocí 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.