模态框关闭后清除数据

最新推荐文章于 2022-04-12 22:29:04 发布

原创最新推荐文章于 2022-04-12 22:29:04 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #modal

日常工作同时被 2 个专栏收录

10 篇文章

订阅专栏

bootstrap

4 篇文章

订阅专栏

$("#err_dept_modal").on('hide.bs.modal',function() {
        //关闭后重置表单数据
        window.location.reload();
       
    });

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunshinefcc

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CRM-实现保存模态框用户输入的数据

哈哈

05-22

513

1. 要实现的页面如下分析：为创建市场活动的模态框中的标签都添加id，通过$(“#btn”).varl()获取用户输入的值，点击保存按钮，通过jquery集成ajax，把数据传给controller，controller调用service层方法，service层调用mapper层方法把数据存入数据库 2. 代码实现 2.1 Mapper层 2.1.1 Mybatis逆向工程同样使用mybatis-generator搭建 tbl_user表的：搭建Mybatis逆向工程改实体类、xml、dao的存

1 条评论您还未登录，请先登录后发表或查看评论

bootstrap模态框关闭后清除模态框的数据方法

10-18

今天小编就为大家分享一篇bootstrap模态框关闭后清除模态框的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue中设置当一个model关闭时将model中的组件销毁方法

sxj的专栏

04-12

2230

1、只需要在其中加入：destroyOnClose即可，如下图所示：

BootStrap模态框清除历史数据

hdjeudbd的博客

06-20

1323

BootStrap模态框清除历史数据在做课程设计的时候用到了bootstrap的模态框部分。点击按钮显示出模态框，输入数据。再次点击模态框会出现上次的输入。这个解决方法我也是百度找的，具体是哪篇文章忘记了，最近刚熬夜弄完课程设计，，作业一定不能拖。我的课程设计中使用的地方是：点击按钮出现模态框，输入信息之后的添加操作，为了使每次点击出现的模态框内标签数据都为空。这里模态框的使用以及关于按钮，都是看的BootStrap中文文档。 - 代码： <!DOCTYPE html> <htm

模态框关闭后清空模态框里填写的数据（补充vue.form清空）

gaojun15173的博客

08-14

2万+

问题描述：用户充值功能，使用模态框填写充值信息。充值确定后，第二次打开模态框里面展示的是上一次填写的信息。(vue部分在下面) 网上搜索了清空模态框的方法，如下这种。试了没用！不好使！好气哦！ $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });...

模态框关闭后清空模态框里选择的数据

weixin_45650440的博客

11-19

1383

下面展示一些内联代码片。 Bug: 模态框关闭后再次打开选择的数据仍然存在不在closeAdd()里清空 ,在上一级里的add()里清空，可以简化代码，少写方法。因为不止取消按钮要发生清空事件 // html <Button type="success" class="twoWord" icon="md-add-circle" @cl

解决bootstrap模态框数据缓存的问题方法

10-18

当模态框用于新增和修改操作时，如果不采取措施，修改操作完成后关闭模态框，再次打开模态框时可能不会清除之前填写的数据。这种情况会导致用户在修改信息时出现数据错误，或者需要手动清除旧数据。为了解决这个...

嵌套模态框中的数据在关闭时刷新父级模态框数据

最新发布

07-16

我们需要在ModalManager中实现一种机制，使得当一个模态框关闭时，能够刷新其父级模态框的数据。这可以通过在模态框关闭时触发一个回调函数来实现，该回调函数由父级模态框提供。修改思路： 1. 在显示模态框时，...

模态窗口刷新、清除缓存

IT技术的专栏

08-10

2033

关闭子模态窗口后，父模态窗口会进行刷新操作 window.name = "__self"; window.open(window.location.href, "__self"); jsp内部清除缓存代码：

element 模态框内，表单编辑回填的值在关闭时，表单内容无法正确重置问题

ZengYue_D的博客

12-22

897

element 表单使用 this.$refs[formName].resetFields() 进行数据重置，但重置的初始数据是基于表单第一次渲染时的数据为模板。由于点击编辑时，模态框显示与表单内容渲染是同时进行，所以 el-form 就认为回填值是初始数据，每次重置都以回填值数据来重置表单。解决思路：将回填值赋予表单对象的操作放入 $nextTick 中延迟进行，让表单对象将空数据认定为初始数据。解决方法 <el-dialog :visible.sync="visible" @cl.

