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 | 2659
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 | 815
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 | 1029
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
#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.