重置模态对话框关闭时。

9 浏览
0 Comments

重置模态对话框关闭时。

我有一个模态表单，用户可以打开该表单来重置他们的密码。

当用户点击重置密码按钮时，我调用一个函数来检查用户是否存在。

在成功提交后，我会将div的内容更改为生成的消息。

所有这些都按预期工作。现在我希望的是，一旦关闭模态对话框，内容就会重置回表单。我在实现这个过程中遇到了问题。

以下是我的jQuery代码：

$( "#password-form" ).dialog({
autoOpen: false,
height: 200,
width: 300,
modal: true,
buttons: {
"重置密码": function() {
$.ajax({
url: "/model/websitemanager.cfc"
, type: "post"
, dataType: "html"
, data: {
method: "resetpassword"          
, emailreset: $("#emailreset").val()
}
, success: function (data){
//alert(data);
$('#password-form').html(''+data+'');
}
// 如果发生错误，则运行以下代码
, error: function (xhr, textStatus, errorThrown){
// 显示错误
alert(errorThrown);
}
});

},
},
close: function() {
emailreset.val( "" ).removeClass( "ui-state-error" );
$(this).dialog('destroy').remove()
}
});

0

1 答案

0 Comments

问题的出现原因是，当关闭jQuery对话框时，没有重置对话框中的输入字段。

解决方法是，在关闭对话框之前调用clearInputs函数来重置对话框中的输入字段。这可以通过在对话框的"close"选项中调用clearInputs函数来实现。此外，在"Submit"和"Cancel"按钮的回调函数中，也需要调用clearInputs函数来清空对话框中的输入字段。

下面是修改后的代码：

function clearInputs(target) {
  $(target).find(':input').each(function () {
    switch (this.type) {
        case 'password':
        case 'select-multiple':
        case 'select-one':
        case 'text':
        case 'textarea':
            $(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
    }
  });
}
$('#myDialog').dialog({
    buttons:{
        'Submit':function () {
            // Do something here
            clearInputs($(this).find('form'));
            $(this).dialog('close');
        },
        'Cancel':function () {
            clearInputs($(this).find('form'));
            $(this).dialog('close');
        }
    },
    close:function () {
        clearInputs($(this).find('form'));
    }
});

通过以上修改，当关闭jQuery对话框时，输入字段会被清空。这样可以确保下次打开对话框时，输入字段是空白的。

0