Bootstrap使用模态框modal遇到的相关问题

AcLings的博客

11-27

905

1、在关闭modal后，modal的幕布没有一同关闭消失，仍然存在，如图：点开F12，可以看到这个modal幕布并没有随着modal消失解决方法有两个： a、在关闭modal的时候同时触发一个点击事件，直接把幕布去掉 <button type="submit" class="btn green" onclick="qingchu();">关闭</button> &l...

bootstrap模态框保存后清除模态框数据的方法

Brooker_的博客

04-08

1684

代码如下，前面是模态框的一些常用设置，最后是解决方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integri

bootstrap模态框关闭后清除模态框的数据

热门推荐

丹丘的博客

01-23

3万+

$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });

模态框关闭后清空模态框里填写的数据

weixin_30596165的博客

04-29

1681

好东西要懂得分享:解决方法在下面的大佬那! 　　模态框名字 $('#modal-recharge').on('hidden.bs.modal', function (){ document.getElementById("contentForm").reset();}); 　　　　　　　　　　　　from表单名字 https://blog.csdn.net/gaojun15173/art...

boostrap模态框二次弹出清空原有内容

y_onghuming的博客

10-24

8226

boostrap的模态框第二次弹出时总会保留第一次编辑的内容，解决方法如下：在模态框中每个文本框（或选择框，取决于你的模态框里有哪些样式）动态获取值的方法里添加： $(".myModal1").empty();（myModal1为模态框的class名）就可以了。注意：不是在弹出模态框的方法里添加 $(".myModal1").empty()。

模态框数据清空

weixin_44575964的博客

03-24

399

addThemeForm是模态框中form表单的id $("#addThemeForm")[0].reset();

element-plus关闭模态框清除表单数据

02-28

### Element Plus 关闭对话框并清除表单数据为了实现关闭对话框时自动清空表单中的所有字段，可以采用Vue的数据响应特性来管理状态。具体来说，在定义组件内部维护一个用于存储初始值的对象`defaultFormData`以及另一个对象`formData`用来保存当前输入的状态。当点击按钮触发模态框显示或隐藏操作时，通过监听可见性的变化事件（如`v-on:before-close`），可以在该回调函数里重置`formData`到原始默认值`defaultFormData`，从而达到清理效果[^2]。下面是一个完整的例子展示如何做到这一点： ```html <template> <el-dialog :visible.sync="dialogVisible" width="30%" @before-close="handleClose">  <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="电话" prop="phone"> <el-input v-model="formData.phone"></el-input> </el-form-item>  <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog">取消</el-button> <el-button type="primary" @click="submitForm('ruleFormRef')">确定</el-button> </span> </el-form> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, formData: {}, // 当前表单数据 defaultFormData: { name: '', phone: '' }, // 默认/初始化表单数据 rules: { name: [{ required: true, message: '请输入名字', trigger: 'blur' }], phone: [ { required: true, message: '请输入手机号码', trigger: 'change' }, { pattern: /^1\d{10}$/, message: '请输入有效的手机号码'} ] } }; }, methods: { openByParentMethod(){ this.dialogVisible=true; Object.assign(this.formData,this.defaultFormData); // 打开时恢复默认值 }, handleClose(done){ done(); // 需要调用done使对话框真正关闭 Object.assign(this.formData,this.defaultFormData); }, closeDialog(){ this.dialogVisible=false; Object.assign(this.formData,this.defaultFormData); }, submitForm(formName) { const form = this.$refs[formName]; if (!form) return; form.validate((valid) => { if (valid) { alert('提交成功!'); this.closeDialog(); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 此代码片段展示了怎样创建一个带有基本验证逻辑的弹窗，并且实现了在取消或者确认之后都会将表单内容设置为空字符串的功能。每当用户尝试关闭窗口之前(`@before-close`)，会先执行一次重置动作；同样地，“取消”按钮也关联了一个处理程序来做同样的事情[^3]。