Překreslení formuláře s nette.ajax

tk9
Člen | 7
+
0
-

Ahoj, nedaří se mi překreslit aktuálně zobrazený input „address“ ve formuláři po ajaxovém odeslání v onSubmit ani v onSuccess metodě. Inputy by se měly zobrazovat v závislosti na výběru možnosti (oboru) z prvního selectboxu „specialization“. Po výběru oboru v prvním selectboxu mohu v chrome developer tools vidět, že nové snippety přišly jako odpověď po ajaxovém požadavku. Avšak form zůstává zobrazený stále stejně s inputem „address“, který tam byl původně místo toho aby se zobrazil select input „type“. Input „address“ by měl v této situaci úplně zmizet. Form a jeho inputy by se měly renderovat v závislosti na tom co se pošle jako parametr $select do metody create() do továrničky na formulář. Můžete někdo poradit prosím?

Kód formuláře

<?php

namespace App\Form;

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

class SpecializationForm {

    /** @var Specialization @inject */
    private $specialization;

    public function __construct(Specialization $specialization) {
        $this->specialization = $specialization;
    }

    public function create($specialization, $select){

        $form = new Form;
       // $form->getElementPrototype()->class('ajax');
        $form->addSelect('specialization', 'Obor:', $this->specialization->getSpecializations())
        ->setPrompt('Vyberte obor')
                //->setDefaultValue($this->specialization->getDefault($specialization))
                ->setPrompt('Vyberte obor')
                ->setRequired('Vyberte obor')
               ;// ->setAttribute('onchange', 'submit()');

        if ($select){

            $form->addSelect('type', 'Typ:', array(0 =>"Linux", 1 => "Windows", 2 => "Mac") )
            ->setPrompt('Vyberte druh');

        } else {

            $form->addText('address', "Adresa:")
                ->setAttribute('placeholder', 'Adresa')
                ->setAttribute('api', 'seznam');
             //   ->setRequired('Zadejte adresu');
        }

      return $form;
    }
}

V presenteru:

public function createComponentSpecializationForm(){

    $form = $this->specializationForm->create($this->specialization, $this->select);
    $form->onSuccess[] = [$this, 'specializationSucceeded'];
    $form->onSubmit[] = [$this, 'submit'];
    $form->onError[] = [$this, 'err'];

    return $form;
}

public function err($form) {

    $this->redrawControl('form-errors');
}

public function submit($form){

    if ($this->isAjax()){

       	$this->removeComponent($this->getComponent('specializationForm'));
    	$this->redrawControl("summary");
    	$this->redrawControl("form-errors");
   		$this->redrawControl("wrapper");
    }

Šablona:

 {snippetArea summary}

            <div id="search-form">
                <div class="col-lg-8 col-lg-offset-2">

                    {form specializationForm, class => "form form-main-page ajax"}

        {snippet form-errors}
            {var $form = $control['specializationForm']}
            <ul class="errors" n:if="$form->hasErrors()">
                <li n:foreach="$form->errors as $error">{$error}</li>
            </ul>
        {/snippet}

                    <div class="col-lg-5">

                        <div class="form-group">

                            {input specialization, class=> "list-group-item spec input-lg mobile-input address"}
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="form-group">


                        {snippet wrapper}
                            {ifset $control["specializationForm"]["address"]}
                                {input address, class => "list-group-item input-lg mobile-input address"}
                            {/ifset}

                            {ifset $control["specializationForm"]["type"]}
                                {input type, class => "list-group-item input-lg mobile-input address"}
                            {/ifset}
                       {/snippet}

                        </div>
                    </div>
                    <div class="col-lg-2">
                        {input save, id => "search-submit", class => "list-group-item btn btn-default input-lg mobile-input save"}
                    </div>
                    {/form}

                </div>

            </div>

            {/snippetArea}

<script>

$("form.ajax").on("change", function () {
    $(this).ajaxSubmit();

    return false;
});

</script>

Nette ajax inicializovaný mám v základním @layout.latte.

Editoval tk9 (3. 8. 2018 9:29)

tk9
Člen | 7
+
0
-

Zprovoznil jsem to přidáním následujícího kódu do onChange handleru. Metoda $(this).ajaxSubmit() je z jquery.form.js a nemá s nette ajax nic společného. Také dost pomohlo přidat data: form.serialize() protože v requestu se musí poslat alespoň jedna hodnota z formuláře což jsem předtím netušil.

$("#frm-specializationForm-specialization").on("change", function (e) {

   var form = $(this).closest('form');

   $.nette.ajax({
        type: 'POST',
        data: form.serialize(),
        success: function (data) {
            if (data.redirect) {
                window.location.href = data.redirect;
            }

            // snippets
            if (data.snippets) {
                for (var i in data.snippets) {
                    $("#" + i).html(data.snippets[i]);
                }
            }
        },

        error: function (d){
            console.log("Error");
            console.log(d);
        }
    });

    return false;
});

Editoval tk9 (3. 8. 2018 17:16)