Latte – jak zapisujete lookupPath do javascriptů?

lukasnov

Ahoj,

furt řeším jak nejlépe zapsat do javascriptu ID nějakého elementu v komponentě, obvykle do jQuery selectoru. Mám proměnnou $componentPath, kde je uložená lookupPath a používám to napřiklad:

$("#" + {$componentPath . '-productId'}).val();

A druhá věc trochu s tím související, používám nette.ajax.js a když chci do handlu komponenty poslat parametry, dělám to už vyloženě hnusně a phpStormu to potrhává jako chybu v js

$.nette.ajax({
	url: {link superHandle!},
	type: "POST",
	data: {
		{$componentPath . '-productId'}: productId,
	}
});

ještě jsem to zkoušel přes JS objekt FormData, phpStorm to nepotrhával, ale to je zas moc zdlouhavý

var formData = new FormData();
formData.append({componentPath . '-productId'}, productId);

$.nette.ajax({
	url: {link superHandle!},
	type: "POST",
	data: formData,
	processData: false,
	contentType: false,
});

Jak to děláte vy? Nějaký sexy způsob jak to zapsat?

Martk

Mám pocit, že na to existuje u inputů getHtmlId()

https://github.com/…eControl.php#L244
https://github.com/…eControl.php#…

lukasnov

Martk napsal(a):

Mám pocit, že na to existuje u inputů getHtmlId()

https://github.com/…eControl.php#L244
https://github.com/…eControl.php#…

$("#" + {$control['form']['productId']->getHtmlId()}).val();

zkoušel jsem, možná to je hezčí, ale někdy nedělám form ale mam třeba classu lookupPath + něco a tam to použít nejde

petr.pavel

Všechno, co potřebuju JS předat z Nette, si ukládám do HTML a z HTML si to beru přes JS.
Např. url, kam co odeslat, beru z HREF nebo ACTION a volám e.preventDefault().

Např. id rodiče si předávám přes data atribut nadřazeného prvku.

<tr data-parent_id="{$parentId">

a v JS pak vyzvednu přes

$(this).closest('tr').data('parent_id');

Proč potřebuješ id? Nemůžeš selector vybudovat přes název formulářového prvku (místo id)?
Jaká událost spouští to tvoje AJAXové volání? Kliknutí na něco? Kde to něco je vůči inputu productId?

Editoval petr.pavel (15. 9. 2022 8:54)

Pavel Kravčík

{link superHandle!, rozner: 'ZABRUSOVAT'}.replace('ZABRUSOVAT', input.value());

Link si to tuším řeší sám, stačí pak upravit hodnotu.

lukasnov

petr.pavel napsal(a):

Proč potřebuješ id? Nemůžeš selector vybudovat přes název formulářového prvku (místo id)?

Když použiji u formu název tak stejně musím přes id formu nějak takto ne?

$('#' + {$control['form']->dejMiId()} + ' input[name="productId"]').val();

Jaká událost spouští to tvoje AJAXové volání? Kliknutí na něco? Kde to něco je vůči inputu productId?

Většinou u selectu, třeba takto:

$(document).on('change', "#" + {$componentPath . '-productId'} , function () {

	var formData = new FormData();
	formData.append({$componentPath . '-productId'}, productId);


	$.nette.ajax({
		url: {link superHandle!},
		type: "POST",
		data: formData,
		processData: false,
		contentType: false,
	});
});

mystik

A proč potřebuješ ID formuláře? Běžně se to dělá tak, že napíšeš jeden univerzální JS, který se pak naváže všechny formuláře daného typu podle něčeho. Většinou často používám nějakou třídu nebo data atribut, kterou dám formuláři a tím ho označím, že se pro něj mé ten JS použít). Pokud tam potřebuješ předat nějaké parametry jsou na to ideální data atributy. Nenapadá mě moc případů, kdy by bylo lepší se odkazovat přímo na ID jednoho konkrétního formuláře a generovat pro něj unikátní JS.

lukasnov

Pavel Kravčík napsal(a):

{link superHandle!, rozner: 'ZABRUSOVAT'}.replace('ZABRUSOVAT', input.value());

Link si to tuším řeší sám, stačí pak upravit hodnotu.

používáš to? vypadá to dobře, akorát si musíš hlídat, aby ten klíč na replace byl unikátní. díky, vyzkouším jestli mě sere, hlídat aby byl unikatní

mystik

Ve tvém případě něco na tenhle způsob:

$(document).on('change', "[data-superHandle]" , function () {

	var formData = new FormData();

	$.nette.ajax({
		url: this.data("superHandle"),
		type: "POST",
		data: formData,
		processData: false,
		contentType: false,
	});
});

A pak jen inputům, které chci aby spustili superHandle přidat ten data atribut data-superHandle s odkazem na handle, který mají

$control->setHtmlAttribute('data-superHandle', $this->link("superHandle!"));

Editoval mystik (19. 9. 2022 15:27)

Pavel Kravčík

@lukasnov: Ano používáme to hodně, protože často máme povinné parametry a pokud tam nedáš defaultní hodnotu – link vyhodí výjimku. Unikátnost platí jen v rámci toho jednoho linku, což není zase tak těžké ohlídat.

lukasnov

mystik napsal(a):

Ve tvém případě něco na tenhle způsob:
$(document).on('change', "[data-superHandle]" , function () {

	var formData = new FormData();

	$.nette.ajax({
		url: this.data("superHandle"),
		type: "POST",
		data: formData,
		processData: false,
		contentType: false,
	});
});
A pak jen inputům, které chci aby spustili superHandle přidat ten data atribut data-superHandle s odkazem na handle, který mají
$control->setHtmlAttribute('data-superHandle', $this->link("superHandle!"));

díky, to je mnohem hezčí přístup, něco takového jsem si představoval

Tomáš Jacík

Existuje nějaká hezčí cesta, jak vypsat Latte proměnnou v JS stringu?

Četl jsem manuál a tam to není: https://latte.nette.org/cs/tags#…

Mám např.:

{
    quantityInput: JAK.gel("cart-product-input-" + {$product->getProductId()}),
    refreshButton: JAK.gel("cart-product-submit-" + {$product->getProductId()}),
    removeButton: JAK.gel("cart-product-remove-" + {$product->getProductId()})
}

Šlo by to i takto:

{
    quantityInput: JAK.gel({"cart-product-input-" . $product->getProductId()}),
    refreshButton: JAK.gel({"cart-product-submit-" . $product->getProductId()}),
    removeButton: JAK.gel({"cart-product-remove-" . $product->getProductId()})
}

Ale ani jedno se mi moc nelíbí.

Infanticide0

Nemyslim si, možná bys mohl úplně změnit způsob tvorby těch ID. $product->getProductId() používáš všude stejnou, takže bys ji mohl hodit do nějakýho data-X na parent elementu a číst ji jednotně, pak už nepotřebuješ Latte ale pure JS.

Nejspíš by šly předávat/generovat rovnou celý ID, ať nemáš hard-coded názvy komponent v šabloně.