在if语句中,jQuery对话框无法打开

时间:2013-03-13 09:27:18

标签: jquery jquery-ui jquery-ui-dialog

我有这个对话框,我多次使用不同的内容。一切都很好但在某个时刻它无法打开。

我得到了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); .. 现在它都是独角兽和彩虹^^

不知道为什么超时会使它工作。

0 个答案:

没有答案