我有这个对话框,我多次使用不同的内容。一切都很好但在某个时刻它无法打开。
我得到了basic jsFiddle来解释我在项目中要做的事情。 与jsFiddle不同,我无法让它发挥作用。
接下来是原始(损坏的)jQuery项目的一些代码片段。
/**
* Enable the JQuery dialog
* (#wizard_dialog)
*/
$('#wizard_dialog').dialog({
autoOpen: false,
resizable: false,
modal: true,
dialogClass: "no-close",
open: function() {
$('.ui-dialog-buttonpane').find('button:contains("Annuleren")').addClass('cancelButtonClass');
$('.ui-dialog-buttonpane').find('button:contains("Verwijderen")').addClass('deleteButtonClass');
$('.ui-dialog :button').blur(); // Because it is dangerous to put focus on 'OK' button
$('.ui-widget-overlay').css('position', 'fixed'); // Fixing overlay (else in wrong position?)
if ($(document).height() > $(window).height()) {
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
$('html').addClass('noscroll').css('top',-scrollTop); // Prevent scroll without hiding the bar (thus preventing page to shift)
}
},
close: function() {
$('.ui-widget-overlay').css('position', 'absolute'); // Brake overlay again
var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll'); // Allow scrolling again
$('html,body').scrollTop(-scrollTop);
$('#wizard_dialog').html('');
}
});
/**
* Builds the order list in #step_five
*/
function buildOrderList(data) {
// delete all orders first
$('#orderList').empty();
var html = '';
var orderCount = 0;
$.each(data.wizard, function(key,val) {
// Set some vars
// Set html for each order
orderCount++;
});
//console.log(newCount);
// There are orders to show
if(html != '') {
$('#orderList').append(html);
// Set total price
$('#totOrderPrice').html('€ '+calcTotal());
console.log('!=0 ??');
/**
* onClick [id^=delete_]
* this works fine, so deleteOrder() function is not included
*/
$(document).off('click', '[id^=delete_]').on('click', '[id^=delete_]', function(e) {
var id = $(this).attr('id').split('_');
id = id[1];
deleteOrder(id, data);
});
}
// OrderList is empty
else {
// Display message in dialog
console.log('else');
var Msg = 'De bestelling is volledig verwijderd.';
$('#wizard_dialog').append(Msg);
$('#wizard_dialog').dialog('option', 'width', 500);
$('#wizard_dialog').dialog('option', 'buttons', [
{ text: "OK",
click: function() {
// TODO: Reset wizard
// Go to step 1
stepHopper('five','one'); // FYI this function works fine..
$(this).dialog("close");
$(this).html('');
}
}
] );
$( "#wizard_dialog" ).dialog( "open" );
}
}
因此我试图在if语句的else
部分打开的对话框不能完成我怀疑它做的事情:-)。 console.log将'else'放在firebug控制台中,所以我知道我们已经过了if。
我确实尝试检查orderCount为0而不是检查一个空的html var它虽然给出了相同的结果。
在其他论坛/问题中,我发现了一些关于为什么要将对话框元素放在var中的内容。但是对话框在项目的其余部分工作得很好。只有在这种情况下它才能完成它的工作。
当我放if(false){...}else if(true){...}
时,对话框确实打开了。 ??? !!! ???
有什么想法吗?我当然感谢所有关于这一点的反馈。谢谢!
修正了
我决定构建一个启动对话框的函数。在所有情况下再次调用showDialog(Msg, button);
但是如果我在将顺序列表添加到DOM的函数中调用它,则不会。在经过几个小时的肆虐之后,我能想到的另一件事就是设置超时。 setTimeout(function () {showDialog(Msg, button)}, 400);
..
现在它都是独角兽和彩虹^^
不知道为什么超时会使它工作。