Jak v nette zprovoznit odeslání formuláře pomocí ajaxu

Nějak se mi nedaří přemluvit formulář, aby fungoval ajaxově. Co potřebuju: v detailu produktu mám formulář pro vložení zboží do košíku. Bez ajaxu vše funguje.

v šabloně mám nalinkovaný soubor nette.ajax.js

<script type="text/javascript" src="{$basePath}/js/nette.ajax.js"></script>

v js souboru mám inicializaci:

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

V šabloně presenteru potřebuju pro začátek znovu vykreslit jet flash zprávu, takže jsem ji obalil do snipetu:

{snippet flash}
    <div class="row">
        <div class="col-lg-12">
            {foreach $flashes as $flash}
                <div class="alert alert-dismissible alert-{$flash->type}">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {$flash->message}
                </div>
            {/foreach}
        </div>
    </div>
    {/snippet}

a v presenteru mám metody pro formulář:

protected function createComponentAddToBasketForm()
    {
        $form = new Form;
        $form->getElementPrototype()->class('ajax');
        $form->addText('quantity', 'Počet ks:');

        $form->addHidden('prod_id');
        $form->addHidden('guest_id');
        $form->addHidden('name');
        $form->addHidden('price');

        $form->setDefaults([
            'quantity' => 1,
            'prod_id' => $this->product['id'],
            'name' => $this->product['name'],
            'price' => $this->product['d1']

        ]);

        $form->addSubmit('send', 'Do košíku');

        $form->onSuccess[] = [$this, 'AddToBasketFormSucceeded'];
        return $form;
    }

    public function AddToBasketFormSucceeded($form, $values)
    {

        $this->productManager->insertProduct([
            'quantity' => $values->quantity,
            'prod_id' => $values->prod_id,
            'guest_id' => $this->getHttpRequest()->getCookie('guest'),
            'name' => $values->name,
            'price' => $values->price
        ]);

        $this->flashMessage('Přidali jste zboží do košíku', 'success');

        if (!$this->isAjax())
            $this->redirect('Product:default', array("id" => $values->prod_id));
        else {

            $this->redrawControl('flash');
        }

    }

Po odeslání formuláře se mi vůbec neprovede zpracování formuláře ( vložení dat do databáze) a flash zpráva se nezobrazí.
Laděnka říká že tam něco ajaxového proběhlo
http://prntscr.com/e036ox

Ale provede se to samé, jako při načtení stránky.

Kde dělám chybu ?

Pokud odstraním z formuláře class ajax vše funguje jak má

class ajax přidávám v továrničce formuláře:

$form->getElementPrototype()->class('ajax');

pokud ho přidám přímo do formuláře přímo na button, udělá se klasický redirect

Konsole žádnou chybu nevyhodí
v Network se po kliknutí pošle na server url adresa aktuální stránky, bez dalších parametrů, takže jako kdyby se stránka načetla znova

hned na začátku renderDefault mám:

$this->product = $this->template->product = $this->productManager->getProduct()

I když to přesunu do metody actionDefault, problém je pořád stejný
Celý presenter vypadá takto:

<?php

namespace FrontModule;
use Nette\Application\UI\Form;
use App\Model\CategoryManager;
use App\Model\ProductManager;

class ProductPresenter extends BasePresenter
{
    private $productManager;
    private $categoryManager;
    private $product;

    /**
     * @var $categoryId
     *
     */
    private $categoryId;

    private $categories;

    public function __construct(ProductManager $productManager, CategoryManager $categoryManager )
    {
        parent::__construct();
        $this->productManager = $productManager;
        $this->categoryManager = $categoryManager;
    }

    public function renderDefault($id)
    {

        $this->template->product = $this->product;

        /**
         * ID defaultní kategorie produktu (pokud neexistuje defaultní kategorie , použije se první nalezená
         */

        $this->template->categoriesBreadcrumb = $this->categories;

        $this->template->stock = $this->product->ref('stock', 'stock_id')->name;
        $this->template->stock_label = $this->product->ref('stock', 'stock_id')->label_type;
        $this->template->producer = $this->product->ref('prod_producer', 'producer_id')->name;
        $this->template->images = $this->product->related('prod_images');
        $this->template->image_default = $this->product->related('prod_images')->where('default_img', '1')->fetch();

    }

