Závislé selectBoxy ve formuláři a odeslání pomocí AJAX

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
jokas
Člen | 14
+
0
-

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)