JavaScript jQuery, Dialog Link mehrmals benutzen

Chakky

Chakky

Member of Honour
Hallo HaBo,

ich hab gerade meine ersten Gehversuche (ok mehr kriechen zurzeit) mit jQuery.

Hab jetzt mal mir aus den Demo von jQuery was rausgesucht, wollte ein paar Divs per Drag and Drop durch das Browserfenster schieben und dann am Ende mit einen "Schließen link" das entsprechend ausblenden das Div.

Jetzt hab ich das Problem das mein gebauter Dialog auch das Div schließt aber nur das erste. Die anderen gehen einfach nicht, es öffnet sich nicht mal der Dialog.

Kann mir jemand auf die Beine helfen und mir verraten was falsch ist?

Kurze Erklärung:
Code: 
  <a href="#" id="close">Schliessen</a>
Ist mein Link der den Dialog öffnet, hab ich bei allen 3 Divs eingesetzt nur bei Div1 (Zettel1), öffnet sich auch der Dialog. Bei allen anderen nicht :/

Danke!



Code: 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>PINNWAND</title>
	<link rel="stylesheet" href="./css/jquery.ui.all.css">
	<script src="jquery-1.7.1.js"></script>
	<script src="./ui/jquery.ui.core.js"></script>
	<script src="./ui/jquery.ui.widget.js"></script>
	<script src="./ui/jquery.ui.mouse.js"></script>
	<script src="./ui/jquery.ui.draggable.js"></script>
        <script src="./ui/jquery.ui.button.js"></script>
	<script src="./ui/jquery.ui.draggable.js"></script>
	<script src="./ui/jquery.ui.position.js"></script>
	<script src="./ui/jquery.ui.dialog.js"></script>
      
	<link rel="stylesheet" href="./css/demos.css">
	<style>
	#zettel1, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#zettel1" ).draggable({ scroll: true, opacity: 0.7, cursor: "move"  });
                $( "#draggable2" ).draggable({ scroll: true, opacity: 0.7, cursor: "move"  });
                $( "#draggable3" ).draggable({ scroll: true, opacity: 0.7, cursor: "move"  });
                $("#dialog").dialog({
					autoOpen: false,
					width: 500,
                                        modal: false,
					buttons: {
						"Ja": function() {
                                                       $("#zettel1").hide();
                                                     // $("#draggable2").hide();
							$(this).dialog("close");
                                                                    },
						"Nein": function() {
							$(this).dialog("close");
						
                                                                     }
                                        }
				});

		$( "#close").click(function(){
                    $("#dialog").dialog('open');
                 
                });
         	
		
                             
	});

      
      
  



     
	</script>

    

</head>
<body>

<div class="demo">

<div id="dialog" title="Löschen?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Dieses Objekt wirklich löschen?</p>
</div>

<div id="zettel1" class="ui-widget-content">
	<p>Hier stehen viele hinweise</p>
        <a href="#" id="close">Schliessen</a>
        
        

</div>

    <div id="draggable2" class="ui-widget-content">
	<p>Hier stehen viele hinweise 2</p>
        <a href="#" id="close">Schliessen</a>
</div>

    <div id="draggable3" class="ui-widget-content">
	<p>Hier stehen viele hinweise 3</p>
        <a href="#" id="close">Schliessen</a>
</div>


<div style='height: 5000px; width: 1px;'></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
</div><!-- End demo-description -->

</body>
</html>
 
Die ID ist das Problem, eine ID darf nur einmal pro Seite ( oder im DOM) vorkommen. Du müsstest das ganze per CSS-Klasse lösen.

Beispiel:
HTML: 
<a href="#" class="close">Schliessen</a>

<script type="text/javascript">
[...]
$( "a.close").click(function(){
    $("#dialog").dialog('open');
 });
[...]
</script>
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben