如何更新在对话框小部件中打开的 div？

Question

这是我的设置：

<td>
    <div style="width:100px;height:30px; background:#009814; border:medium solid; border-color:#fff" onclick="showPopup(this)"> </div>
    <div style="display:none" title="Indicators"><input type="checkbox"/> Indicators go here </div>
</td>

function showPopup(elem) {
    var el = $(elem);
    var div = $(el.siblings()[0]);
    var populDiv = div.show();
    var dialog = populDiv.dialog({
        closeOnEscape: true,
        beforeClose: function (event, ui) {
            //update div somehow
        }
    });
}

我正在打开一个包含隐藏内容 div 的对话框，并且 div 已从 td 中删除并放置在对话框中。我的问题是如何将它放回去并保留复选框 checked/unchecked?

Answer 1

解决方案有点棘手，因为您需要克隆原始 div，显示它，然后在关闭对话框之前用对话框内容替换它，然后再次隐藏它。

function showPopup(elem) {
    var orig = $($(elem).siblings()[0]);
    var populDiv = $('<div>').append(orig.clone().show());
    var dialog = populDiv.dialog({
        closeOnEscape: true,
        beforeClose: function(event, ui) {
            orig.replaceWith(populDiv.children().eq(0).hide());
        }
    });
}

演示： http://plnkr.co/edit/46Bn7Y1nRelghNPKMDkz?p=preview

Answer 2

您基本上需要删除隐藏的元素并将其移动到对话框中，关闭后在其原来的位置重新添加元素：

function showPopup(elem) {
  // retrieve the hidden element after the clicked div
  var el = $($(elem).siblings()[0]);
  // append it to the #dialog container, show the content and display the dialog()
  var dialog = $('#dialog').html('').append(el.show()).dialog({
    closeOnEscape: true,
    beforeClose: function (event, ui) {
        // hide the element again and re-add it behind the clickable element
        el.hide().insertAfter($(elem));
    }
  });
}

Fiddle: http://jsfiddle.net/Moonbird_IT/r6xu01wx/1/

如何更新在对话框小部件中打开的 div？

How to update div opened in a dialog widget?

javascript

jquery

jquery-ui