Závislé select boxy v Nette 3

@chemix v jednom starém projektě jsem použil NasExt/DependentSelectBox, ale bohužel s novou verzí Nette to nefunguje :(

Ahoj,

nedávno jsme zveřejnili naše vlastní řešení, které používáme na projektech. Je plně kompatibilní s Nette 3.0, front-end je poháněný pomocí naja extension.

Package wavevision/dependent-selectbox

Snad ho využiješ!

Editoval teekey99 (16. 10. 2019 20:38)

Ahoj,
prosím o pomoc.
Snažím se zprovoznit řešení závislých select boxů z Nette 2.4. na Nette 3.0., potažmo Nette 3.1.

Závislost selectboxů funguje a data se správně doplňují.
Problém je ve zpracování formuláře v presenteru.

Pokud nedojde k zavolání handleru invalidateFormSektor! tak laděnka vypíše předané val formuláře.

• V laděnce se objeví AJAX a výpis proměnných v dumps

Bohužel ve chvíli, kdy dojde ke změně sektoru v selectboxu a tedy vyvolání handleru invalidateFormSektor!, laděnka již nevypíš nic.

• V laděnce se objeví AJAX, ale dumps se vůbec neobjeví.

// presenter
protected function createComponentFormUrazAdd($name) {

        $sek = $this->mainModel->getOptionForm('sektor','name','name');
        //asort($sek);

        $form = new UI\Form($this,$name);

        $form->addHidden('id');
        $form->setHtmlAttribute('class','ajax');

        $form->addSelect('sektor', 'Sektor/Oddělení:', $sek)
               ->setPrompt('Vyberte')
               ->setHtmlAttribute('class','form-control')
               ->addRule($form::FILLED,'Sektor/Oddělení musí být vybrán');

        $form->addSelect('linka', 'Linka')
               ->setHtmlAttribute('class','form-control')
               ->setPrompt('Nejdříve vyberte sektor/oddělení');

        $form->addSelect('pracoviste', 'Pracoviště')
                ->setHtmlAttribute('class','form-control')
                ->setPrompt('Nejdříve vyberte sektor/oddělení');

        $form->addTextArea('popis','Popis')
                ->setHtmlAttribute('class','form-control')
                ->addRule($form::FILLED,'Popis zranění musí být zadán');

        $form->addSubmit('ok', 'Vložit')
                ->setHtmlAttribute('class', 'btn btn-primary');

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


        return $form;
    }

public function handleInvalidateFormSektor($sektor){

        $linky = $this->mainModel->getDSlinka($sektor);

    		if($sektor && is_array($linky)) {
    			$this['formUrazAdd']['linka']->setPrompt('Vyberte linku')->setItems($linky);
                $this['formUrazAdd']['pracoviste']->setPrompt('Vyberte linku')
                                  ->setItems(array());
        }else {
    			     $this['formUrazAdd']['linka']->setItems([]); # uživatel vybere prompt (nulovou) hodnotu
        }

    		$this->redrawControl('saFormUA');
    		$this->redrawControl('inputLinka');
        $this->redrawControl('inputPracoviste');
        $this->redrawControl('jsSelectBox');

	   }

      public function submitFormUrazAdd(UI\Form $form,$values) {

        if ($this->isAjax()) {
           bdump($form->getValues(TRUE),'FormHodnoty Ajax');

			     $this->redrawControl('flashMessages');
			     $this->redrawControl();
		    }else {
			     bdump($form->getValues(TRUE),'FormHodnoty No-Ajax');
			     $this->redirect('this');
		    }

      }

// latte
{snippetArea saFormUA}

          {form formUrazAdd}
              <div class="form-row">
                  <ul class="errors" n:if="$form->hasErrors()">
                      <li n:foreach="$form->errors as $error">{$error}</li>
                  </ul>
              </div>

              <div class="form-row">
                  <div class="form-group col-md-4">
                      <b>{label sektor}</b>
                      <span data-link="{link invalidateFormSektor!}">{input sektor}</span>
                  </div>
                  <div class="form-group col-md-4">
                      <b>{label linka}</b>

                      {snippet inputLinka}
                          <span data-link="{link invalidateFormLinka!}">{input linka}</span>
                      {/snippet}
                  </div>
                  <div class="form-group col-md-4">
                      <b>{label pracoviste}</b>
                      {snippet inputPracoviste}
                          {input pracoviste}
                      {/snippet}
                  </div>

              </div>

              <div class="form-row">
                  <div class="col-md-12 text-left">
                      <b>{label popis}</b>
                      {input popis}
                  </div>
              </div>
              <div class="form-row">
                  <div class="col-md-12 text-center">
                      {input ok}
                  </div>
              </div>
          {/form}
      {/snippetArea}


      <script>
        var linkS = $('#frm-formUrazAdd-sektor').parent().data('link');

            $('#frm-formUrazAdd-sektor').on('change', function () {
                $.nette.ajax({
                    url: linkS,
                    data: {
                        'sektor': $('#frm-formUrazAdd-sektor').val()
                    }
                });
            });
      </script>

// layout.latte

...
<script>
    $(function () {
        $.nette.init();
    });
</script>

Moc díky