Keskustelu: Nettisivujen teko: Niceform ja tapahtumien kuuntelu?

Käytän niceformia(Siistimpiä lomakkeita) ja yritän saada tapahtuman kuuntelijan liitettyä select elementtiin.

niceforms:
http://www.emblematiq.com/lab/niceforms/

Siellä kehoitetaan liittämään tapahtuman kuuntelija näin:

el.onblur = function() {
    alert("testi");
}

Mutta mulle jää vähän epäselväksi, että mikä toi el on?
Olen kokeillut näin: var el = document.getElementById("testiSelect");

Mutta testi alerttia ei tule. Osaisko joku auttaa tai onko joku käyttänyt aiemmin niceformeja?

Helpissä lukee kyllä nimenomaan, että tiettyjen tapahtumien (ainakin onblur ja onfocus) kanssa kuuntelu ei toimi noin. Luepa uudestaan.

Ok, kiitokset, kokeilenpa ymmärtää :D

EDIT: vähän hankalaa, siis pitäisikö mun pistää toi onblur normaalin tapahtuman kuuntelijan sisään vai?

Vai miten toi oikein on? Pahus ku ei ymmärrys riitä...

Siellä lukeep, että noissa ylikirjoitettavien eventtien tapauksessa pitää omat koodit lisätä suoraan Niceformsin koodin sekaan.

Metabolix, pystyisitkö vähän jeesiin, että mikä tuossa on idea?
Auttais ihan sikana, ku ei vaan keksitä täällä työkavereiden kanssa että miten saadaan homma skulaa?

Kai oot Metabolix duunissa ja saat kunnon palkan, jos et oo niin itse ainakin voisin palkata sut vastailee kysymyksiin ja antamaan ideoita joihinkin haastaviin ohjelmointiprojekteihin. :D

EDIT: katos, triruga vastas jo. Kiitti! Tulee kuitenkin heti mieleen, että jos ne heitetään niceform.js scriptiin, niin mitenköhän saadaan oikealle id elementille kuuntelija.

Tarkastelee el.onblur-funkkarissa, mihin elementtiin this viittaa.

Voithan lisätä sinne esimerkiksi tällaisen rivin:

if (this.real_onblur) this.real_onblur();

Sitten vain asetat omassa koodissasi real_onblur-funktion haluamillesi elementeille.

Ok, kiitti tiedoista kaverit!

Sain nyt ton tapahtuman kuuntelijan toimimaan ja ymmarran tuon this elementin kayton, mutta niita niceformin muuttujia, jota this objekti sisaltaa ei olla vissiin dokumentoitu?
EDIT: tai tietenkaan toi ei ole this objekti, vaan se objekti johon this viittaa.

Mun pitaisi saada select elementin id ja sen arvo selville ja olen kokeillun mm. seuraavia, mutta mikaan naista ei onnistunut:
this.id, this.elementId, this.value, this.selectedValue. Mikakohan voisi olla oikea muuttujan nimi ja mista loydan noi nimet?

Sori ku joudun viela vaivaan tan verran...

Voit asettaa Firebugilla koodiriveille breakpointteja, joiden avulla pääset tarkastelemaan senhetkistä tilannetta, mm. siis this-viittausta ja niitä arvoja.

Aivan, niinpa tietenkin. Mietinkin etta onkohan jotain tapaa milla saada kaikki muuttujan nakyviin, mutta eipa taaskaan tullut mieleen. kiitti vaivannaosta tsuriga.

Jos noita elementtejä on sitten useampia niin Metabolixin neuvoma tapa on elegantimpi. Melkeen suosittelisin käyttämään sitä suoraan, syistä että se 1) ei ole tungetteleva (engl. non-intrusive) eikä täten sotke Niceformsin koodia juurikaan, 2) on laajennettavissa koskemaan useampia elementtejä ilman koodimuutoksia, ja 3) mukailee nykyään suositun nk. ominaisuus-testauksen periaatetta (selaintarkistusten sijaan tarkistetaan, onko ko. ominaisuus tuettu).

Okei, no mites ne funktiot lisätään, näinkö?

...

	el.unload = function() {
		this.parentNode.removeChild(this.dummy);
		this.className = this.oldClassName;
	}
	el.dummy.onclick = function() {
	if (this.realOnClick) this.realOnClick(); //tähän heitin nyt tuon funktion.


...




var e=document.getElementById("aloitusviikko")
e.realOnClick=function()
{
	alert(testi);
	//paivitaTulosteet("aloitusviikko", valittuarvo.value);
}

Tai mistä voisi johtua, että toi this.id näyttää tyhjää, vaikka id on määritelty?

This viittaa johonkin toiseen olioon. Jos kutsuit eventtiin sidotussa funktiossa tuota realOnClick-funktiota, this ei muistaakseni viittaa siellä enää eventin laukaisseehen elementtiin. Heitä se funkkarille vaikka parametrinä.

Tässä on pieni esimerkki objekteista:

var otus = {
  nimi: "Olli Olio",
  juttu: function(hei) {
    alert(this.nimi + " sanoo " + hei + "!");
  }
};
var toinen = {
  nimi: "Pekka Pesukarhu"
};
otus.juttu("hei"); // this == otus; Olli Olio
otus.juttu.call(toinen, "iltaa"); // this == toinen; Pekka Pesukarhu
toinen.testi = otus.juttu;
toinen.testi("hei taas"); // this == toinen; Pekka Pesukarhu

Joo, kiitokset taas näistä vinkeistä.

Kuitenkin pahus vie ku en mistään löydä tuota id:tä, kaikki id:t on yleensä tyhjiä ja yhden kerran on näyttänyt vain oikean id:n.

kuitenin firebug näyttää ilmeisesti muutaman muutajan, vai liekö sitten objekteja, koska ne voi avata tuosta plus symbolista. Mutta ilman avausta näkyy yhden objektin perässä tälläinen arvo: "select#aloitusviikko.NFhidden"
ja siinä on sisällytetty toi aloitusviikko(id), niin olisikohan mitään keinoa saada tämä arvo käyttöön ja sitä kautta poimia id?

Eli toi teksti löytyy tälläisestä elementistä this->nextSibling.
Mutta jos sen avaa, niin tulee taas iso liuta muuttujia.

alert(this.nextSibling) taas antaa luonnollisesti arvoksi objektin tyypin: "object HTMLselectElement".

Eli osaisiko joku sanoa, mites saisin poimittua tuon arvon, joka on tuon nextSibling objektin perässä firebugin oikean puoleisessa ikkunassa.

Ne ovat objekteja. Oisko this.nextSibling.id?