Keskustelu: Nettisivujen teko: jQuery + Dialog + button + id

Hei,

Miten saan jQ:lla haettua Dialog-boxin parents:n (vanhemman?) id:n ja muutkin tiedot?

Eli, ongelma on, että minulla on monta (epämääräinen määrä) juttuja ruudulla, joihin jokaiseen liittyy Dialog-boxi, joka on alussa piilossa.

Kuten alla:

<div name='kysymys' id='265'>
 Juttu 1.265 alkaa ja jatkuu.

 <span class="virheButton"> <b>Huomauta virheestä</b> </span>
 <div class="virheDialog">Kerro virheestä
  <br>
  <fieldset>
   <input type="radio" name="virhe" value="kirjoitusvirhe">Kirjoitusvirhe<br>
   <input type="radio" name="virhe" value="laskuvirhe" checked>Laskuvirhe<br>
   <input type="radio" name="virhe" value="muu">Muu<br>
Kommentti <input type="text" name="virhekommentti" >
  </fieldset></FORM>
 </div>
</div>
<hr>


<div name='kysymys' id ='268'>
Juttu 2.268 alkaa ja jatkuu.

 <span class="virheButton"> <b>Huomauta virheestä</b </span>
 <div class="virheDialog">Kerro virheestä
 <br>
 <fieldset>
  <input type="radio" name="virhe" value="kirjoitusvirhe">Kirjoitusvirhe<br>
  <input type="radio" name="virhe" value="laskuvirhe" checked>Laskuvirhe<br>
  <input type="radio" name="virhe" value="muu">Muu<br>
Kommentti <input type="text" name="virhekommentti" >
 </fieldset></FORM>
</div>

Nämä lomakkeet piilotetaan jQ:lla, eli

jQuery(function($) {
  $('.virheButton').each(function() {
    $.data(this, 'dialog',
	   $(this).next('.virheDialog').dialog({
	     autoOpen: false,
		 modal: false,
		 title: 'Virhe',
   	     buttons: {
		   ok: function() {
		   //Tee kaikki hommat:
		   alert('Hep');
		   $( this ).dialog( "close" );
		 }//function ok
}
      })
    );
  }).click(function() {
      $.data(this, 'dialog').dialog('open');
      return false;
  });
});

ja klikkaamalla nyt tuota tekstiä "Huomauta virheestä", tulee vastaava kysymyslomake näkyviin.

Ongelma on, että millä saan haettua kyseisen lomakkeen tiedot; tarvitaan id edellisestä div:stä, sitten kyseisen radiobuttonin tiedot (eli mikä valittu) ja vielä kommentin arvo.

$(this)

antaa [div.virheDialog]:n, kuten pitäisikin, mutta

$(this).parents()

palauttaa [div.ui-dialog, body, html], jotka ovat aivan vääriä, siinä ei ole tuota "kysymys":tä.

ID:tä en saa millään nappiin jq-tiedoston kautta, koska ne tulee tietokannasta php:llä.

Mitenkä tällaisen saisin tehtyä mahdollisimman järkevästi? Haluan siis epämääräisen monta kysymysdialogia, joiden vastaukset ovat elintärkeitä sivustolle tai ainakin mielenrauhalleni.

Kiittää,
MoL.

Miten olis vaan this.parentElement ? Sen voit sitten tunkea $() sisään jos haluat.

Kiitos avusta, mutta ikävä kyllä se ei toiminut.

this.parentElement palauttaa vastaavan kuin this.parents(), eli konsolista kopsittuna "console.log(this.parentElement);"

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1003; outline: 0px none; position: absolute; height: auto; width: 300px; top: 237px; left: 278px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-2">

eli siis vaikuttaa siltä kuin jQ:n dialog muuttaa div-rakennetta (=DOM?). Saattaisiko tuossa olla jotain siihen liittyvää juttua:

dialog-will-move-its-div-tag-to-body

Millä mahtaisin saada tuon ID:n ja vastaavan div:n tiedot? Olisiko vielä lisää ajatuksia?

Täytyykö kokeilla virittää jokaisen div id:n perään tuo yksilöllinen id-tunnus, ja sen jälkeen kokeilla virittää tuota each-osiota toimimaan sen avulla?

Yhä vinkkejä kaipaillen,
-MoL.

Kuten tuosta saamastasi tulosteesta hyvin näkyy, dialogin luominen siirtää divin toiseen paikkaan. Aseta dialogille id, jonka perusteella pystyt hakemaan oikean kysymyksen, esim. id="dialog-123", tai laita parent jonnekin talteen jo ennen dialogin luomista, kun se on vielä oikea.

Kiitos,

tuolla tavalla, eli laitoin dialogille yksilöivän id:n ja lisäksi vielä samalla noille kysymysjutuille vastaavan yksilöivän id:n sain homman toimimaan.

Se elegantimpi ratkaisu olisi varmaan ollut tuo Metabolixin mainitsema "laita parent jonnekin talteen jo ennen dialogin luomista, kun se on vielä oikea", mutta tälläkin kertaa siitä, mistä aita on matalin.

Kiitos kaikille!