Question

好的，所以我有一个对话框女巫有一个表格来编辑数据库记录，但相同的表格用于将记录添加到数据库我想添加一个删除按钮，但我只希望它显示删除按钮，如果attendance_id输入字段已设置为id

当对话框打开时，它设置了带有id的字段，然后我需要找到一种方法让这个按钮只显示是否有id设置

        $( "#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" );}}});

这是开放代码

        $( ".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

您可以使用$(selector).dialog('option','buttons', object)动态更改按钮 http://api.jqueryui.com/dialog/#option-buttons

在创建对话框之前，为按钮创建2个对象：

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

然后在打开之前更改按钮：

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


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

Answer 2

只需在AJAX成功回调中根据需要显示对话框。

    if(condition)
        $( "#dialog-AL" ).dialog({
        autoOpen: true, 
        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" );}}});
    else
        $( "#dialog-AL" ).dialog({
        autoOpen: true, 
        height: 530, 
        width: 650, 
        modal: true, 
        buttons: { 
            "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" );}}});

jquery ui对话框按钮隐藏并显示id isset

2 个答案: