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:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13

<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:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(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:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

     <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