Závislý select box (AJAX – kuchařka)

Ahoj, snažím se na aktuální verzi Nette zprovoznit závislý select box z kuchařky (https://blog.nette.org/…-and-pure-js). Nedaří se mi příklad dotáhnout do konce. Mohl bych poprosit o radu?

@layout.latte

{block scripts}
	<script src="{$basePath}/js/jquery.js"></script>
	<script src="{$basePath}/js/netteForms.js"></script>
	<script src="{$basePath}/js/nette.ajax.js"></script>
	<script src="{$basePath}/js/main.js"></script>
	{/block}

HomepagePresenter

<?php

namespace App\Presenters;

use Nette;
use App\Model;
use Nette\Application\UI\Form;


class HomepagePresenter extends BasePresenter
{

    public function handleFirstChange($value)
    {
        if ($value) {
            $secondItems = [
                1 => 'First option ' . $value . ' - second option 1',
                2 => 'First option ' . $value . ' - second option 2'
            ];

            $this['selectForm']['second']->setPrompt('Select')
                ->setItems($secondItems);

        } else {
            $this['selectForm']['second']->setPrompt('Select from first')
                ->setItems([]);
        }

        $this->redrawControl('wrapper');
        $this->redrawControl('secondSnippet');
    }

    protected function createComponentSelectForm()
    {
        $firstItems = [
            1 => 'First option 1',
            2 => 'First option 2'
        ];

        $form = new Form;
        $form->addSelect('first', 'First select:', $firstItems)->setPrompt('Select');
        $form->addSelect('second', 'Second select:')->setPrompt('Select from first');
        $form->addSubmit('send', 'Submit');
        $form->onSuccess[] = [$this, 'processSelectForm'];

        return $form;
    }

    public function processSelectForm(Form $form)
    {
        // $form->getValues() ignores invalidated input's values
        $values = $form->getHttpData();
        unset($values['send']);
        dump($values);

        // ...
    }

}

Homepage/default.latte

{define content}

{snippetArea wrapper}
    {form selectForm}
        {label first /} {input first}
        {snippet secondSnippet}
            {label second /} {input second}
        {/snippet}
        {input send}
    {/form}
{/snippetArea}

{include jsCallback, input => first, link => firstChange}

{/define}


{define jsCallback}
<script>

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

</script>
{/define}

main.js

$(function () {
    $.nette.init();
});

Prohlížeč mi sice formulář vypíše, ale žádné změny se po vybrání v prvním selectboxu nedějí. Navíc se mi na stránce objevuje toto:

array (3)
first ⇒ „1“
second ⇒ ""
_do ⇒ „selectForm-submit“ (17)

EDIT: Jakmile jsem přehodil v @layout.latte linkování scriptu před <include content> ajax se rozběhal.

Díky

Editoval iNyxLadis (18. 11. 2016 14:12)