    public function actionDefault($id)
    {
        $this->product = $this->productManager->getProduct()
            ->where('active',1)
            ->get($id);

        if (!$this->product) {
            $this->error('Produkt nebyl nalezen!');
        }

        $this->categoryId = $this->product->related('prod_cat')->where('default','1')->fetch();

        if (!$this->categoryId) {
            $this->categoryId = $this->product->related('prod_cat')->limit(1)->fetch();
        }

        $this->categories = $this->getCategoriesParentName($this->categoryId->category_id);
        krsort($this->categories);
    }

    protected function createComponentAddToBasketForm()
    {
        $form = new Form;
        $form->getElementPrototype()->class('ajax');
        $form->addText('quantity', 'Počet ks:');

        $form->addHidden('prod_id');
        $form->addHidden('guest_id');
        $form->addHidden('name');
        $form->addHidden('price');


        $form->setDefaults([
            'quantity' => 1,
            'prod_id' => $this->product['id'],
            'name' => $this->product['name'],
            'price' => $this->product['d1']

        ]);

        $form->addSubmit('send', 'Do košíku');

        $form->onSuccess[] = [$this, 'AddToBasketFormSucceeded'];
        return $form;
    }

    public function AddToBasketFormSucceeded($form, $values)
    {

        $this->productManager->insertProduct([
            'quantity' => $values->quantity,
            'prod_id' => $values->prod_id,
            'guest_id' => $this->getHttpRequest()->getCookie('guest'),
            'name' => $values->name,
            'price' => $values->price
        ]);

        $this->flashMessage('Přidali jste zboží do košíku', 'success');

        if (!$this->isAjax())
            $this->redirect('Product:default', array("id" => $values->prod_id));
        else {

            $this->redrawControl('flash');
        }

    }

}

Vycházím z návodu na první aplikaci (v dokumentaci).
i když to ale změním na

$form->onSuccess[] = [$this, 'AddToBasketFormSucceeded'];

problém to nevyřeší.

Když odešleš formulář tak se vytvoří POST požadavek? Pošli jaké parametry tam jsou a jaká je odpověď.

1. Nástroje pro vývojáře (třeba přes pravej klik někam do stránky, poslední položka Revize prvku)
2. záložka Network/Síť
3. vyfiltruj XHR
4. klikni na tlačítko ve formuláři
5. měl by se ti tam objevit jeden http požadavek, klikni na něj
6. zkopíruj http hlavičky i parametry pro požadavek i odpověď
7. přepni na záložku Response/Odpověď a pak sem napiš jestli to je json (pošli) nebo html

připadá mi, že je to podobný problém jako tady: https://forum.nette.org/…lar-s-ajaxem

zkusil jsem místo formuláře v šabloně vypsat formulář

{control addToBasket}

a konzole vyhodi chybu:

Uncaught ReferenceError: Nette is not defined
at Object.before (nette.ajax.js:318)
at Function.<anonymous> (nette.ajax.js:42)
at Function.each (jquery.js:371)
at Object.fire (nette.ajax.js:40)
at Object.settings.beforeSend (nette.ajax.js:215)
at Function.ajax (jquery.js:8614)
at nette.ajax (nette.ajax.js:225)
at HTMLInputElement.requestHandler (nette.ajax.js:48)
at HTMLFormElement.dispatch (jquery.js:4737)
at HTMLFormElement.elemData.handle (jquery.js:4549)

Když už mi funguje odesílání formuláře ajaxem, snažím se přidat spinner, aby bylo vidět, že se něco děje, než se požadavek zpracuje.

v @layout.latte jsem přidal před inicializaci $.nette.init();

<script src="{$basePath}/js/extensions/spinner.ajax.js"></script>

do css jsem dal

#ajax-spinner {
    position: fixed;
    width: 32px;
    height: 32px;
    /* - use if you use bacground image, no ico */
    background: url('../img/ajax-loader.gif') no-repeat;
    z-index: 123456;
    color: green;
}

Ale spinner se ne a ne objevit :)

Když to spinner.ajax.js přidám na zkoušku alert (např.)

start: function () {
            this.counter++;
            if (this.counter === 1) {
                this.spinner.show(this.speed);
                alert('test');
            }
        },

Tak po kliknutí na tlačítko formuláře se mi alert okno zobrazí, takže by to mělo fungovat. Ale nastylovaný spinner se nezobrazí.

Poradíte mi prosím někdo ?