kombinace nette ajax, jQuery, Boothstrap a funkčnost při použiti snippetu

vlkodlak

Ahoj ve spolek

narazil jsem na takovou zapeklitost: potřebuji použit, nejlépe standartní nette ajax, modální okno z bootstrapu a další vizuální vylepšení, ovládaní prvku na obrazovce rešim pomoci jQuery, ale při přidaní snippetu pro aktualizaci obrazovky čast procesu mi zkolabuje a já nemohu přijít na to proč/ kde … po odstranění snippetu vše opět funguje tj chyba vzniká přidáním ovládaní obsluhy snippetu

funkční stav:
web stránka, kde mam jen seznam uživatelů s přepínačem checkbox na aktivaci uživatele a tlačítko na vyvolaní popup okna pro úpravu onoho uživatelé

<html>
	<header>
	... načténí boothstrap, jQuery a jiné
	</header>
	<body>
		...
		<div>
			soupis uživatelů
			...
			<div>
 				uživatelXY
				<input class="form-check-input {$item['useronoff']?'bggreen':'bgred'}">
				<button type="button" class="btn btn-primary btn-sm editbtn" id="changeSettingUser" data-bs-toggle="modal" data-bs-target="#AdminUserModal">Upravit</button>
			</div>
			...
		</div>
		...

		<div class="modal fade" id="AdminUserModal" tabindex="10" aria-labelledby="mujModalLabel" aria-hidden="false">
    		<div class="modal-dialog">
        		<div class="modal-content">
				...
				inputy o upravu poli onoho uzivatele
				...
				<input class="form-check-input {$item['useronoff']?'bggreen':'bgred'}" id="changeSettingUser_modal">
				...
				</div>
			</div>
		</div>
		...
	</body>
</html>

jQuery který mi zachytí událost kliknuti na id=„changeSettingUser“ nebo id=„changeSettingUser_modal“, která provede grafickou úpravu a odešle k dalšímu zpracovaní na nette.ajax

...
$(".bgred, .bggreen").click(function ()
    {
        $(this).toggleClass("bgred").toggleClass("bggreen");
        $.nette.ajax({
            type: 'post',
            url: '?do=Changeswithvalue',
            data: {
                param: {
                    aRecId: $(this).attr('data-userID'),
                    aRow: aRecId = $(this).attr('data-row'),
                    aValue: $(this).is(':checked') ? 1 : 0
                }
            }
        });
});

a na konec mi nette vše předá na handleru v presenteru, který provede vše potřebné zápis do databáze atd.

    ...
    public function handleChangeswithvalue(array $param) {
        $this->webFacade->onoffUser((int) $param['aRecId'], (int) ($param['aValue']));
    }
    ...

a až sem vše fungovalo v modálním okně jsem provedl změnu a vše se zapsalo do databáze a překreslil mi přepínač, totéž fungovalo i primo na stránce. krása, ale chyba nastala, když jsem si všiml, ze potřebuji nastaveny stav v modálu přenést na původní formulář. Zde mam dvě cesty definuji snippet na formuláři a nechám ho invalidovat a tím znovu načíst a nakreslit nebo budu dohledávat přepínače a nastavovat ručně. První varianta se mi libí víc, ale pokud kód rozšířím o snippet a hnandler o invalidaci

		...
		<div n:snippet="tabulkaUzivatelu">
			soupis uživatelu
			...
			<div>
 				uživatelXY
				<input class="form-check-input {$item['useronoff']?'bggreen':'bgred'}">
				<button type="button" class="btn btn-primary btn-sm editbtn" id="changeSettingUser" data-bs-toggle="modal" data-bs-target="#AdminUserModal">Upravit</button>
			</div>
			...
		</div>
		...

    ...
    public function handleChangeswithvalue(array $param) {
        $this->webFacade->onoffUser((int) $param['aRecId'], (int) ($param['aValue']));
		$this->redrawControl('tabulkaUzivatelu');
    }
    ...

úprava v modálním okně funguje. Překreslí html prvek, proběhne zápis do databáze, provede se i resresh tabulky na stránce, s načtením nastavených stavu, ale to co mi nefunguje, že mi přestane fungovat reakce jQuery na přepínač id=„changeSettingUser“ respektive funguje pouze jednou u prvního kliknuti a pak už nic.

Editoval vlkodlak (11. 10. 2023 22:05)

mystik

Ty tam tu jQuery obsluhu udalsi pridavas v ready udalosti ze? Tj prida se jen po pecnim nacteni stranky. Prekresleni ji nevyvola. Potrebujes ty udalosti inicialitovat i v novem obsahu snipettu nebo pouzit live udalosti z jQuery.

vlkodlak

mystik napsal(a):

Ty tam tu jQuery obsluhu udalsi pridavas v ready udalosti ze? Tj prida se jen po pecnim nacteni stranky. Prekresleni ji nevyvola. Potrebujes ty udalosti inicialitovat i v novem obsahu snipettu nebo pouzit live udalosti z jQuery.

ano, přesně v ready
bohuzel funkvce .live jiz neni podporovana ve verzi jQuery 3.7
ale evidentne to je spravny smer uvah byt stale nevim jak bych to vyresil
vyzkousel jsem i .on … vysledek stejny :-( po pridani snippetu kod se neprovadi viz popis vyse

Editoval vlkodlak (11. 10. 2023 23:10)

vlkodlak

asi již vím místo .live se má již použivat .on a proto aby fungovalo správně událost navěsit na nadrazený prvek např
místo $(li).on(…) navěsit na $(ul).on(‚click‘,‚li‘ …

@mystik děkují za nápovědu

EDIT: overeno, s trochou upravy a funguje.

misto
$(„.bgred, .bggreen“).click(function () …

udalost dat vys
$(document).on(‚click‘, „.bgred, .bggreen“, function () …

Editoval vlkodlak (12. 10. 2023 18:41)