Question

我有一个简单的按钮，其中id =“new_customer”。单击时，将打开一个 jQuery UI对话框，其中包含动态数据。单击对话框的自定义按钮“保存”时，内容将被发送到php处理程序（将内容存储到数据库中）。所以这很好。但是当我第二次这样做时，内容被发送到处理程序并存储到数据库中，但对话框没有关闭。当我单击未关闭对话框的保存按钮时，我收到错误消息“未捕获错误：在初始化之前无法在对话框上调用方法;尝试在控制台中调用方法'关闭'”。

$( "#new_customer" ).on( "click", function( event ) {
    event.preventDefault(event);
    $.ajax({
        type: "POST",
        url: "libraries/factory/ajax/customers_handler.php",
        data: "customer_action=new_customer", 
        success: function( data ) {
                // write data into dialog div
                $( "#customer-dialog" ).html( data );
                // create the dialog
                $( "#customer-dialog" ).dialog({    
                    title: "New Customer",
                    modal: true,
                    buttons: [{
                            text:   "save",
                            click:  function() {
                                $.ajax({
                                    type: "POST",
                                    url: "libraries/factory/ajax/customers_handler.php",
                                    data: $( "#customer_data_form" ).serialize() + "&customer_action=save_customer", 
                                    success: function( data ) {
                                        $( "#customer-dialog" ).dialog( "close" );
                                        $.ajax({
                                            type: "POST",
                                            url: "libraries/factory/ajax/customers_handler.php",
                                            data: "customer_action=load_customers_list", 
                                            success: function( data ) {
                                                $( "#customers_list_wrapper" ).html( data );
                                                createDataTable( "#customers_list" );
                                            }
                                        });

                                    },
                                    error: function( data ) {
                                        alert( data );
                                    },
                                    complete: function() {
                                        $( "#customer-dialog" ).dialog( "close" );
                                    }
                                });
                            }
                    }]
                });


        },
        error: function( data ) {
            alert( data );
        },
        complete: function() {

        }
    });


});

Answer 1

最后，我找到了解决方案。

我从保存按钮功能中删除了成功的东西。然后我添加了$（this）.dialog（“close”）;和$（this）.remove（）;在ajax请求之后。

$( "#customer-dialog" ).dialog({    
    title: "New Customer",
    modal: true,
    width: 600,
    height: 600,
    buttons: [{
        text:   "save",
        click:  function() {
            $.ajax({
                type: "POST",
                url: "libraries/factory/ajax/customers_handler.php",
                data: $( "#customer_data_form" ).serialize() + "&customer_action=save_customer", 
                success: function( data ) {
                    console.log( data );
                    $( "#customer-dialog" ).html( "" );
                    $( "#customer-dialog" ).dialog( "close" );
                    $.ajax({
                        type: "POST",
                        url: "libraries/factory/ajax/customers_handler.php",
                        data: "customer_action=load_customers_list", 
                        success: function( data ) {
                            $( "#customers_list_wrapper" ).html( data );
                            createDataTable( "#customers_list" );
                        }
                    });
                },
                error: function( data ) {
                    alert( data );
                }
            });
            $( this ).dialog( "close" );
            $( this ).remove();
        }
    }]
});

重新打开jQuery UI对话框并多次发送数据

1 个答案: