このダイアログは、さまざまなコンテンツで複数回使用しています。すべてうまく機能しますが、ある時点で開くことができません。
プロジェクトで何をしようとしているのかを説明するために、この基本的な 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 は firebug コンソールに 'else' を記録するので、if を通過したことがわかります。空のhtml変数をチェックする代わりに、orderCountが0であることをチェックしてみましたが、同じ結果が得られました。
他のフォーラム/質問で、なぜダイアログ要素を変数に入れる必要があるのか についていくつか見つけました。しかし、ダイアログはプロジェクトの残りの部分で問題なく機能します。この場合にのみ、その仕事をすることができません。
if(false){...}else if(true){...}ダイアログを入れると開きます。???!!!!???
何か案は？これに関するすべてのフィードバックに感謝します。ありがとう！
ダイアログが開始される関数を構築することにしたのを修正しました。再度呼び出すshowDialog(Msg, button);ことはすべてのケースで機能しましたが、注文リストが DOM に追加される関数で呼び出した場合は機能しませんでした。さらに数時間激怒した後、私が考えることができた唯一の他のことは、タイムアウトを設定することでした. setTimeout(function () {showDialog(Msg, button)}, 400);.. 今はユニコーンと虹です^^
ただし、タイムアウトによって機能する理由がわかりません。