У меня проблема с диалоговым окном jquery-ui. Проблема заключается в том, что когда я закрываю диалоговое окно, а затем я нажимаю на ссылку, которая его запускает, она не всплывает, если я не обновляю страницу. Как я могу вызвать диалоговое окно, не обновляя фактическую страницу. Посмотрите:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Спасибо
Привет, ребята, мне удалось это решить.
Я использовал функцию destroy вместо close (это не имеет никакого смысла), но это сработало!
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
На самом деле вы должны использовать $("#terms").dialog({ autoOpen: false });
для его инициализации.
Затем вы можете использовать $('#terms').dialog('open');
, чтобы открыть диалог, и $('#terms').dialog('close');
, чтобы закрыть его.
dialog
предназначена для инициализации, отображения и скрытия, имела для меня смысл. Благодарю.
в последней строке, не используйте $(this).remove()
вместо $(this).hide()
.
РЕДАКТИРОВАТЬ: Чтобы уточнить, при закрытии события click вы удаляете div #terms
из DOM, поэтому его не возвращают. Вам просто нужно скрыть это.
Я считаю, что вы можете только инициализировать диалог один раз. Приведенный выше пример пытается инициализировать диалог каждый раз, когда нажимается #terms. Это вызовет проблемы. Вместо этого инициализация должна происходить вне события щелчка. Вероятно, ваш пример должен выглядеть примерно так:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
Я думаю, что как только вы это очистите, он должен исправить описанную вами проблему "откройте ссылку".
Это супер старый поток, но поскольку ответ даже говорит: "Это не имеет никакого смысла", я думал, что добавлю ответ...
В исходном сообщении используется $(this).remove(); в обработчике закрытия это фактически удалит диалог div из DOM. Попытка инициализировать диалог снова не будет работать, потому что div был удален.
Использование $(this).dialog('destroy') вызывает метод destroy, определенный в объекте диалога, который не удаляет его из DOM.
Из документации:
уничтожить()
Полностью удаляет функциональность диалога. Это вернет элемент обратно в состояние → pre-init. Этот метод не принимает никаких аргументов.
Тем не менее, только уничтожьте или удалите поближе, если у вас есть веские причины.
<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>
Для меня этот подход работает:
Диалог может быть закрыт нажатием кнопки X в диалоговом окне или нажатием "Bewaren". Я добавляю (произвольный) идентификатор, потому что мне нужно убедиться, что каждый бит html, добавленный в dom, удаляется впоследствии.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});
$(this).dialog('destroy');
работает!
У меня была та же проблема с диалоговым окном jquery-ui overlay - он работал бы только один раз, а затем останавливался, если я не перезагружу страницу. Я нашел ответ на одном из своих примеров -
Несколько накладок на одной странице
flowplayer_tools_multiple_open_close
- Кто бы это сделал, правильно?:-) -
важная настройка оказалась
oneInstance: false
Итак, теперь у меня это так:
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
и все работает просто отлично
надеюсь, что это поможет кому-то
О.
Я использую диалоговое окно в качестве браузера и загрузчика диалогового окна, после чего переписываю код, подобный этому
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
все работает отлично.
.close() является общим и может использоваться в отношении большего количества объектов..dialog('close') можно использовать только с диалогами
В документации jQuery есть ссылка на эту статью 'Основное использование диалогового окна jQuery UI' что объясняет эту ситуацию и как ее разрешать.