Диалог JQuery - НЕ ОТКРЫВАЕТСЯ во второй раз

На 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>

modal-dialog jquery-ui jquery-ui-dialog
person Winston    schedule 08.06.2011    source источник
comment
Возможный дубликат диалогового окна пользовательского интерфейса jQuery не открывается во второй раз   -  person RMalke    schedule 31.01.2016

Ответы (3)


arrow_upward
6
arrow_downward

Представьте себе этот 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'), чтобы скрыть этот диалог

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

person balexandre    schedule 08.06.2011

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

Когда отображается диалоговое окно, оно выпадает из потока разметки. Поэтому, когда вы звоните 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>
person Yuriy Rozhovetskiy    schedule 08.06.2011