jquery - 如何在每次关闭模态窗口时删除SimpleModal中的数据

Question

我使用 Eric Martin 的 SimpleModal 插件 1.4.1 和 JQuery 1.4.2 在模式窗口中显示基本表单。

该表单有 2 个 JQuery UI Datpicker 元素。

一切都按预期进行(我认为)。当用户将焦点放在日期选择器文本框上时，日期选择器将显示其日历。当用户单击“取消”按钮时，模式消失，并且 Datepicker 元素中保存的值被隐藏。这就是问题所在。

每当窗口因提交表单或单击取消按钮而关闭时，我需要模式窗口“忘记”它包含的所有表单值，而不仅仅是隐藏它们。如果有必要，我不介意是否必须以编程方式执行此操作。

我当前的 SimpleModal 代码如下所示:

$('#NewDeliverable').click( function() {
            $("#DeliverableFormContainer").modal({onOpen: function (dialog) {
                dialog.overlay.fadeIn('slow', function () {
                    dialog.data.hide();
                    dialog.container.fadeIn('slow', function () {
                        dialog.data.slideDown('slow');
                    });
                });

编辑感谢@Josiah Ruddell 的帮助。以下是其他遇到此问题的人的完整工作代码:

$('#NewDeliverable').click( function() 
        {
            $("#DeliverableFormContainer").modal({ 
                onOpen: function (dialog) 
                {
                    dialog.overlay.fadeIn('slow', function () 
                    {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function () 
                        {
                            dialog.data.slideDown('slow');
                        });
                    });
                },
                onClose: function(dialog)
                {
                    dialog.data.find(':input').each(function () 
                    {
                        switch (this.type) 
                        {
                            case 'password':
                                $(this).val('');
                                break;
                            case 'select-multiple':
                            case 'select-one':
                                $(this).val(-1);
                                break;
                            case 'text':
                            case 'textarea':
                                $(this).val('');
                                break;
                            case 'checkbox':
                            case 'radio':
                                this.checked = false;
                        }
                    });

                    $.modal.close(); // must call this!

                }, persist: true
            });
        });


            }});
        });

Answer 1

添加一个清除模态数据的 onclose 回调。您可以轻松地将其制作为名为clear form 的 jquery 插件。

$("#DeliverableFormContainer").modal({
    persist: true, // don't clone the data
    onOpen: function (){ /* code */ },
    onClose: function(dialog){
        dialog.data.find(':input').each(function () {
            if(this.type.match(/password|text|textarea/))
                $(this).val('');
            else if(this.type.match(/select\-multiple|select\-one/))
                $(this).val('-1');
            else if(this.type.match(/checkbox|radio/))
                this.checked = false;
        });
        $.modal.close(); // must call this!
    }
});