The modal dialog box does not work in Chrome / Explorer but works in Firefox

advertisements

I have the following modal dialog click function

 $("#foo").click(function(){$("#bar").dialog({

    width: 400,
    modal: true,
    resizable: false,
    buttons:{
            "Save": function(){
                        $.post('remote_foo.php', $('#waka').serialize(), function(data){
                    $('#list').html(data);})
                    $(this).dialog("close");
                    $('.dial').val('');
                    $('.url').val('http://');

                    },

            "cancel": function(){
                $(this).dialog("close");
            }
        }//end of buttons
    }).('open');//end of jquery dialog
})// end of click function

It works fine in firefox but to be honest i dont even think my click function is set up right.

1)Is this the proper way to open the dialog with a click. 2) is there a specific reason that this would not work in chrome/internet explorer? (This is the jquery ui)


No, this isn't how you should open the dialog. Take a look at this instead:

$(function () {

$("#foo").click(function(){
  $("#bar").dialog('open');
});

$("#bar").dialog({
    autoOpen: false,
    width: 400,
    modal: true,
    resizable: false,
    buttons:{
            "Save": function(){
                        $.post('remote_foo.php', $('#waka').serialize(), function(data){
                    $('#list').html(data);})
                    $(this).dialog("close");
                    $('.dial').val('');
                    $('.url').val('http://');

                    },

            "cancel": function(){
                $(this).dialog("close");
            }
        }//end of buttons
    }); // end of dialogInit

})// end of document ready

Basically, you were re-initializing your dialog with every click. Instead, initialize it once on document ready, and then open/close it with your click events.

The dialog setup call on a DOM object only needs to be called once to prepare that object for the various jQuery UI-related tasks. Once prepared, you can then just use .dialog('open') and .dialog('close') and the configuration for it will persist each time.