Závislé selectboxy: snadná úloha v čistém Nette a JS

Super, už to zkouším.

Jak by toto bylo možné rozšířit o další 2 scénáře použití?
Pomohl by někdo?

1. Jeden hlavní select box + dva další selectboxy na něm závislé

• tedy změní se hodnota v hlavním selectboxu a dojde k načtení položek do dvou dalších selectboxů

2. 3 select boxy

• 1. hlavní – vybere se hodnota a načtou se data do 2. selectboxu
• 2. vybere se hodnota a dle ní se načtou data do 3. select boxu
• 3. vybere se hodnota

Děkuji :-)

Editoval kralik (12. 1. 2022 7:18)

Tak to zkuste doplnit.

Dá se to udělat mnoha způsoby. Například:

add A – do data-dependent neuložíš jednu hodnotu, ale pole hodnot, tedy htmlname každého závislého selectboxu. Následně v actionMyData() pošleš data jako dvouúrovňové pole. A nakonec v JS v change eventu to zase zpracuješ jako pole, tedy o jeden foreach více.

add B – stačí nastavit data atributy i u závislých selectboxů.

Tohle bylo v podstatě napsané z hlavy, nemám to odzkoušené :) Takže bych ještě počkal.

Opravdu nikdo nepomůže s kódem pro scénáře A i B?

Díky

Pokud bych měl více nezávislých na jednom hlavním, tak by návrh změnil, a místo aby hlavní odkazoval na jeden podřízený, tak by podřízení odkazovali na jeden hlavní.

PHP:

// místo nastavování atributů na $main by se použil $dependent:
$dependent
	->setHtmlAttribute('data-url', $this->link('Endpoint:myData', '#'))
	->setHtmlAttribute('data-depends', $main->getHtmlName()); // a odkaz na main

a JS:

// najdeme všechny podřízené selectboxy
document.querySelectorAll('select[data-depends]').forEach(function (dependent) {
	let main = dependent.form[dependent.dataset.depends]; // hlavní <select>

	// a když uživatel změní vybranou položku…
	main.addEventListener('change', function () {
		let url = dependent.dataset.url; // URL pro našeptávání
		// ...uděláme požadavek na Endpoint presenter a pošleme klíč
		fetch(url.replace(encodeURIComponent('#'), encodeURIComponent(main.value)))
			.then(response => response.json())
			// a nahrajeme do podřízeného nová data
			.then(data => updateSelectbox(dependent, data));
	});
});

// vloží nové <options> do <select>
function updateSelectbox(select, items)
{
	select.innerHTML = ''; // odstraníme vše
	for (var id in items) { // vložime nové
		var el = document.createElement('option');
		el.setAttribute('value', id);
		el.innerText = items[id];
		select.appendChild(el);
	}
}

@DavidGrudl trochu OT – bude kod funkční na PHP < 8.0? Jedná se mi o syntaxy fn

A nakonec, pokud je málo hodnot a nepotřebuju AJAX, tak není potřeba vytvářet EndpointPresenter, všechny položky si vyexportuju do $subItems a vložím do data atributu data-items:

$subItems= $this->model->getMainItems();
array_walk($subItems, fn(&$v, $k) => $v = $this->model->getDependentItems($k));

$dependent = $form->addSelect('dep', 'podřízený:')
	->setHtmlAttribute('data-items', $subItems)
	->setHtmlAttribute('data-depends', $main->getHtmlName());

a pak je načtu přímo:

	// a když uživatel změní vybranou položku…
	main.addEventListener('change', function () {
		// pokud existuje data-items, vložíme položky přímo
		if (dependent.dataset.items) {
			let items = JSON.parse(dependent.dataset.items);
			updateSelectbox(dependent, items[main.value])
			return;
		}

		// ...jinak uděláme požadavek na Endpoint presenter a pošleme klíč
		...
	});

(Zase vycházím z kodu, kde se vazba dělá přes data-depends)

