Multiple Dialoge! Es vergeht kein Tag ohne Frage :-)

[toetschi]

Hallo zusammen,

kein Tag vergeht ohne Frage. Bisher konntet ihr mir klasse helfen, ich würde mich freuen wenn es auch diesmal so wäre.

Folgende Javascript-Funktion habe ich definiert um einen Dialog aufzurufen:

function kundeOeffnen(id, anzeigename) {

	$('body').append('<div id="Kunde'+id+'" title="Kunde: '+ id +' Name: '+ anzeigename +'"></div>');
			alert("div layer gezeichnet");
	        $('#Kunde' + id).load('content/ajax/kundenData.php?id=' + id).dialog({
				modal:false, 
				width:600, 
				height:400,
				draggable:true,
				minWidth:600, 
				minHeight:300,  
				open: function(type,data) {
                // Remove from bottom of body and put it back into the tab's content
                //$(this).parent().appendTo('.panes div:first');
            	},
           		 close: function() {
                $(this).dialog('destroy');
                $('#Kunde'+id).remove();
            }
        });
				alert("dialog geöffnet");

//	$('.ui-dialog').addClass('ui-tabs')
//               .prepend($('#tenant_tabs' + id))
//               .draggable('option','handle','#tenant_tabs' + id); 
    };

Die aufgerufene showKunden.php gibt im wesentlichen den Inhalt des Dialogs wieder... allerdings: Es wird statt mit Titlebar mit Tabs gearbeitet.

Hierfür verwende ich:

CSS:

<style>

    #tenant_info<?php echo $_GET[id]; ?> { border:0; }
    #ui-tab-dialog-close<?php echo $_GET[id]; ?> { position:absolute; right:0; top:23px; }
    #ui-tab-dialog-close<?php echo $_GET[id]; ?> a { float:none; padding:0; }
	
    #tenant_info<?php echo $_GET[id]; ?> { border:0; }
    #ui-tab-dialog-close<?php echo $_GET[id]; ?> { position:absolute; right:0; top:23px; }
    #ui-tab-dialog-close<?php echo $_GET[id]; ?> a { float:none; padding:0; }
	
	.ui-dialog .ui-dialog-content, .ui-tabs { padding:0; }
    .ui-dialog-titlebar<?php echo $_GET[id]; ?> { display:none; }
</style>

Javascript:

$(function() {
	
   $('#tenant_info<?php echo $_GET[id]; ?>').tabs();
    			alert("tabs aktiviert");
                      
    //steal the close button
   $('#ui-tab-dialog-close<?php echo $_GET[id]; ?>').append($('a.ui-dialog-titlebar-close'));
   $('#ui-tab-dialog-close<?php echo $_GET[id]; ?>').append($('a.ui-dialog-titlebar-min'));
   $('#ui-tab-dialog-close<?php echo $_GET[id]; ?>').append($('a.ui-dialog-titlebar-rest'));
   $('#ui-tab-dialog-close<?php echo $_GET[id]; ?>').append($('a.ui-dialog-titlebar-max'));
   			alert("buttons gezeichnet");

    //move the tabs out of the content and make them draggable
    $('.ui-dialog').addClass('ui-tabs')
				alert("nach addclass");
    $('.ui-dialog').prepend($('#tenant_tabs<?php echo $_GET[id]; ?>'))
				alert("nach prepend");
    $('.ui-dialog').draggable('option','handle','#tenant_tabs<?php echo $_GET[id]; ?>'); 
				alert("nachdraggable");

    //switch the titlebar class
	$('.ui-dialog-titlebar').remove();
				alert("alte titlebar entfernt");

    //$('#tenant_tabs<?php echo $_GET[id]; ?>').addClass('ui-dialog-titlebar<?php echo $_GET[id]; ?>');	
	
					alert("neue klasse für titlebar hinzugefügt");

 
    });

HTML:

     <div id="tenant<?php echo $_GET[id]; ?>" title="<?php echo $_GET[id]; ?>">
    <div id="tenant_info<?php echo $_GET[id]; ?>">
        <ul id="tenant_tabs<?php echo $_GET[id]; ?>">
     
        <li><a href="#tenant_details<?php echo $_GET[id]; ?>">My Tenant</a></li>
        <li><a href="#tenant_events<?php echo $_GET[id]; ?>">Events</a></li>
        <li><a href="#tenant_jobs<?php echo $_GET[id]; ?>">Jobs</a></li>
        <li id="ui-tab-dialog-close<?php echo $_GET[id]; ?>"></li>
        </ul>
        <div id="tenant_content<?php echo $_GET[id]; ?>">
                <div id="tenant_details<?php echo $_GET[id]; ?>">
                
                
                </div>
                    <div id="tenant_events<?php echo $_GET[id]; ?>">
                    some events
                    </div>
                        <div id="tenant_jobs<?php echo $_GET[id]; ?>">
                        some jobs
                        </div>
    	</div>
    </div>
    </div>

Zum Problem #1: Wenn nun ein Dialog geöffnet und geschlossen wurde, und man öffnet den gleichen Dialog nochmals, erscheint die "Titlebar" (also die Tab-Reiter) zwei mal!

Zum Problem #2: Vermutlich hängt das mit Problem 1 zusammen, wenn nun ein Dialog geöffnet wurde und man einen zweiten dazu öffnen will, bekommt der erste Dialog eine zweite Titlebar (also Tab-Reiter) hinzu.

Wie bekomme ich dieses Problem gebacken? Seit stunden spiele ich daran rum!
Würde mich freuen wenn sich hier ein Spezialist findet der mir Hilfestellung geben kann.

Gruß

Thomas