0

I have this dialog I use multiple times with different content. All works great but at a certain point it fails to open.

I got this basic jsFiddle to explain what I'm trying to do in my project. Unlike at jsFiddle I can't get it to work.

Next are some code snippets from the original (broken) jQuery project.

/**
 * 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" );
    }
}

So the dialog I try to open in the else part of the if-statement doesn't do what I suspected it to do :-). The console.log DOES put 'else' in firebug console so I know we get past the if. I did try with checking for orderCount to be 0 instead of checking for an empty html var it gave the same result though.

At other forums/questions I found some stuff on why you should put the dialog element in a var. But the dialog works just fine in the rest of the project. Only in this case it fails to do it's job.

When I put if(false){...}else if(true){...} the dialog does open. ???!!!???

Any ideas? I would certainly appreciate all feedback on this one. Thanks!

Fixed it I decided to build a function in which the dialog gets initiated. Calling showDialog(Msg, button); again worked in all cases but not if I called it in the function where the order list is added to the DOM. The only other thing I could think of, after raging for another few hours, was to set a timeout. setTimeout(function () {showDialog(Msg, button)}, 400); .. Now it's all unicorns and rainbows ^^

Not sure why the timeout makes it work though.

4

0 回答 0