新增修改点击模态框右上角关闭功能

最新推荐文章于 2024-12-30 08:49:59 发布
最新推荐文章于 2024-12-30 08:49:59 发布
阅读量1.3k 收藏
点赞数
分类专栏： 报错问题总结 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43739375/article/details/103718138
版权

在这里插入图片描述
点击右上角"x"时,报undefined错误,在修改新增操作时都需要清空操作,以免下次执行新增修改操作时出现错误信息,在清空操作时,因为此处是根据设备名称查询对应用户名,因为执行了清空操作,所以设备名称现在为空,设备名称改变所以又调了一次根据设备名称查询对应用户名的接口,但是传的值为undefined,所以会报错

在这里插入图片描述
在这里插入图片描述
点关闭时也调了一次接口:
在这里插入图片描述
错误代码:
在这里插入图片描述
在这里插入图片描述
这种报错情况改正方法:
在关闭时因为传的是空,判断一下其值,有值才调接口

正确写法:
在这里插入图片描述
在这里插入图片描述

uniapp uni.showModal交互按钮，避免误触窗口，再确定提示窗口
qq_37455326的博客
01-13 1178
【代码】uniapp uni.showModal交互按钮，避免误触窗口，再确定提示窗口。
【uni-app】重写uni.showModal方法，将取消和确定按钮互换位置
08-25 4701
在main.js中写入。
jquery模态窗口
iteye_20002的博客
03-28 302
http://www.malsup.com/jquery/block/#displayboxhttp://dev.iceburg.net/jquery/jqModal/http://bbs.blueidea.com/viewthread.php?tid=2844333&extra=&page=1扩展了 jquery 的插件 easy drag用 jQuery 的 AJAX 功能发现...
a-modal 关闭按钮阻止关闭窗口
huanglgln的专栏
02-01 2082
ant design vue、a-modal、阻止关闭
微信小程序弹框如何显示右上角的关闭
cxu123321的博客
02-10 3751
微信小程序弹框如何显示右上角的关闭 微信小程序 我使用微信的组件 wx.showModal({ title: '删除宝贝', content: '删除宝贝后和此宝贝相关信息数据将被删除，确认删除？', confirmText:'删除', success: function (res) { if (res.confirm) { console.log('用...
新增修改共用模态框
qq_44544363的博客
05-17 679
新增修改共用模态框 …………………………………………………………………………………………………………… 开发工具与关键技术：Visual Studio 2015 C# 作者：林敏静 撰写时间：2019年5月12日 …………………………………………………………………………………………………………… 相信大家对于数据的查询、新增、修改、删除这四个基础维护都不陌生了，毕竟我们会经常接触到使用到，说夸张...
解决bootstrap模态框数据缓存的问题方法
10-18
当模态框用于新增和修改操作时，如果不采取措施，修改操作完成后关闭模态框，再次打开模态框时可能不会清除之前填写的数据。这种情况会导致用户在修改信息时出现数据错误，或者需要手动清除旧数据。 为了解决这个...
新增和修改共用同一个模态框
qq_44489422的博客
04-28 1817
一般来说，新增数据模态框和修改数据模态框几乎是完全一样的模态框，因为新增不需要数据回填，而修改数据需要，但这并影响它们共用一个模态框，唯一影响的是保存按钮，如果你给保存按钮一个点击事件触发调用一个方法，那么因为新增数据保存方法和修改数据保存方法是不同的，所以如果想它们共用一个模态框就必须要解决这个问题，然而保存按钮只能有一个点击事件，那么我们怎么可以实现一个点击事件去根据不同的情况去执行新增...
react +Ant design 新增、编辑、删除模态框(获取id)
qq_42360843的博客
07-03 7641
一、新增模态框 首先绑定事件： Ant design 里 modal 对话框 按照自己的需求，修改下参数 ： import { Modal, Button } from 'antd'; class Ad extends React.Component { constructor(props) { super(props); this.state = { n...
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
09-01
1. 删除新增的`<div>`元素，这个`<div>`可能是模态框关闭后未被正确移除的残留。 2. 移除`<body>`标签上的额外类，这个类可能与模态框的遮罩层有关，导致其未能正确关闭。 通过以上步骤，模态框消失和背景存在的...
JQuery实现的模态窗口
cu4647264726238的博客
09-18 307
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
uni-app APP 中动态显示右上角按钮
不可云
12-29 6721
uni-app APP 中动态显示右上角按钮 方案1 需要配合pages.json 配置实现 // 在要显示按钮的配置右上角按钮配置，并把文字颜色设置为页面背景色 { "path": "pages/instock/sub-pages/subIntoWork", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false, "onReachBottomDistance": 100, "app-plus":
el-dialog右上角关闭事件
weixin_55725100的博客
11-01 1761
before-close事件，是右上角的“X”关闭按钮触发的事件。
a-modal关闭和重写确定、取消
热门推荐
qihangVIP4的博客
12-09 1万+
a-modal对话框
小程序的uni.showModal
weixin_66579278的博客
04-26 834
【代码】小程序的uni.showModal弹窗
uniApp顶部导航栏右侧添加按钮
a983677218的博客
12-13 1148
记录一下从阿里图库里面下载图标到项目中遇到的问题。原先图标引入后在浏览器可以正常显示，但是真机显示不了图标。最后去修改路由文件pages,加上app-plus，然后要修改text为css中更改的编码，然后填路径。在uniapp项目文件中引入，我这里是/static/iconfont/去修改css文件中的unicode编码，加上u。先下载到本地，然后解压后再要两个文件。然后重点，因为官方文件中。
Uniapp自带的弹窗api
weixin_45655820的博客
10-20 1942
【代码】Uniapp自带的弹窗api。
uniApp笔记
w13966597931的博客
11-04 3966
学习路线：>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>文中下方出现的http链接均为官网纤详细教程地址，官网讲的很全没必要再重新记录一编。
uniapp 自定义可重复显示多个弹窗 showModal重写，兼容andriod和web
最新发布
sunmeng0109的博客
12-30 703
在app端，函数参数不能通过href 参数的方式传递，想到每次调用都会随机生成一个10位数的随机码，通过key值，store 保存success回调函数,通过页面跳转的方式显示弹窗。原生弹窗太丑，并且每次只能显示一个，需求是可以显示多个的弹窗，使用$msg.showModal()形式调用，不用写dom,和原生一样方便。在components/msg/下 新建msgH5.js。5.在web 端，弹窗通过渲染插入到body上。2.msg.vue app端页面渲染。4.在main.js 上 引入$msg。
jqrid模态框增加数据
11-14
jQuery UI Dialog（简称jqGrid Modal框）是一种基于jQuery UI库的功能，它可以帮助你在弹出窗口（modal dialog）中显示和编辑jQuery Grid的数据。如果你想在jqGrid的模态框里增加数据，可以按照以下步骤操作： 1. **创建或加载数据**：首先确保你已经有一个jqGrid实例并且初始化了数据。你可以通过`$.ajax`, `load`方法或者直接在grid配置中提供数据。 ```javascript $( "#your_grid_id" ).jqGrid({ url: 'your_server_url', datatype: 'json', data: {id: 'new_data'}, // 新增数据的初始值 ...其他jqGrid选项... }); ``` 2. **启用模态编辑功能**：在`colModel`配置中添加`edittype: 'button'`属性，并在相应的列上设置`click`事件，打开弹窗： ```javascript { name: 'action', index: '', width: 50, edittype: 'button', // 添加此行 formatter: function(cellvalue, options) { return '<a href="#" class="edit" data-key="' + cellvalue + '">Edit</a>'; }, onClick: function(e) { var key = $(e.target).data('key'); $('#your_dialog_id').dialog({ modal: true }).load('dialog.html?key=' + key); } } ``` 这里假设`dialog.html`是一个包含jqGrid模态编辑模板的HTML文件。 3. **处理模态框中的数据提交**：在`dialog.html`中，当你完成编辑并点击保存按钮时，通过AJAX向服务器发送更新请求，比如使用jQuery的`.serialize()`方法加上当前键值对（`key`），然后关闭对话框： ```html <form id="dialog-form"> <!-- 编辑表单 --> </form> <button onclick="saveChanges()">保存</button> <script> function saveChanges() { $.ajax({ type: "POST", url: 'update_action.php', data: $('#dialog-form').serialize() + '&key=' + $('#your_key_input').val(), // 获取key和其他修改后的字段 success: function(response) { $('#your_dialog_id').dialog("close"); // 更新主网格中的数据 $("#your_grid_id").setGridParam({data: response.data}); // 假设response.data包含了更新后的数据 } }); } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值