Man hat einen mit display: hidden vesteckten Dialog auf der Seite und kann ihn aber nur einmal aufrufen. Der Grund dafür ist: UI dialog verschiebt das Markup beim Aufruf an eine andere Stelle.
English Summary: A second call to a hidden dialog on your page may fail. The reason is, that UI dialog moves the markup to another location.
Beispiel
HTML
<div class='product'> <!-- product 1--> ... <a href='#' class='description_link'>description</a> <div class='description_markup'> <!-- hidden dialog 1 --> .. .. </div> </div> <div class='product'> <!-- product 2--> ... <a href='#' class='description_link'>description</a> <div class='description_markup'> <!-- hidden dialog 2 --> .. .. </div> </div> ...
JS
jQuery(document).ready(
function() {
jQuery('.description_link').click( function(e) {
e.preventDefault();
jQuery(this)
.next('.description_markup')
.dialog({
...
buttons: {
'Close': function() {
jQuery(this).dialog('close')
}
}
...
Nachdem der Dialog geschlossen wurde, funktioniert .next(..) nicht mehr, weil ‚description_markup‘ jetzt woanders auf der Seite steht.
Workaround:
jQuery(this)
.next('.description_markup')
.clone()
.dialog({
...
buttons: {
'Close': function() {
jQuery(this).dialog('destroy').remove()
}
}
Der Dialog wird mit einem Duplikat gestartet und das Duplikat beim Schließen des Dialogs gelöscht.
