Диалог jquery ui открывается только один раз

У меня есть кнопка, которая открывает диалоговое окно при нажатии. В диалоговом окне отображается div, который был скрыт

После того, как я закрою диалоговое окно, щелкнув значок X, диалоговое окно не может быть открыто снова.


person flybywire    schedule 09.11.2009    source источник
comment
почтовый код или ссылка... :-(   -  person beggs    schedule 09.11.2009
comment
Какой код вы используете, чтобы скрыть и показать диалог?   -  person Bryan McLemore    schedule 09.11.2009
comment
некоторый код был бы потрясающим. как правило, не забудьте убедиться, что вы не вызываете никаких ошибок при закрытии.   -  person helloandre    schedule 09.11.2009


Ответы (3)


Скотт Гонсалес (из команды пользовательского интерфейса jQuery) рассказывает о причине, по которой многие люди сталкиваются с этой проблемой при начале работы с пользовательским интерфейсом jQuery в недавнем сообщении в блоге: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Выдержка:

Проблема, с которой пользователи часто сталкиваются с диалогами, заключается в том, что они пытаются создать новый диалог каждый раз, когда пользователь выполняет какое-либо действие (обычно щелкает ссылку или кнопку). Это понятная ошибка, потому что на первый взгляд кажется, что вызов .dialog() для элемента — это то, что вызывает открытие диалогового окна. На самом деле происходит то, что создается новый экземпляр диалога, а затем этот экземпляр открывается сразу после создания экземпляра. Причина, по которой открывается диалоговое окно, заключается в том, что диалоговые окна имеют параметр autoOpen, который по умолчанию имеет значение true. Таким образом, когда пользователь дважды вызывает .dialog() для элемента, второй вызов игнорируется, поскольку диалоговое окно уже создано для этого элемента.

Решение:

Простое решение этой проблемы состоит в том, чтобы создать экземпляр диалога с autoOpen, установленным в false, а затем вызвать .dialog('open') в обработчике событий.

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#opener').click(function() {
        $dialog.dialog('open');
    });
});
person Alex Sexton    schedule 09.11.2009
comment
Что произойдет, если диалог инициализируется и отображается в событии? Есть ли риск производительности или это просто плохая практика? - person Guillaume Renoult; 17.06.2015
comment
не работает, может быть, это просто плохой дизайн этого диалога? - person jpganz18; 13.06.2017

Вы используете диалоговое окно пользовательского интерфейса? Вы должны опубликовать некоторый код, чтобы мы могли увидеть, что вызывает вашу проблему. Но вот предположение (потому что я недавно сделал ту же ошибку). При использовании диалога пользовательского интерфейса вам нужно инициализировать диалог только один раз.

 $(document).ready(function() {
   $('#dialog').dialog({
     autoOpen:false,
     modal:'true',
     width:450,
     height:550
  });
 $('#MyButton').click(openDialog);    

});

Этот код инициализирует диалог, но не показывает его. Затем функция openDialog откроет диалоговое окно при нажатии кнопки MyButton.

   var openDialog = function(){

       $('#dialog').load('loadurl.php');//load with AJAX

      //optionally change options each time it is clicked
       $('#dialog').dialog('option', 'buttons',{
          "Cancel":function(){
             $('#dialog').dialog('close');
          }
      });

     //actually open the dialog
     $('#dialog').dialog('open');

};
person Vincent Ramdhanie    schedule 09.11.2009

В дополнение к принятому ответу я хотел бы добавить, что вам нужно обратить внимание при использовании этого в панели обновлений asp.net. Если вы нажмете кнопку, произойдет обратная передача, всплывающее окно откроется, но не откроется во второй раз из-за произошедшей обратной передачи. Поэтому вы должны убедиться, что кнопка, которую вы используете для открытия всплывающего окна, не выполняет обратную передачу. то есть:

<asp:LinkButton ID="btn1" runat="server" OnClientClick="return false;">Click me</asp:LinkButton>
person user2315697    schedule 17.10.2016