Monat: Juli 2014

UI dialog verschiebt das Markup eines Dialogs: einfacher Workaround hier

2. Juli 2014 - JavaScript

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.