Závislé selectBoxy ve formuláři a odeslání pomocí AJAX
- jokas
- Člen | 14
Ahoj,
mám problém s více závislýma select boxama.
Po 1. čtení stránky vše funguje a závislé select boxy se plní. Ale po
odeslání formuláře a uložení hodnot do DB chci dál vybírat další kody
a znovu použít select boxy. Pomocí překreslení snippetů se dostanu do
výchozího stavu a znovu vybírám hodnoty. Funguje to dál, ale AJAX se mi
provede více krát se stavem error a následně se stavem ok. Problém je
v tom, že když se to provádí více krát, tak aplikace je síce funkční
ale zpomaluje se. Tí stavy error se po každém odeslání zvyšuji.
Vycházel jsem z návodu
https://blog.nette.org/…-and-pure-js
Našel jsem jiný příklad s $.nette.init() na stránce https://blog.nette.org/…-and-pure-js
. To je možné použít pro 1 callback. Jinak nastane chyba, že metoda init
je použita 2 krát a závislý select box již nefunguje.
Máte někdo představu jak tohle vyřešit, aby se AJAX za každým provedl
jenom jednou?
Nebo nějaký jiný nápad?
Děkuji.
šablona:
{snippetArea wrapper}
{form complaintFormLot}
<ul class="errors" n:if="$form->hasErrors()">
<li n:foreach="$form->errors as $error">{$error}</li>
</ul>
<div class="row">
<div class="twelve columns">
{input main}
<div n:snippet="sub">
{input sub}
<div n:snippet="procod">
{input procodSparnum class=>'full columns'}
<div n:snippet="procodSparnum">
{input procod, class=>'full width'}
{input sparnum, class=>'full width'}
{include js}
</div>
</div>
</div>
<div>{input lotFrom class=>'full columns'}</div>
<div>{input lotTo class=>'full columns'}</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
{*input button class => 'button primary full width'*}
<input size="50" n:name="button" id="b" class="button primary full width">
{include jsButton}
</div>
</div>
{/form}
{/snippetArea}
{define js}
{include jsCallback, input => main, link => setSelectSub}
{include jsCallbackProcodSparnum, input => sub, link => setSelectProcodSparnumLot}
{include jsCallback, input => procodSparnum, link => setTextProcodSparnumLot}
{/define}
{define jsCallback}
<script>
$(function () {
// $.nette.init();
$('#' + {$control["complaintFormLot"][$input]->htmlId}).on('change', function () {
console.log('ajax');
$.nette.ajax({
type: 'GET',
url: {link {$link}!},
data: {
'value': $(this).val()
}
});
});
});
</script>
{/define}
{define jsCallbackProcodSparnum}
<script>
$(function () {
// $.nette.init();
$('#' + {$control["complaintFormLot"][$input]->htmlId}).on('change', function () {
$.nette.ajax({
type: 'GET',
url: {link {$link}!},
data: {
'main': $('select[name=main]').val(),
'sub': $(this).val()
}
});
});
});
</script>
{/define}
1. načtení a vyplnění formuláře + insert
ajax
GET /complaint/complaint/create/lotnum/324/?do=setSelectSub&value=SG 200 OK 707ms
GET /complaint/complaint/create/lotnum/324/?do=setSelectProcodSparnumLot&main=SG&sub=SG-C30007C 200 OK 684ms
ajax
GET /complaint/complaint/create/lotnum/324/?do=setText...codSparnumLot&value=2-38R40010-16+%7C+ASGC30007CBR 200 OK 569ms
click
POST /complaint/complaint/create/lotnum/324/?do=insertOrderLot 200 OK 819ms
success
GET /complaint/complaint/create/lotnum/324/?do=jsonOrders 200 OK 202ms
success
2. změna závislého selectu
GET /complaint/complaint/create/lotnum/324/?do=setSelectProcodSparnumLot&main=SG&sub=SVP-C30007C
2ms
error
GET /complaint/complaint/create/lotnum/324/?do=setSelectProcodSparnumLot&main=SG&sub=SVP-C30007C
3ms
error
GET /complaint/complaint/create/lotnum/324/?do=setSelectProcodSparnumLot&main=SG&sub=SVP-C30007C
3ms
error
GET /complaint/complaint/create/lotnum/324/?do=setSelectProcodSparnumLot&main=SG&sub=SVP-C30007C
200 OK
2099ms
Editoval jokas (16. 11. 2016 9:54)