Multi dependent form selects with AJAX

Hi guys,
I am working on app and I need to use dependent select boxes. I used example on webpage https://blog.nette.org/…-and-pure-js. First question is, is this the best solution for dependent multi select boxes? And now my problem. I use nested snippets for dependent selects a I want to send form using Ajax. Button I must have in nested snippet otherwise not working. But if button is in nested snippet then jquery method “Click” is run multiple times. Method ‘Click’ calls handle which insert data to DB by parameters. After insert I display data using jsGrid. Can anyone advise me what is wrong or what is solution?
Latte:

{snippetArea wrapper}
	{form complaintForm}
	    <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 cusCod}
		    <div n:snippet="cus">
			{input cusAbb}
			{input cusNam, class=>'full width'}
			{input ponum, class=>'full width'}
			<div n:snippet="main">
			    {input main}
			    <div n:snippet="sub">
				{input sub}
				<div n:snippet="procod">
				    {input procodSparnum, class=>'full width'}
				    {label all}{input all}
				    {include jsCheck}
				    <div n:snippet="procodSparnum">
					{input procod, class=>'full width'}
					{input sparnum, class=>'full width'}
					{include js}
				    </div>
				</div>
			    </div>
			</div>
		    </div>
		</div>
	    </div>
	    <div class="row">
		<div class="three columns">
		    {*input button class => 'button primary full width'*}
		    <button id="b" n:name="button" class="button primary full width">Add</button>
		</div>
	    </div>
	{/form}
    {/snippetArea}
</div>
<div class="eight columns">
    <div id="jsGrid"></div>
</div>

{define js}
{include jsCallback, input => cusCod, link => setSelectCusCod}
{include jsCallback, input => ponum, link => setSelectMainPonum}
{include jsCallback, input => procodSparnum, link => setTextProcodSparnum}
{include jsCallbackPonum, input => main, link => setSelectSubPonum}
{include jsCallbackPonumMain, input => sub, link => setSelectProcodSparnumPonum}
{include jsButton}
{/define}

{define jsCheck}
    {include jsCheckAll, input => all}
_{/define}

{define jsButton}

<script>
    $(function () {
	var json = {
	    data: function () {
		return $.nette.ajax({
		    type: "GET",
		    url: {link jsonOrders!, 'id' => $id},
		    async: 'false',
		    dataType: "JSON",
		});
	    }
	};

	var grid = json.data().done(function (json) {
	    console.log(json);
	    $("#jsGrid").jsGrid({
		width: "100%",
		height: "100%",
		inserting: false,
		editing: false,
		sorting: true,
		paging: false,
		autoload: true,
		data: json,
		fields: [
		    { name: "PONUM", title: "PONUM", type: "text", width: 80, autosearch: true},
		    { name: "PROCOD", title: "PROCOD", type: "text", width: 100},
		    { name: "LOTNUM", title: "LOTNUM", type: "text", width: 40},
		    { name: "SEQNUM", title: "SEQNUM", type: "text", width: 40},{*type: "control"*}
		]
	    });
	});

	grid;
	$(document).on('click', '#b', function (e) {
	    console.log('click');
	    $ponum = $('select[name=ponum]').val();
	    $main = $('select[name=main]').val();
	    $sub = $('select[name=sub]').val();
	    $isCheck = $('input[name=all]').is(':checked');

	    if($ponum.length > 0){
		if(!$isCheck){
		    $.nette.ajax({
		    url: {link insertOrder!},
		    type: "POST",
		    async: false,
		    data: {
			'id': {$id},
			'ponum': $('select[name=ponum]').val(),
			'procod': $('input[name=procod]').val(),
			'main': $('select[name=main]').val(),
			'sub': $('select[name=sub]').val(),
		    },
		    success: function () {
			console.log('success');
			grid;
		    }
		    });
		}else{
		    $.nette.ajax({
		    url: {link insertOrderAll!},
		    type: "POST",
		    async: false,
		    data: {
			'id': {$id},
			'ponum': $('select[name=ponum]').val(),
			'main': $('select[name=main]').val(),
			'sub': $('select[name=sub]').val(),
		    },
		    success: function () {
			console.log('success');
		    }
		    });
		}

	    }else{
		$('select[name=ponum]').css("background","red");
	    }

	});
    });


</script>

{/define}

{define jsCallback}

<script>
    $('#' + {$control["complaintForm"][$input]->htmlId}).on('change', function () {
	console.log('callback');
	$.nette.ajax({
	    type: 'GET',
	    url: {link {$link}!},
	    data: {
		'value': $(this).val()
	    }
	});
    });

</script>

{/define}

{define jsCallbackPonum}

<script>
    $('#' + {$control["complaintForm"][$input]->htmlId}).on('change', function () {
	console.log('ponum');
	console.log($('select[name=ponum]').val());

	$.nette.ajax({
	    type: 'GET',
	    url: {link {$link}!},
	    data: {
		'ponum': $('select[name=ponum]').val(),
		'main': $(this).val()
	    }
	});
    });

</script>

{/define}

{define jsCallbackPonumMain}

<script>
    $('#' + {$control["complaintForm"][$input]->htmlId}).on('change', function () {
	console.log('ponummain');
	console.log($('select[name=ponum]').val());

	$.nette.ajax({
	    type: 'GET',
	    url: {link {$link}!},
	    data: {
		'ponum': $('select[name=ponum]').val(),
		'main': $('select[name=main]').val(),
		'sub': $(this).val()
	    }
	});
    });

</script>

{/define}

{define jsCheckAll}

<script>
    $('#' + {$control["complaintForm"][$input]->htmlId}).on('change', function () {
	$('input[name=procod]').toggle();
	$('input[name=sparnum]').toggle();
	$('select[name=procodSparnum]').toggle();

    });

</script>

{/define}

Thanks for you answear.

Last edited by jokas (2016-11-04 14:29)