jQuery UI: dialog not closing consistently, height not being set properly

[arenaninja]

Hey everyone. I've a page for user management which loads webpages onto a dialog window depending on $_GET requests and updates a MySQL database via $.post. For now, my troubles are that the dialog box does not close consistently (e.g.: when I hit the 'Cancel' button, though it will always close if I hit the 'x' button) and the height not being set properly (though it's being set in the same manner as the width). My code is below:

$(document).ready(function(){
    function showDialog(qs,processFile,h,w)
    {
        var tag=$("<div id='equipfrm'></div>");
        $.ajax({
            type:"GET",
            url:processFile,
            data:qs,
            success: function(data){
                tag.html(data).dialog({
                    modal:true,
                    height:h+"%",
                    width:w+"%",
                    buttons:{
                        "Update":function(){
                            var string = $("#userinstfrm").serialize();
                            $.post(processFile, string,function(){$("#equipfrm").dialog("close");});
                        },
                        "Cancel":function(){
                            $(this).dialog("close");
                        }
                    }
                }).dialog('open');
            }
        });
    }
    $(".editequip").click(function(event){
        event.preventDefault();
        var processFile = "userinstruments.php";
        var qs = $(this).attr("href").replace(/.+?\?(.*)$/, "$1"); // get query string
        var height = "35";
        var width = "35";
        showDialog(qs,processFile,height,width);
    });
    $(".editpmt").click(function(event){
        event.preventDefault();
        var processFile="authprofiles.php";
        var qs = $(this).attr("href").replace(/.+?\?(.*)$/, "$1"); // get query string
        var height = "70";
        var width = "70";
        showDialog(qs,processFile,height,width);
    })
})

I'm using FireFox+FireBug to debug this. After multiple opening/closing of modal window, FireBug shows the DOM as:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 70%; top: 279.5px; left: 281.5px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-equipfrm">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 35%; top: 279.5px; left: 614.5px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-equipfrm">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; z-index: 1004; outline: 0px none; position: absolute; height: auto; width: 35%; top: 279.5px; left: 614.5px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-equipfrm">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; z-index: 1004; outline: 0px none; position: absolute; height: 381.533px; width: 1284.53px; top: 279px; left: 281px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-equipfrm">

As you can see, the dialog isn't being properly removed from the DOM (a huge issue, since this could result in potential disaster when interpreting POST data), and the height isn't being set properly (I prefer percentages to account for different monitor sizes).

 

Any help is greatly appreciated.

[arenaninja]

Update: my google-fu has revealed that

$(this).dialog('destroy').remove()

will close and destroy the dialog box properly. However, I'm still looking to set the height as a percent value.

[arenaninja]

I've hard-coded the height and width... now I'm having issues with the window closing properly. My code is currently:

$(document).ready(function(){
    function showDialog(qs,processFile,h,w,form)
    {
        var tag=$("<div id='userfrm'></div>");
        $.ajax({
            type:"GET",
            url:processFile,
            data:qs,
            success: function(data){
                tag.html(data).dialog({
                    height:h,
                    width:w,
                    modal:true,
                    buttons:{
                        "Update":function(){
                            var string = $("#"+form).serialize();
                            $.post(processFile, string,function(){$(this).dialog('close');});
                        },
                        "Cancel":function(){
                            $(this).dialog('close');
                        }
                    },
                    close:function(){
                        $(this).dialog('destroy').remove();
                    }
                }).dialog('open');
            }
        });
    }
    $(".editequip").click(function(event){
        event.preventDefault();
        var processFile = "userinstruments.php";
        var qs = $(this).attr("href").replace(/.+?\?(.*)$/, "$1"); // get query string
        var height = "405";
        var width = "781";
        var form= "userinstfrm";
        showDialog(qs,processFile,height,width,form);
    });
    $(".editpmt").click(function(event){
        event.preventDefault();
        var processFile="authprofiles.php";
        var qs = $(this).attr("href").replace(/.+?\?(.*)$/, "$1"); // get query string
        var height = "600";
        var width = "1300";
        var form = "authprof";
        showDialog(qs,processFile,height,width,form);
    });
});

All dialogs from ".editequip" close perfectly. All the ones from ".editpmt" aren't closing with the cancel button and the DOM in FireBug flashes red for an instant (it's too fast and I can't catch why) though it then displays normally.

UPDATE: Figured it out. I have a PHP file that includes trivial information -- which css files to include, define the doctype, etc. Turns out that this duplicate doctype was causing the error. Once I removed that file from being included by the page given by ".editpmt" it worked.

[arenaninja]

Ok... I am almost there. I'm having issues with the 'update' button:

        var tag=$("<div id='userfrm'></div>");
        $.ajax({
            type:"GET",
            url:processFile,
            data:qs,
            success: function(data){
                tag.html(data).dialog({
                    height:h, width:w, modal:true,
                    buttons:{
                        "Update":function(){
                            var string = $("#"+form).serialize();
                            $.post(processFile, string,function(){
                                $(this).dialog('close');
                            });
                        },
                        "Cancel":function(){
                            $(this).dialog('close');
                        }
                    },
                    close:function(){
                        $(this).dialog('destroy').remove();
                    }
                }).dialog('open');
            }
        });

Now, when I update, the back-end works, but I'm left with the same dialog window. It isn't closing and it doesn't update its content (there is a notification sent from server, in the form of an html string enclosed in a <p></p>, notifying the user that the request went through). How do I either: a) update the dialog window with the server's response b) close the window (I'm fine with either, tbh. Option a) is probably better in terms of thoroughness)