Autor Zpráva
TomPa
Profil *
Ahoj,
snažím se vyvolávat dialogová okna pomocí jQuery. Pokud je na stránce k vyvolání pouze jedno dialogové okno, tak vše funguje. Ale pokud chci použít na jedné stránce více dialogových oken, tak mi to zobrazuje vždy jen obsah prvního divu:

1) odkazy s třídou modal_window vyvolávají dialogové okno
2) pro rozlišení odkazu, na který bylo kliknuto používám rel
3) rel má stejnou hodnotu jako id divu, který se má zobrazit v dialogovém okně

JavaScript:
<script type="text/javascript">
  $(document).ready(function() {
    $('a.modal_window[rel]').live('click',function() {     
      var id_element = $("a.modal_window[rel]").attr("id");
      $('div#' + id_element).dialog('destroy');                                
      $('div#' + id_element).dialog({ 
            resizable: false,
            modal: true,
            draggable: false,
            show: "size",
            hide: "size"
      });
      return false;
    });
  }); 
</script>


HTML:
<div id="modal_1" title="title 1" style="display: none;">
  <p>Modal/dialog window 1</p>
</div>
<a class="modal_window" rel="modal_1" href="#">Dialog 1</a>

<br />

<div id="modal_2" title="title 2" style="display: none;">
  <p>Modal/dialog window 2</p>
</div>
<a class="modal_window" rel="modal_2" href="#">Dialog 2</a>

4) když v zápise použiji hodnoty rel, skript nefunguje vůbec
5) pokud nahradím rel v odkazu za id a ve skriptu smažu [rel], skript zobrazí v dialogovém okně vždy jen div s id="modal_1"
6) id v odkazech jsou nahrazeny za rel proto, aby hodnota id nebyla na stránce 2x (<div> a <a>)

Můžete mi prosím poradit, jak mohu zápis upravit tak, aby mi na jedné stránce fungoval pro více dialogů?
Děkuji,
T.
_es
Profil
TomPa:
Zamysli sa nad tým, čo vracia funkcia $ v 3. a vo 4. riadku. Nauč sa používať this.
TomPa
Profil *
_es
Trochu z nadsázkou mohu říci, že jsem překonal v JS sám sebe, když jsem dal dohromady ten kousek kódu, který jsem sem vložil... :-) Co vrací funkce na řádku 3 netuším. Myslel jsem, že to zaznamenává klik na daný element...

Funkce na řádku 4 to má vypadat takto (děkuji za upozornění):
var id_element = $("a.modal_window").attr("rel");
Nicméně tipuji, že zde bych měl použít raději this - bude to boj, ale jdu se na to podívat.
:-)
_es
Profil
TomPa:
Co vrací funkce na řádku 3 netuším
Myslel som návratovú hodnotu výrazu $('a.modal_window[rel]').
TomPa
Profil *
_es:
Nu, tak už to funguje - teda doufám. Taková kravinka, a zabralo mi to více jak hodinu, chjooo.
Udělal jsem to tady takto:
$('a.modal_window').live('click',function() {    
    var id_element = $(this).attr("rel");
    $('div#' + id_element).dialog('destroy');                                
    $('div#' + id_element).dialog({ 
        resizable: false,
        modal: true,
        draggable: false,
        show: "size",
        hide: "size"
    });
    return false;
});

Určitě na první pohled odhalíš více nedostatků tohoto zápisu než já, se kterými bych se mohl v budoucnu setkat. Můžeš mi jej prosím případně poupravit? Krom klasického informačního dialogového okna v něm budu chtít používat formulář, který po odeslání bude zpracován jQuery/AJAXem - bude to s tímto zápisem možné?
Díky moc.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: