JQuery Dialog - не открывается второй раз

Question

В StackOverflow есть несколько сообщений на эту тему, но ни один из ответов не помог мне. Я использую элемент управления DataList, который заполняется SELECT через DataAdapter. Рекомендуется, чтобы был открыт только один экземпляр диалогового окна, но этот метод не может применяться

Структура HTML:

<asp:DataList ID="DataList" runat="server">
         <ItemStyle />
         <ItemTemplate>
             <a href="" class="link"/></a>
             <div class = "dialog" id="dynamicID" style="display:none">
             </ div>
         </ ItemTemplate>
     </ asp: DataList>

Код jQuery, который я использую:

<script language="javascript" type="text/javascript">
     $ (function () {
         $ (". link. ") click (function () {
             var id = '#' + ($ (this). siblings ('. dialog'). attr ('id'));
             $ (id). dialog ({
                 AutoOpen: false,
                 closeOnEscape: true,
                 resizable: false,
                 draggable: false,
                 modal: true,
                 width: 800,
                 height: 600,
                 overlay: {backgroundColor: "# 000", opacity: 0.5},
                 top: 20,
                 show: 'fade',
                 hide: 'fade',
                 buttons: {
                     "Close": function () {
                         $ (id). dialog ('close');
                     }
                 }
             });
             $ (id). dialog ('open');
         });
     });
</ script>

Answer 1

Представьте себе это HTML

<asp:DataList ID="dataList" runat="server">
    <ItemTemplate>
        <div class="row">
            <p>
                Result: <strong>
                    <%# Container.DataItem.ToString() %></strong></p>
            <a href="#" class="link" data-open="dialog_<%# Container.ItemIndex %>" />Click
            To Open</a>
            <div class="dialog" id="dialog_<%# Container.ItemIndex %>">
                <h2>
                    This is the text inside the dialog #
                    <%# Container.ItemIndex %>.</h2>
                <p>
                    &nbsp;
                </p>
            </div>
        </div>
    </ItemTemplate>
</asp:DataList>

с этим javascript

$(function () {

    // create dialogs
    $(".dialog").dialog({
        autoOpen: false,
        closeOnEscape: true,
        buttons: {
            "Close": function () {
                $(id).dialog('close');
            }
        }
    });

    // hook up the click event
    $(".link").bind("click", function () {
        // console.log($(this).parent());
        // open the dialog
        var dialogId = $(this).attr("data-open");
        $("#" + dialogId).dialog("open");

        return false;
    });

});

прекрасно работает.

Рабочий пример можно найти здесь

Что не так с вашим подходом?

вы создаетедиалоговое окно находится внутри метода, и его следует создавать внутри $(document).ready(), поэтому при каждом нажатии он создает диалоговое окно, но ... оно уже существует и все испортило.

При работе с диалоговыми окнами:

• Сначала вы создаете их, используя .dialog()
• Вам просто нужно использовать .dialog('open'), чтобы сделать этот диалог видимым
• И использовать .dialog('close'), чтобы скрыть этоdialog

по умолчанию jQuery UI CSS будет автоматически открывать диалоговые окна (display:none;), поэтому вам не нужно делать ничего подобного.

Answer 2

Обычно просто уничтожение диалога при закрытии решает проблему.

$( "#dialogbox" ).dialog({ 
    close: function (event, ui) {
        $(this).dialog("destroy");
    }
});

Answer 3

Когда отображается диалоговое окно, оно выпадает из потока разметки. Поэтому, когда вы звоните var id = '#' + ($ (this).siblings('.dialog').attr('id'));, вы ничего не получаете. Вы можете добавить идентификатор диалога в массив при первом его открытии, а затем, если результат $(this).siblings ('.dialog') пуст, вы можете получить идентификатор элемента диалога из массива.

<script type="text/javascript">
        var registeredDialogs = [];

        function registerDialog(link, dialogDiv) {
            var linkId = $(link).attr("id");
            if (!registeredDialogs[linkId])
                registeredDialogs[linkId] = dialogDiv;
        }

        function getDialog(link) {
            var linkId = $(link).attr("id");
            return this.registeredDialogs[linkId];
        }

        $(function () {
            $(".link").click(function () {

                var dialogDiv = $(this).siblings('.dialog');
                if (dialogDiv.length !== 0) {
                    registerDialog(link, dialogDiv);
                }
                else {
                    dialogDiv = this.getDialog(link);
                }

                dialogDiv.dialog({
                    AutoOpen: false,
                    closeOnEscape: true,
                    resizable: false,
                    draggable: false,
                    modal: true,
                    width: 800,
                    height: 600,
                    overlay: { backgroundColor: "# 000", opacity: 0.5 },
                    top: 20,
                    show: 'fade',
                    hide: 'fade',
                    buttons: {
                        "Close": function () {
                            $(id).dialog('close');
                        }
                    }
                });
                $(id).dialog('open');
            });
        });
    </script>