Dialog Buttons don't show on first click

[stevejacobsen]

I don't think this is specifically a paramquery issue but I'm posting it just in case it's a conflict in the paramquery css or something. I'm also posting this on stackoverflow. The problem is that the dialog buttons don't display on the first rendering of the dialog but they do on every subsequent time. In the fiddle if you click on the first row in the grid and then click on "Delete Service" you can see what it is doing.

http://jsfiddle.net/stevenljacobsen/5n6j8v8x/2/

// Delete a Service
function service_delete(rowIndx, grid) {
    grid.addClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 125,
        width: 400,
        modal: true,
        buttons: {
            "Delete this service": function () {
                var serviceid = grid.getRecId({rowIndx: rowIndx});
                $.ajax($.extend({}, ajaxObj, {
                    context: grid,
                    dataType: 'text',
                    url: "/utilities/ajax_delete_service.php",
                    data: {serviceid: serviceid},
                    success: function () {
                        $("#services_grid").pqGrid("refreshDataAndView");
                    },
                    error: function () {
                        this.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
                    }
                }));
                $(this).dialog("close");
            },
            "Cancel": function () {
                grid.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
                $(this).dialog("close");
            }
        }
    });
}

[stevejacobsen]

Still troubleshooting this. I removed all CSS that wasn't jquery ui, validated my html, re-arranged the loading of scripts as much as I could nothing changes. I have added a Hack to open the dialog when the grid finishes loading and then immediately closing it. This hides the problem for now but obviously not optimal.