Ako priradiť text fieldu vo formulari akciu onKeyUp vo vrstve Presenter

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
j-cup
Člen | 21
+
0
-

Ahojte,

tak ďalší problém:

Mám formulár…

$stylingForm = new NAppForm;
$stylingForm->addText('nazov', 'Názov', 40, 200);
$stylingForm->addText('sirka', 'Šírka', 40, 200);
$stylingForm->addText('vyska', 'Výška', 40, 200);
$stylingForm->addText('pocet_clankov', 'Počet článkov', 40, 200);
...

Potrebujem priradiť položke „Názov“ funkciu v jazyku JavaScript vždy, keď sa zmení hodnota v textovom poli. Čiže pre akciu „onKeyUp“. Funkcia „skúma“ hodnotu v textovom poli a pokiaľ spĺňa podmienky, tak podľa číselnej hodnoty nastaví elementu <div> v template šírku pomocou CSS.Funguje mi to ako klasická php stránka, ale v Nette to urobiť neviem…Vopred díky za pomoc a radu.

Lopata
Člen | 139
+
0
-

Pomocí $stylingForm['nazov']->getControlPrototype()->id můžes získat id HTML elementu input, což můžes následně využít k navěšení obslužného handleru. setHtmlId můžeš i použít pro konfiguraci nového id.

<script>
document.getElementById('elementId').onkeyup = function (e) {
	// whatever...
}
</script>
j-cup
Člen | 21
+
0
-

Lopata napsal(a):

Pomocí $stylingForm['nazov']->getControlPrototype()->id můžes získat id HTML elementu input, což můžes následně využít k navěšení obslužného handleru. setHtmlId můžeš i použít pro konfiguraci nového id.

<script>
document.getElementById('elementId').onkeyup = function (e) {
	// whatever...
}
</script>

Vedel by si byť ešte konkrétnejší? Som v nette úplný nováčik a neviem ako a kde vytvoriť ten handler. Ma to byť samostatná funkcia v Presenteri? Dík za trpezlivosť s mojimi otázkami :)

jtousek
Člen | 951
+
0
-

j-cup napsal(a):

Vedel by si byť ešte konkrétnejší? Som v nette úplný nováčik a neviem ako a kde vytvoriť ten handler. Ma to byť samostatná funkcia v Presenteri? Dík za trpezlivosť s mojimi otázkami :)

A čemu vadí, že jsi v Nette začátečník když tohle je záležitost javascriptu? Prostě najdeš ten input (doporučuju jquery selektory) a přiřadíš mu fci na událost keyup která udělá co potřebuješ. Imho to co potřebuješ není naprosto záležitost serveru tedy ani PHP a Nette. Celé se to děje jen v klientovi, jediné co Nette má udělat je vygenerovat formulář. Javascriptová obsluha patří jinam.

j-cup
Člen | 21
+
0
-

jtousek napsal(a):

j-cup napsal(a):

Vedel by si byť ešte konkrétnejší? Som v nette úplný nováčik a neviem ako a kde vytvoriť ten handler. Ma to byť samostatná funkcia v Presenteri? Dík za trpezlivosť s mojimi otázkami :)

A čemu vadí, že jsi v Nette začátečník když tohle je záležitost javascriptu? Prostě najdeš ten input (doporučuju jquery selektory) a přiřadíš mu fci na událost keyup která udělá co potřebuješ. Imho to co potřebuješ není naprosto záležitost serveru tedy ani PHP a Nette. Celé se to děje jen v klientovi, jediné co Nette má udělat je vygenerovat formulář. Javascriptová obsluha patří jinam.

No vadí to tomu, že neviem čo kam dať, aby to fungovalo. Niečo si sem napísal, rozumiem čo to znamená, ale ja potrebujem vysvetlenie „po lopate“. Viem, čo chcem dosiahnuť, len neviem ako :)

jtousek
Člen | 951
+
0
-

Tohle je Nette fórum a radíme tady, ohledně Nette, pokud potřebuješ poradit s javascriptem, klidně ti poradim, ale řekni to rovnou. :)

