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.

8
  • Do you have any errors? Mar 13, 2013 at 9:32
  • No none errors showing in firebug :( Mar 13, 2013 at 9:33
  • check out with this jsFiddle, just a minor change Mar 13, 2013 at 9:56
  • That didn't work for me. I updated $('#wizard_dialog') to the var in the whole project. And the dialog still works in other cases. But not for this one. Mar 13, 2013 at 10:28
  • Now it works... Added the solution above. Can anyone inform me on the 'why'-part ? Mar 13, 2013 at 15:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.