Latte – jak zapisujete lookupPath do javascriptů?

lukasnov
Člen | 10
+
0
-

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
Člen | 651
+
0
-

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

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

lukasnov
Člen | 10
+
0
-

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
Člen | 533
+
+3
-

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
Člen | 1180
+
0
-

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

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

lukasnov
Člen | 10
+
0
-

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
Člen | 284
+
+4
-

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
Člen | 10
+
0
-

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
Člen | 284
+
+4
-

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
Člen | 1180
+
+1
-

@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
Člen | 10
+
0
-

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