Chápu to dobře, že ten formulář se na server neodesílá a slouží jen k tomu aby se na něj navěsila nějaká javascriptová logika? Umíš najít pomocí JS potřebný element a přiřadit mu událost?

j-cup
Člen | 21
+
0
-

jtousek napsal(a):

Tohle je Nette fórum a radíme tady, ohledně Nette, pokud potřebuješ poradit s javascriptem, klidně ti poradim, ale řekni to rovnou. :)

Chápu to dobře, že ten formulář se na server neodesílá a slouží jen k tomu aby se na něj navěsila nějaká javascriptová logika? Umíš najít pomocí JS potřebný element a přiřadit mu událost?

Eventuelne sa aj posiela na server na spracovanie hodnôt z formulára. Môj problém bol v tom, že som mal hotový a fungujúci kód v JS, ktorý som zavesil na formulár pomocou atributu onKeyUp priamo v tagu napr. input. To sa ale nedá urobiť takto v Nette. Preto som chcel vedieť, ako a kam mám dať príslušný JS, resp. AJAX kód, ktorý by mi toto spracoval. Nakoniec som to už vyriešil. V príslušnom template mám JS kód, ktorý mi spracuje akékoľvek zmeny vo formulári…v konečnom výsledku to robí niečo podobné ako toto:

http://rss.sme.sk/widget/

Ale aj tak vďaka za snahu o pomoc. :)

jtousek
Člen | 951
+
0
-

jj přesně to bych ti taky poradil – dát to přímo do template anebo ještě lépe do externého .js který bys načítal v té template nebo v hlavičce.

dubak
Člen | 41
+
0
-

j-cup napsal(a):

Ahojte,

tak ďalší problém:

Mám formulár…

$stylingForm = new NAppForm;
$stylingForm->addText('nazov', 'Názov', 40, 200);
$stylingForm->addText('sirka', 'Šírka', 40, 200);
$stylingForm->addText('vyska', 'Výška', 40, 200);
$stylingForm->addText('pocet_clankov', 'Počet článkov', 40, 200);
...

Potrebujem priradiť položke „Názov“ funkciu v jazyku JavaScript vždy, keď sa zmení hodnota v textovom poli. Čiže pre akciu „onKeyUp“. Funkcia „skúma“ hodnotu v textovom poli a pokiaľ spĺňa podmienky, tak podľa číselnej hodnoty nastaví elementu <div> v template šírku pomocou CSS.Funguje mi to ako klasická php stránka, ale v Nette to urobiť neviem…Vopred díky za pomoc a radu.

Zdravim ťa, riešil som niečo podobné a vyriešil som to takto. Mám v presenteri továreň na formulár:

<?php
	protected function createComponentSignInForm()
	{
		$form = new AppForm;
		$form->addText('email')
			//musi byt vyplnene
			->addRule($form::FILLED, 'Please provide an email address.')
			//musi mat tvar email adresy
			->addRule(AppForm::EMAIL, 'Please provide a correct email address.')
			->getControlPrototype()
			//zavesi na prvok vlastne JS funkcie
			->onfocus('onFocusForm(this)')
			->onblur('onBlurForm(this)')
	     		//priradi CSS triedu
			->class('input'); //->style(array('color' => 'red'))
			$form['email']->setDefaultValue('email address');
		// atd ......
	}
?>

No a potom si v adresari „www“ alebo „document_root“ (ci ako ho mas nazvany) vytvoris adresar napr. „js“ a tam si hodis JS subor s obsahom tvojich funkcii, napr.:

<script>
// vyprazdni default hodnotu v login formulari
function onFocusForm(obj){
	obj.value='';
}

// naplni default hodnotou login formular pri opusteni policka
function onBlurForm(obj){
	if( obj.value == null ){
		obj.value='email address';
	}
	else if ((obj.value.replace(/^\s*|\s*$/g,"")) == ""){
		obj.value='email address';
	}
}
</script>

No a potom si uz len v hlavnej @layout sablone zavolas ten externy JS skript:

<script type="text/javascript" src="{$basePath}/js/funkcie.js"></script>

Snad je to dost jasne. Vela stastia v Nette, aj ja som „newbie“ :-)