Question

OK so i have a dialog box witch has a form to edit database records but the same form is used to add the records to the database i would like to add a delete button but i only want it to show the delete button if the attendance_id input field has been set with an id

when the dialog box open it sets this field with the id then i need to find a way for this button to only show if there is an id set

        $( "#dialog-AL" ).dialog({
        autoOpen: false, 
        height: 530, 
        width: 650, 
        modal: true, 
        buttons: { 

            "Delete": function() {
            var attendance_id = $('#attendance_id').val();
                //more code here
            },

            "Submit": function() { 
            $('#anual_leave_form').submit(); },
            Cancel: function() {                        
                    $('#c1').val("");                       
                    $('#c1').html("");                      
                    $('#from').val("");                     
                    $('#to').val("");                       
                    tinyMCE.get('leave').setContent("");    
                    $('#attendance_id').val("");
                    $('#note_id').val("");                      
            $( this ).dialog( "close" );}}});   

this is the open code

        $( ".edit" ).click(function() {
        var sub_id = $(this).attr("id");
        var sub_name = $(this).attr("name");
        var dataString = 'attendance_id=' + sub_id + '&note_id=' + sub_name + '&LabourHire=' + LabourHire;
            $.ajax({
                type: "POST",
                url: "<?php echo $process . 'process_editleave.php'; ?>",
                data: dataString,
                dataType: "html",
                cache: false,
                success: function(data) {
                    var result = $(data).filter('#d50').text();
                    $('#c1').val(result);
                    var result1 = $(data).filter('#d51').text();
                    $('#c1').html(result1);
                    var result2 = $(data).filter('#d52').text();
                    $('#from').val(result2);
                    var result3 = $(data).filter('#d53').text();
                    $('#to').val(result3);
                    var result4 = $(data).filter('#d54').text();
                    tinyMCE.get('leave').setContent(result4);
                    $('#attendance_id').val(sub_id);
                    $('#note_id').val(sub_name);
                    $( "#dialog-AL" ).dialog( "open" );                 
                },
                error: function() {
                alert('Error occured');
                }
            });
    });       

Answer 1

You can change the buttons dynamically using $(selector).dialog('option','buttons', object)
http://api.jqueryui.com/dialog/#option-buttons

Before your could create dialog create 2 objects for buttons:

var dialogButtons = {
    "Submit": function() { /*code*/
    },
    Cancel: function() {  /* code*/
    }
}    
var dialogDeleteButton = {
    "Delete": function() { /* code*/
    }
}

Then change the buttons just before opening:

var buttons;
if ($('#attendance_id').val() != '') {
    buttons = dialogButtons;
} else {
    buttons = $.extend({}, dialogDeleteButton, dialogButtons)
}


$( "#dialog-AL" ).dialog('option','buttons', buttons).dialog('open')