You are not logged in.

  • Login

jQuery UI-Problem: Dialog öffnen

Tim Eipert

Intermediate

  • "Tim Eipert" started this thread

Posts: 101

  • Send private message

1

Monday, October 4th 2010, 3:51pm

jQuery UI-Problem: Dialog öffnen

Hi, ich will mit jQuery (+UI) einen Button machen, mit dem man einen Dialog öffnen kann. Das ist ansich einfach. Ich will aber, dass das Javascript Button und Dialog selbstständig erkennt (Wie bei den Tabs oder dem Accordion)
Also, dass ich dann z.B.:

HTML Code

 
1
2
3
4
5
6

<span class="icon"></span>
<div> ... </div>
<span class="icon"></span>
<div> ... </div>
<span class="icon"></span>
<div> ... </div>

Und 3 Buttons sehe und immer ein Dialog mit dem text im unteren Div ist.
Ich denke, das funktioniert mit Next:

JavaScript Code

 
1
2
3

$('.icon').click(function(){
                $(this).next("div").dialog('open');
                          });

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

2

Monday, October 4th 2010, 9:37pm

Hast du eine Seite online zum spielen? Was genau funktioniert nicht?
Ich sehe keinen Fehler. Müsste eigentlich funktionieren...
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

vince

Master

Posts: 1,104

  • Send private message

3

Tuesday, October 5th 2010, 11:58am

Hi,

.dialog("open") kannst du nur nutzen wenn schon eine Dialoginstanz existiert. Ansonsten einfach dialog() benutzen, da autoOpen default auf true steht.

JavaScript Code

 
1
2
3

$('.icon').click(function(){
                $(this).next("div").dialog();
                          });


Alternativ kannst du vorher die Instanz erstellen, musst dann aber autoOpen auf false setzen und kannst dann mittels "open" den Dialog später öffnen.

JavaScript Code

 
1

$("div").dialog({ autoOpen: false }); .... $(this).next("div").dialog("open");

Tim Eipert

Intermediate

  • "Tim Eipert" started this thread

Posts: 101

  • Send private message

4

Tuesday, October 5th 2010, 4:22pm

Beispiel:

JavaScript Code

 
1
2
3
4

$('.wand').dialog({autoOpen: false});
  $('.icon').click(function(){
            $(this).next(".wand").dialog('open');
                      });

HTML Code

 
1

<button class="icon">Open</button><div class="wand">Text..</div>

Das klappt nicht!?

vince

Master

Posts: 1,104

  • Send private message

5

Tuesday, October 5th 2010, 5:29pm

Funktioniert das denn ?

JavaScript Code

 
1
2
3

$('.icon').click(function(){
            $(this).next(".wand").dialog();
                      });



Könnte daran liegen das du das Element nicht richtig selektierst.


Was spuckt das alert denn aus wenn du es dort hinsetzt ?

JavaScript Code

 
1
2
3
4
5

$('.wand').dialog({autoOpen: false});
  $('.icon').click(function(){
            $(this).next(".wand").dialog('open');
alert($(this).next(".wand").attr("class"));
                      });



wenn das undefinied ausspuckt dann lass den Selektor in der next Funktion weg.

JavaScript Code

 
1
2
3
4

$('.wand').dialog({autoOpen: false});
  $('.icon').click(function(){
            $(this).next().dialog('open');
                      });




und einige dich mal auf einfache oder doppelte Anführungszeichen ;-)

Similar threads

Tagging

Social bookmarks