jquery.Dialog?

TomTaylor · 21. November 2010

Hi,

ich versuche gerade JQuery zu verstehen und stocke beim Dialog. Ich habe folgenden Dialog gebastelt:

Code:

<div class="dialogs" id="dialog_daten_1_div" title="Titel"><form><input type="text" name="feldx" value=""> <input type="text" name="feldy" value=""></form></div>

Jetzt möchte ich beim schließen des Dialogs an alle Input-Elemente heran. Das versuche ich so:

Code:

...
close: function(event, ui) {
var data = $(this.id).find('form').eq(0).(':input').serialize();
alert(data);    
...						}

Jedoch bekomme ich hier immer einen Fehler. Wie komme ich ausgehend von der ID des Dialogs an die dort drin enthaltenen Elemente?

CPoly · 21. November 2010

Dein Aufruf der jQuery-Funktion macht keinen Sinn.
Zwei Möglichkeiten hast du:

Javascript:

//So nicht!
$(this.id)

//Sondern
//Das DOM-Element als Parameter (empfohlen!)
$(this)
//oder ID-Selektor
$("#"+this.id)

TomTaylor · 21. November 2010

Danke,

allerdings liefert das:
alert($(this).find('form').eq(0).(':input').serialize());
ebenso einen Fehler.

CPoly · 21. November 2010

Naja, was ist denn DAS:

.(':input')

ist mir eben nicht aufgefallen.

So ist es richtig:

Javascript:

$(this).find("form").serialize()

Edit: Übrigens kann es nicht schaden, wenn du uns beim nächsten mal die Fehlermeldung nennst.

TomTaylor · 21. November 2010

Ups, ich werde mich bessern.

Vielen Dank für die Hilfe. Die Fehlermeldung ist nun verschwunden. Allerdings ist das alert-Fenster leer. Es scheint fast so als würde er das form bzw. die input Felder nicht finden.

Hier noch einmal mein kompletter Dialog-Code:

Code:

$('.dialogs').dialog({
   autoOpen: false,
   show: 'blind',
   hide: 'explode',
   buttons: {'Speichern': function() { $(this).dialog('close'); }},
   close: function(event, ui) { alert($(this).find('form').serialize());}
});

In die beiden Textfelder habe ich selbstverständlich etwas eingetragen.

CPoly · 21. November 2010

Hier mal ein voll funktionierendes Beispiel mit deinem Code.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
	
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="dialogs" title="Titel">
		<form>
			<input type="text" name="feldx" value="">
			<input type="text" name="feldy" value="">
		</form>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			$('.dialogs').dialog({
				autoOpen: true,
				show: 'blind',
				hide: 'explode',
				buttons: {'Speichern': function() { $(this).dialog('close'); }},
				close: function(event, ui) { alert($(this).find('form').serialize());}
			});
		});
	/* ]]> */
	</script>
</body>

</html>

TomTaylor · 22. November 2010

Danke funktioniert perfekt.

Ich hatte die Funktion nicht in der "$(document).ready(function(){" untergebracht.

Jetzt habe ich in dem Zusammenhang jedch ein anderes Problem.
Vielleicht kann hier auch jemand einen Blick drauf werfen. Ich habe den Dialog jetzt in mehrere Bereiche - mittels divs - unterteilt und möchte einzelne divs mittels js verstecken.

Hier mal der Code:

Code:

<script type="text/javascript">
function initDialogs(){
   var rows = $('#fieldset tr');
   var spalten = false;
   var zeilen = false;
   var daten = false;
   for (var i=0; i<rows.length; i++) {
     if (rows[i].id=='felder'){
     }else if (rows[i].id=='spalten'){
        spalten=true;
        zeilen=false;
        daten=false;
      }else if (rows[i].id=='zeilen'){
        zeilen=true;
        spalten=false;
        daten=false;´
      }else if (rows[i].id=='daten'){
        zeilen=false;
        spalten=false;
        daten=true;
      }else{
        var splitid = rows[i].id.split('_');
        alert('#dialog_'+splitid[1]+'_div > .daten');	
        $('#dialog_'+splitid[1]+'_div > .daten').css('display', 'none');
      }              		
  }
}
</script>

<script type="text/javascript">
$(document).ready(function() {
   initDialogs();
   ...
}
</script>

<!-- Hier der Dialog -->
<div class="dialogs" id="dialog_EUR_div" title="EUR"><form><div class="daten"><strong>Daten</strong><br><div>Einheit:<br><input type="text" name="settings_EUR_einheit" value=""></div></div><div class="filter"><strong>Filter</strong><br><div><input type="text"size="20" name="settings_EUR_filter[]" value=""><br><input type="button" value="noch eins" onclick="clone_this(this)"></div></div></form></div>

<!-- Hier die Tabelle -->
<table id="fieldset"><tr id="felder"><td><b>Felder</b></td></tr><tr id="id_A"><td>A</td></tr><tr id="daten"><td><b>Daten</b></td></tr><tr id="id_EUR"><td>EUR</td><td><img src="/images/icons/dialog.png" alt="" title="Einstellungen" class="opendialog" id="dialog_EUR" ></td></tr></table>

Kurz zur Erläuterung. Das Script initDialog durchläuft die Tabellenzeilen und prüft unter welchem Punkt (z.B. felder, daten) der Dialog steht. Steht dieser unter daten soll die Klasse daten im Dialog mit der id der Zeile hier #dialog_EUR_div ausgeblendet werden.

Zwei Punkte sind mit im IE aufgefallen. Bei laden der Internetseite wird initDialogs doppelt ausgeführt. Ich bekomme die alert-Boxen doppelt angezeigt. Im Firefox passiert dies nicht. Daneben erhalte ich im IE nachdem ich beim laden der Seite alle Boxen mit OK weggeklickt habe folgenden Fehler:

Meldung: 'q' ist Null oder kein Objekt
Zeile: 28
Zeichen: 362
Code: 0
URI: ./libs/jquery/jquery-1.4.3.min.js

Im Firebug erhalte ich diesen nicht.
Kommentiere ich die alert-Box aus, so wird auch kein Fehler mehr angezeigt. In beiden Browsern wird jedoch die Klasse daten im Dialog nicht versteckt.

CPoly · 22. November 2010

Auf Anhieb fällt mir nichts auf, aber nimm mal die dev-Version von jQuery (http://code.jquery.com/jquery-1.4.4.js), dann bekommst du vielleicht eine bessere Fehlermeldung als "q", weil es nicht minified ist. Ich bin im Moment sowieso dabei, mir den jQuery Core genauer an zugucken.

Aber mir sind noch andere Sachen aufgefallen, welche aber nicht wirklich falsch sind.

1.Die for Schleife funktioniert zwar, aber jQuery bietet dafür die "each()" Funktion. Denn es ist ja kein Array, sondern ein jQuery-Objekt.

Javascript:

rows.each(function(index, element) {
	alert(element.id);
});

2.

Javascript:

foobar.css('display', 'none');
//entspricht (kürzer und intuitiver)
foobar.hide();

3.
Du Initialisiert oben die drei Variablen als "false", dann kannst du dir es sparen je zwei in den if-Blöcke nochmal false zu setzen. Das spart auch Bytes und erhöht die Lesbarkeit.

jquery.Dialog?

TomTaylor

Grünschnabel

CPoly

Mitglied Weizenbier

TomTaylor

Grünschnabel

CPoly

Mitglied Weizenbier

TomTaylor

Grünschnabel

CPoly

Mitglied Weizenbier

TomTaylor

Grünschnabel

CPoly

Mitglied Weizenbier

Neue Beiträge