Keskustelu: Nettisivujen teko: Ehkä ihmeellisin Javascript bugi ikinä...

Mulla on JQuery plugari, mikä luo kuvallisia checkboxeja.

Plugari toimintaperiaate on seuraava. Luon aluksi html:llä tyhjän kuvan, johon
asetan plugarin. Plugari generoi tyhjään imageen src atribuutin ja jotain muuta.

Sitten tulee omituisin kohta:
Yritän asettaa kuvalle omaa html:ää, eli piilottaa sinne sisään oikean checkbox:in, jonka visibility laitan sitten hiddeniksi.

Seuraavasta lauseesta aiheutuu omituisin bugi mitä olen koodaus urallani nähnyt.

// obj.attr('id') arvona on sen kuvan oikea id osoite. Tarkistettu firebugilla.
document.getElementById(obj.attr('id')).innerHTML = '<input type="checkbox" />';

alert($(obj).html());

Ja nyt tulee kysymys, kuka arvaa mitä lukee ikkunassa, eli alert boxissa?

Hyvä arvaus on:
<input type="checkbox" />

Mutta ei ole oikein

Oikea vastaus on:
<img xmlns="http://www.w3.org/1999/xhtml"><input type="checkbox">

Kysymys kuuluu, mistä ihmeestä Javascript repäisee tuon img xmlns jutun?

EDIT:
Lisättäköön se, että jollaissakin sivuistoissa toi plugari toimii, joissakin Javascript taikoo tämän hassu img xmlns elementtin. En oo vielä saanut jäljitettyä, että mikä asetus tai juttu saa laukeamaan tuon bugin.

Asian syyn arvailua varmaan auttaisi, jos antaisit jonkin esimerkkisivuston ja kertoisit vielä, millä selaimilla olet tätä testannut.

Kuitenkin kun img-elementti on speksin mukaan aina tyhjä, ei ole minusta kovin järkevää yrittää tunkea sen sisään mitään. Laita kenttäsi kuvan perään. Jos haluat näkymättömän kentän, käytä piilokenttää (type="hidden") äläkä CSS-kikkailuja. Voit rassata kenttää päälle ja pois muuttamalla disabled-ominaisuutta.

Mikähän idea tuossa getElementById-viritelmässäsi on? Sinulla ilmeisesti on jo oikea elementti obj-muuttujassa (jQueryn muodossa), kun kerran pystyt hakemaan siitä ID:n. Sisällön päivitys tapahtuisi yksinkertaisesti kutsulla obj.html("plaa"). Lisäksi jälkimmäinen $(obj) on täsmälleen sama asia kuin pelkkä obj.

Mun mielestä tuntuu hyvin perverssiltä ylipäätään muuttaa kuvan innerHtml:ää, koska kuva ei tyypillisesti ole tagipari, joiden sisälle laitettaisiin html:ää..

Siis jos se olisikin <img id="id" src="jotain">moi</img> niin document.getElementById('id').innerHTML olisi nyt "moi".

Okei, en tiennytkkään, että img on tyhjä, ehkä toi bugi tulee sen takia, koska sinne ei saa laittaa kamaa ja oon laittanut.

Noi obj viritelmät on vain sen takia, että ei voi laittaa JQueryn piikkiin ongelmaa ja toi $(obj) juttu alertissa sen takia, että ihmiset tajuaa käyttäneeni jqueryä. Oikea koodi ei näytä siltä.

Mutta kiitos Metabolix vastauksesta ja tuosta linkistä, en ole ennen selainnut html 5 manuaalia ja täytyypä alkaa sitä harrastaan.

Selaimena oli siis Firefox ja Chromella tuli sama xmlns juttu hieman erilailla.

Ja taidankin kokeilla tuota, että laittan sen seuraavaksi elementiksi. Se oli sisässä sen takia, että ajattelin sen olevan rakenteellisesti helmpompi hallita, kun voi suoraan käsitellä lapsi elementtiä ja sen vanhempaa näppärästi.

Toi sivusto ei ole vielä kunnolla netissä ja se on rakennettu Yii frameworkin päälle, että ois ollu aikana hankala julkaista toi sivu, missä bugi ilmeni.

Laitoin sen nyt seuraavaksi elementiksi ja nyt xmlns juttu tulee sille pää imagelle automaattisesti? (Sen nyt ei enää periaateessa kuitenkaan haittaa.)

Tässä nyt vielä url sivustolle, siellä pitää painaa lomake kenttiä vähän alaspain ja sitten kirjoittaa esim. moto ja katsoa sitten sitä checkboxia esim. firebugilla.

Tämä sivu ei ole ihan päivitetty, koska on suhkot työllästä päivittää.
http://www.verkkosovellukset.com/plazagrande/index.php?r=site/sell1

Grez, tosiaan tuosta, että img elementtiin heitin kamaa, niin siitä saa kiittää
mun peruskoulun atk-opettajaa, se opetti laittamaan kuvatesktit img elementin sisään. Myöhemmin olen ihmetellyt vähän, tuota img tagi logiikkaa, mutta eipä ole ikinä tullut mieleen, että sen on pakko olla tyhjä. Ja olen tosiaan käyttänyt paljon tuota rakennetta <img ...>jotain</img>

Nyt se on kuitenkin laitettu siblingiksi se input checkbox elementti. Toi xmlns juttu jää kuitenkin vielä kummittelemaan siihen img elementtiin, tosin ei enää haittaa. Olis mukava vaan tietää, että miksiköhän?

Paulus M kirjoitti:

Grez, tosiaan tuosta, että img elementtiin heitin kamaa, niin siitä saa kiittää
mun peruskoulun atk-opettajaa, se opetti laittamaan kuvatesktit img elementin sisään.

No huh huh. Mistähän opettaja oli oman oppinsa imenyt?

lainaus:

Ja olen tosiaan käyttänyt paljon tuota rakennetta <img ...>jotain</img>

Eihän siinä ole tolkkua, koska <img ...> aloittaa ja lopettaa img-elementin. Ja </img> on sitten roskaa, jonka selaimet ohittavat. Validaattori toki antaa virheilmoituksen, joten tästä voidaan päätellä...

lainaus:

Nyt se on kuitenkin laitettu siblingiksi se input checkbox elementti.

Miksi? Eihän tässä tarvita input type=checkbox -elementtiä muuten kuin varmistukseksi: sivun staattiseen sisältöön niin, että valinnan voi edes jotenkin tehdä silloin, kun JavaScript ei ole käytössä. Ja se elementti kannattaa sitten JavaScriptillä vaihtaa input type=hidden -elementiksi samalla, kun lisätään kuvaelementti, johon liittyy haluttu onclick-toiminto.