今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的sweet alert组件。

abp框架前端集成了sweet alert 对http请求的error做了全局处理,我在后台程序直接抛出的UserFriendlyExcption,开始的时候发现能提示,然后再次操作发现没显示提示了,

卧槽,一脸懵逼啊,哪里的问题啊,赶忙把代码从头到尾检查一遍没问题啊,然后测试其他有这种错误提示的地方,发现没问题啊,都有提示的,就只有这里出现问题。。。

那就调试吧,在abp.ng.js源文件中打了一个断点调试,然后操作一步一步走,结果发现sweet alert是显示出来了的,只不过又马上被隐藏了。

具体的sweet alert的elements如下:

<div class="sweet-alert showSweetAlert visible" tabindex="-1" data-custom-class="" data-has-cancel-button="false" data-allow-ouside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" style="display: none; margin-top: -190px; opacity: -0.06;">
<div class="icon error animateErrorIcon" style="display: block;"><span class="x-mark animateXMark"><span class="line left"></span><span class="line right"></span></span></div>
<div class="icon warning" style="display: none;"> <span class="body"></span> <span class="dot"></span> </div>
<div class="icon info" style="display: none;"></div>
<div class="icon success" style="display: none;"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div>
<div class="icon custom" style="display: none;"></div> <h2>您不能删除该当班用户,请等待用户交班后再进行删除!</h2><p style="display: block;"></p><button class="cancel" tabindex="2" style="display: none; box-shadow: none;">Cancel</button><button class="confirm" tabindex="1" style="background-color: rgb(174, 222, 244); box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;">Ok</button></div>

一看div容器的class是visible,表示是显示了的,只不过是style上的display为none,被隐藏了,又是一脸懵逼,想到难道是其他地方的代码直接修改了div的行内样式?但是仔细一分析也不对啊,其他地方的代码又没有专门对sweet alert的elements修改,就算是有代码使用的div选择器那么修改的也是页面所有的div,而不会仅仅是sweet下的div。

这样看来应该还是sweet alert组件自己修改的,为了确认这个问题,在浏览器elements选卡下 选中sweet alert的elements,使用 break on功能进行调试,经过几次操作发现确实是sweet alert自身修改的样式。

问题确认那么就找找是哪里触发的,通过连续的操作,仔细观察,发现在sweet alert confirm确认对话框关闭的过程中,后台处理已经处理完成直接弹出sweet alert的提示框了,然后confirm关闭的时候直接把提示对话框也关闭了。

我了割草,终于发现问题了,因为sweet alert所有的对话框,提示框都是公用的一块elements,所以两个提示框不能同时出现,不然就会出现混乱。

找到问题点了,处理起来就简单了,找到abp.sweet-alert.js文件,找到abp.message.confirm函数修改最后的return部分代码:

        return $.Deferred(function ($dfd) {
sweetAlert(opts, function (isConfirmed) {
callback && callback(isConfirmed);
$dfd.resolve(isConfirmed);
});
});

改为:

        return $.Deferred(function ($dfd) {
sweetAlert(opts, function (isConfirmed) {
setTimeout(function () { callback && callback(isConfirmed); },300);
$dfd.resolve(isConfirmed);
});
});

使用settimeout函数,延迟300毫秒去执行callback回调函数,这样就不会冲突了。

修改这地方是为了统一处理confirm对话框的情况,也可以直接修改调用confirm的地方,callback函数里面使用settimeout延迟执行业务操作,只不过这样只能处理一处,非特殊情况建议还是直接修改abp.sweet-alert.js。

至此,问题完美解决。

关于abp中使用的sweetalert对话框组件的confirm确认对话框中的一个坑的更多相关文章

  1. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  2. 介绍一款“对话框”组件之 “artDialog”在项目中的使用

    在实际开发项目中经常会用到对话框组件,提示一些信息.其实有很多,例如:在项目中常用到的“Jquery-UI.Jquery-EasyUI”的.Dialog,他们也很强大,Api文档也很多.今天就介绍一款 ...

  3. Unity3d UGUI 通用Confirm确认对话框实现(Inventory Pro学习总结)

    背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...

  4. confirm确认对话框

    还记得之前的javascript入门里的讲的confirm 消息对话框吗?不记得也没关系,我们先来回顾一下,然后在详细讲它. 复习: confirm 消息对话框通常用于允许用户做选择的动作,如:“你对 ...

  5. asp.net在后台弹出confirm确认对话框并获取用户选择的值做出相应的操作

    在asp项目中,这种情况是经常出现的,前段时间通过查找资料以及自己尝试,找到一种解决方案,但是不知是否有更好的方案,以后发现再进行记录. 一.思路 在本次项目中,在一个函数中需要让用户判断,并根据用户 ...

  6. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

  7. BootstrapDialog.confirm确认对话框

    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...

  8. [转]angular2封装material2对话框组件

    本文转自:https://www.jianshu.com/p/da9978e25566 1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用 ...

  9. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

随机推荐

  1. js 实现倒计时效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 使用r.js来打包模块化的javascript文件

    前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...

  3. yield详解

    生成器generator 一个函数调用时返回一个迭代器,那这个函数就叫做生成器(generator),如果函数中包含yield语法,那这个函数就会变成生成器 yeild能暂时的保留函数的运行位置,每次 ...

  4. 用JMX远程监控Tomcat

    要通过JMX远程监控Tomcat,首先需要进行Tomcat的JMX远程配置. 注意:此配置添加在catalina.bat文件开头的注释行(rem)后面即可. 不需鉴权的配置: 先修改Tomcat的启动 ...

  5. 关于QT5使用QtScript解析QJsonArray数组的问题

    首先得在pro文件中加入QT+=script 然后导入相应的头文件 include <QStringList> #include <QtScript/QScriptEngine> ...

  6. grid表格选择模式

    selModel: { // type: 'checkboxmodel', type: 'cellmodel', // mode: 'SIMPLE', mode: 'SINGLE', checkOnl ...

  7. Spring+SpringMVC+MyBatis深入学习及搭建(十四)——SpringMVC和MyBatis整合

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7010363.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十三)--S ...

  8. Feign使用Hystrix无效原因及解决方法

    最近项目重构使用了Spring Boot和Spring Cloud.这两者结合确实给项目带来了方便,同时也遇到了一些问题.其中使用feign作为服务消费,但是断路器hystrix一直不起作用让人很费解 ...

  9. SSH工作原理图

    一个请求在Struts2框架中的处理大概分为以下几个步骤 : 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请求 2 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫 ...

  10. Solr6.6 创建core

    原文:https://github.com/x113773/testall/issues/7 1. 首先在solr-6.6.0目录运行命令,启动solr:`Linux: $ bin/solr star ...