La finestra di dialogo dell'interfaccia utente jQuery si comporta in modo imprevedibile

Question

La finestra di dialogo dell'interfaccia utente jQuery mi guida su per le pareti. Per il meglio della mia comprensione, ecco come funziona:

Quando si esegue $('#myDialog').dialog({...}), copia l'elemento #myDialog e lo sposta all'interno di questa bizzarra funzione di widget nella parte inferiore del tag del corpo. Questo è pazzesco! Duplicherà eventualmente elementi DOM unici (con ID) quando lo fa.

Quindi quello che sto cercando di fare è comportarsi in modo prevedibile quando aggiorno l'HTML dell'elemento originale (#myDialog). Se faccio questo in modo dinamico, a volte la finestra non si apre più:

http://jsfiddle.net/t67y7/3/

O, talvolta, la finestra si apre con il vecchio HTML (perché è memorizzato nella cache nella parte inferiore della pagina in questo modo). Cosa succede con questo?

Answer 1

Perché non basta chiamare $ ("# dialogId") finestra di dialogo ("distruggere") sulla funzione di chiusura, in questo modo:.

$("#dialogId").dialog({ 
    close: function() { 
     $(this).dialog("destroy"); 
     // you may want empty content after close if you use AJAX request to get content for dialog 
     $(this).html(''); 
    } 
} 

La distruggere funzione rimuove il codice decorato, e la vostra l'elemento di dialogo non sarà duplicato la prossima volta che mostrerai la finestra di dialogo.

Ho aggiunto un codice di esempio a jsfiddle.net example.

Answer 2

Dal momento che nessuno sembra avere alcuna idea di come domare questo dialogo bestiale, ecco la cosa migliore che abbia mai inventato. Accetterò qualsiasi alternativa superiore.

var original = $('#dialogId')[0]; 
var clone = $(original).clone().attr('id', 'dialogIdClone'); 
var saveHtml = $(original).html(); 
$(original).html(''); 
$(clone).dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 
     $(clone).remove(); 
     $(original).html(saveHtml); 
    } 
}); 

Lo scopo di questa follia è mantenere l'HTML della finestra di dialogo originale univoco nella pagina. Non sono proprio sicuro del perché questo non possa essere il comportamento predefinito della finestra di dialogo ... In realtà, non capisco perché l'interfaccia utente di jQuery abbia bisogno di clonare l'HTML per cominciare.

Answer 3

So che questo è stato registrato per un po ', ma un modo meno esteso di gestire questo problema potrebbe essere:

$('#your-dialog').dialog({ 
    ... // other options 
    open: function(){ 
     // add any dynamic behavior you need to the dialog here 
    }, 
    close: function(){ 

    } 
}); 
$('#your-dialog').remove(); 

Ciò è dovuto al dialogo widget di vuole essere in grado di controllare la visualizzazione e andrà a capo il contenuto interno della finestra di dialogo originale quindi ne crea uno nuovo nella parte inferiore del corpo.

Lo svantaggio di questa soluzione è che le finestre di dialogo devono essere inizializzate per garantire che tutto il widget della libreria di terze parti funzioni correttamente.

Answer 4

È necessario svuotare la finestra di dialogo prima di aprirla.

$("#dialogId").html(''); 
$("#dialogId").dialog({ 
close: function() { 
    $(this).dialog("destroy"); 
} 
}