In my opinion having also an example with snippets would promote the Nette-way of doing AJAX stuff (especially for those ones that don't like JavaScript, like me) and furthermore simplify things for newbies (like above).

Even without snippets, since the form works even without JavaScript (a good thing), the code could be reduced by submitting the form and updating the whole form's body

A máš tam $form->onSuccess[] = ...?

Super, funguje to krásně.
Níže shrnuji celé řešení.

Jeden hlavní selectbox a dva závislí

• celkem 3 selectboxy, změnou hodnoty 1. selectboxu dojde k načtení hodnot do dalších dvou selectboxů

PRESENTER

public function actionOptionOddeleni($sid): void{

        if($sid){
          $data = $this->mainModel->getDepOddeleni($sid);

		      $this->sendJson($data);
        }


	}

    public function actionOptionWf($sid): void{

        if($sid){
          $data = $this->mainModel->getDepWf($sid);

		      $this->sendJson($data);
        }


	}

protected function createComponentFormAddDoc(): UI\Form {
...
$main = $form->addSelect('zavod', 'Závod', $zavod)
                ->setHtmlAttribute('class','form-control')
                ->setDefaultValue($this->mf)
                ->addRule($form::FILLED,'ZÁVOD musí být vybrán');
$dependent = $form->addSelect('oddeleni', 'Oddělení',$odd)
                        ->setHtmlAttribute('class','form-control')
                        ->setDefaultValue('')
                        ->addRule($form::FILLED,'ODDĚLENÍ musí být vybráno');

$form->onAnchor[] = fn () =>
       $dependent->setItems($this->mainModel->getDepOddeleni($main->getValue() ?? 'default'));

$dWf =  $form->addSelect('wf', 'Workflow', $wf[$this->mf])
              ->setHtmlAttribute('class','form-control')
              ->setDefaultValue('')
              ->addRule($form::FILLED,'WORKFLOW musí být vybráno');
$form->onAnchor[] = fn () =>
       $dWf->setItems($this->mainModel->getDepWf($main->getValue() ?? 'default'));
...

$dependent->setHtmlAttribute('data-url', $this->link('optionOddeleni','#'))
	        ->setHtmlAttribute('data-depends',$main->getHtmlName());

$dWf->setHtmlAttribute('data-url', $this->link('optionWf','#'))
	        ->setHtmlAttribute('data-depends',$main->getHtmlName());
}

LATTE

<script>
    // najdeme vsechny hlavní selectboxy co maji podrizeny selectbox
    document.querySelectorAll('select[data-depends]').forEach(function (dependent) {
        // a když uživatel změní vybranou položku…
        let placeholder = encodeURIComponent('#');
	    let main = dependent.form[dependent.dataset.depends]; // hlavní <select>

        // a když uživatel změní vybranou položku…
        main.addEventListener('change', function () {l}
            let url = dependent.dataset.url; // URL pro našeptávání

            // ...udelame pozadavek na Endpoint presenter a posleme 'sid'
            fetch(url.replace(placeholder, encodeURIComponent(main.value)))
                .then(response => response.json())
                // a nahrajeme do podrizeneho nove data
                .then( data => {
                    updateSelectbox(dependent, data);
                });
        {r});
    });

    // vloží nové <options> do <select>
    function updateSelectbox(select, items)
    {
        select.innerHTML = ''; // odstranime vse
        for (var id in items) { // vložime nové
            var el = document.createElement('option');
            el.setAttribute('value', id);
            el.innerText = items[id];
            select.appendChild(el);
        }
    }

</script>

Tři závislé selectbox

• celkem 3 selectboxy, změnou hodnoty 1. selectboxu dojde k načtení hodnot do 2. selectboxů
• změnou hodnoty ve 2. selectboxu dojde k načtení hodnot do 3. selectboxů

PRESENTER

public function actionOptionLinky($sid): void{

        if($sid){
            $data = $this->mainModel->getDSlinka($sid);

		        $this->sendJson($data);
        }


	}

    public function actionOptionPracoviste($lin): void{

        if($lin){
            $data = $this->mainModel->getDSpracoviste($lin);

		        $this->sendJson($data);
        }

	}

protected function createComponentFormAddDoc(): UI\Form {
...
$main = $form->addSelect('sektor', 'Sektor/Oddělení:', $sek)
               ->setPrompt('Vyberte')
               ->setHtmlAttribute('class','form-control')
               ->addRule($form::FILLED,'Sektor/Oddělení musí být vybrán');

$linka = $form->addSelect('linka', 'Linka')
                ->setHtmlAttribute('class','form-control')
                ->setPrompt('Nejdříve vyberte sektor/oddělení')
                ->setHtmlAttribute('data-depends',$main->getHtmlName())
                ->setHtmlAttribute('data-url', $this->link('optionLinky','#'));

$form->onAnchor[] = fn () =>
               $linka->setItems($main->getValue() ? $this->mainModel->getDSlinka($main->getValue()) : []);

$pracoviste = $form->addSelect('pracoviste', 'Pracoviště')
                ->setHtmlAttribute('class','form-control')
                ->setPrompt('Nejdříve vyberte sektor/oddělení')
                ->setHtmlAttribute('data-depends',$linka->getHtmlName())
                ->setHtmlAttribute('data-url', $this->link('optionPracoviste','#'));

$form->onAnchor[] = fn () =>
                $pracoviste->setItems($linka->getValue() ? $this->mainModel->getDSpracoviste($linka->getValue()) : []);


}

LATTE

<script>
     // najdeme vsechny hlavní selectboxy co maji podrizeny selectbox
    document.querySelectorAll('select[data-depends]').forEach(function (dependent) {
        // a když uživatel změní vybranou položku…
        let placeholder = encodeURIComponent('#');
	    let main = dependent.form[dependent.dataset.depends]; // hlavní <select>

        // a když uživatel změní vybranou položku…
        main.addEventListener('change', function () {l}
            let url = dependent.dataset.url; // URL pro našeptávání

            // ...udelame pozadavek na Endpoint presenter a posleme 'sid'
            fetch(url.replace(placeholder, encodeURIComponent(main.value)))
                .then(response => response.json())
                // a nahrajeme do podrizeneho nove data
                .then( data => {
                    updateSelectbox(dependent, data);
                });
        {r});
    });

    // vloží nové <options> do <select>
    function updateSelectbox(select, items)
    {
        select.innerHTML = ''; // odstranime vse
        for (var id in items) { // vložime nové
            var el = document.createElement('option');
            el.setAttribute('value', id);
            el.innerText = items[id];
            select.appendChild(el);
        }
    }
</script>

Děkuji všem za pomoc

Ahoj,
prosím o pomoc, viz. výše.

díky

Pepino napsal(a):

@kralik zkus tomu selectu nastavit

->setRequired(false)

případně ještě

->checkDefaultValue(false)

toto bohužel nepomohlo.
když dám do formuláře

$podpis[1] = 'Někdo';

Zruším tento řádek aby se mi nenačetly závislé hodnoty.

$dPodpis->setHtmlAttribute('data-url', $this->link('optionPodpis','#'))
	        ->setHtmlAttribute('data-depends',$dWf->getHtmlName());

Následně vyberu v selectboxu podpis „Někdo“, tak se formulář submitne a data se předají.

Problém nastane pokud se mají položky selectboxu načíst v závislosti na vybrané položce „wf“
Při zkoumání prvku jsou tam data Ajaxem správně načtená, do toho selectboxu „podpis“.

Bohužel netuším kde je problém.

Ahoj,
lze vyřešit „dvojí main závislé selectboxy“?
Narazím když bych chtěl dva nezávislé na sobě, ale závislé selectboxy, vysvětlím.

1. Závislý main SelectBox
Závod na jehož výběru závisí selectBox Workflow.
→ výběrem Závodu se doplní položky Workflow = toto funguje dobře.

2. Závislý main SelectBox
Dodavatel na jehož výběru závisí selectBox Provozovna
→ výběrem 1. selectBoxu Závod se v Dodavateli ani v Provozovně nic nestane
→ až s výběrem Dodavatel se doplní položky Provozovna
Bohužel toto nemohu rozchodit.

Zkouším postup https://blog.nette.org/…-javascriptu ten funguje dobře na 1. Závislý SelectBox.

Ale druhý závislý SelectBoxu je bez reakce, ani se nevyvolá Ajax, při změne položky Dodavatel.

Myslím, že problém je v javascriptu, ale to netuším jak vyřešit.

javascript

document.querySelectorAll('select[data-depends]').forEach(function (dependent) {
            // a když uživatel změní vybranou položku…
            let placeholder = encodeURIComponent('#');
            let main = dependent.form[dependent.dataset.depends]; // hlavní <select>

            // a když uživatel změní vybranou položku…
            main.addEventListener('change', function () {l}
                let url = dependent.dataset.url; // URL pro našeptávání

                // ...udelame pozadavek na Endpoint presenter a posleme 'sid'
                fetch(url.replace(placeholder, encodeURIComponent(main.value)))
                    .then(response => response.json())
                    // a nahrajeme do podrizeneho nove data
                    .then( data => {
                        updateSelectbox(dependent, data);
                    });
            {r});
        });

Můžete mi poradit?
Díky

Tak takto je to funkční pro mě (pokud mám všude id a name) :

                        function updateSelectbox(select, items)
                        {
                            select.innerHTML = ''; // odstraníme vše
                            let el = document.createElement('option');
                            el.setAttribute('value', 0);
                            el.innerText = 'Žádná';
                            select.appendChild(el);
                            for (i in items)
                            {
                                let el = document.createElement('option');
                                el.setAttribute('value', items[i]["id"]);
                                el.innerText = items[i]["name"];
                                select.appendChild(el);
                            }
                        }

@vladimirbiro
Mělo by myslím stačit po změně hlavního selectboxu zavolat Nette.toggleForm https://github.com/…etteForms.js#L563
Nebo možná nastavit na tom hlavím selectboxu taky toggle.

Higr napsal(a):

Vytvořil jsem si formuláře podle zadání a vše funguje správně. Nicméně pokud formulář použiju pro editování záznamu, dostanu error Value ‚1‘ is out of allowed set [] in field… na

$form->setDefaults();

dělám neco špatně nebo je uvedený tutorial nepoužitelný pro editování záznamu?
koukal jsem že se to řešilo tady ale asi neúspěšně https://forum.nette.org/…-setdefaults

Od boku: Když nastavuješ defaultní hodnoty, musíš vybrat z těch, které formulář umožňuje vybrat. Tedy z nastavených dat těch inputů. Takže v actionEdit musíš nastavit $dependent->setItems() podle defaultní hodnoty nadřizeného selectu.
Protože v prázdném formuláři ten závislý select nemá žádné možnosti a ty se mu nastaví pomocí ajaxu až po změně hlavního selectu. Ale ty mu chceš při editaci nastavit hodnoty ihned, bez toho ajaxového načtení.

U prvků, které dědí ‎Nette\Forms\Controls\ChoiceControl‎ můžeš metodou checkDefaultValue(false) vypnout kontrolu hodnot v seznamu, viz poslední odstavec https://doc.nette.org/…rms/controls#….