解决layer.msg与parent关闭或者刷新冲突的问题

2024-08-15前端开发

227

当我们用到layer.msg()和parent.location.reload()刷新的时候，会发现layer.msg不会弹出提示信息，那这种情况我们要怎么操作呢？
我们原来的代码如下（会发现执行后不会提示数据保存成功或者失败）：

$.post({
url:"/save",
data:data.field,
success:function (data){
                    if (data.code == "001"){
                        layer.msg("数据保存成功!",{icon:6,time:1000});
                    }else{
                        layer.msg("数据保存失败!",{icon:5,time:1000});
                    }
                    // 关闭弹出层
                    layer.close(index);
                    // var iframeIndex = parent.layer.getFrameIndex(window.name);
                    // 关闭后刷新父页面
                    parent.location.reload();
                    // parent.layer.close(iframeIndex);
                }
            })

我们将代码进行修改，如果在 $.post() 请求成功后调用 parent.location.reload() 导致 layer.msg() 不显示，您可以考虑将刷新父页面的代码放在 layer.msg() 的回调函数中，例如：：

$.post({
    url: "/admin/user/save",
    data: data.field,
    success: function (data) {
        if (data.code == "001") {
            layer.msg("数据保存成功!", { icon: 6, time: 1000 }, function () {
                // 关闭弹出层
                layer.close(index);
 
                // 刷新父页面
                parent.location.reload();
            });
        } else {
            layer.msg("数据保存失败!", { icon: 5, time: 1000 }, function () {
                // 关闭弹出层
                layer.close(index);
            });
        }
    }
});

这样，在弹出框关闭后再刷新父页面，就可以确保 layer.msg() 能够正常显示了。同时，您可以在 layer.msg() 的回调函数中添加其他代码，以确保它们在消息提示完成后再执行。

The End

Layui treetable复选框联动解决方案

我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢？实现的最终效果如下： 1. 在当前HTML文档checked监听函数中增加以下代码： //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...

2025-06-06 前端开发

163

mui中的a标签无效和click无法点击的问题

解决mui的a标签无效： mui('body').on('tap','a',function(){ window.top.location.href=this.href;}); 解决mui无法点击元素的问题：(主要是mui屏蔽了click，更换成tap即可) $('#id').on('tap','xx',function(){ //dosomething});...

2025-01-09 前端开发

148

百度地图调用点聚合和弹窗事件

什么是点聚合点聚合（MarkerClusterer 标记聚合器）用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。显示效果如下图：简单实例 HTML \ CSS style body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";} #allmap {wi...

2025-01-09 前端开发

179

layui xm-select插件怎么使用

xm-select是基于layui的多选解决方案,前身formSelects, 由于渲染速度慢, 代码冗余, 被放弃了xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展。 xm-select: 基于Layui, 下拉选择框的多选解决方案通过一个简单的小例...

2024-12-25 前端开发

308

解决弹出层打印问题

使用layui做弹出层；并且要求打印弹出层里面的内容。直接使用window.print()方法打印不出所有的页面内容，仅仅是打印了当前屏幕内容。我的解决办法是获取body中所有代码，新建一个空白页面，调用document.write（）方法写入，再打印该页面，实现了正常的分...

2024-10-15 前端开发