今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的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. 一个web应用的诞生(13)--冲向云端

    有句话叫所有的乐趣都在部署之前,也许这个小应用还有很多缺陷,也许它还不够完美,但是,仔细想想,其实没有什么能比自己的网站在互联网中上线更令人满足的了,但是满足的背后,总是存在着很多的风险,以至于几乎所 ...

  2. QUICK-AP + BETTERCAP 搭建热点, 欺骗局域网内用户下载任意可执行文件

    环境需求 1:kali系统 , 2.0版本 2:quick-ap 3:bettercap 4:bettercap-proxy-modules 5:博客园账号(把zip文件传到博客园的文件服务器) 主要 ...

  3. javaWEB之Servlet

    Servlet 1. 什么是Servlet  * Servlet是JavaWeb三大组件之一(Servlet.Filter.Listener)  * Servlet是用来处理客户端请求的动态资源  * ...

  4. Android 图片加载框架Glide4.0源码完全解析(一)

    写在之前 上一篇博文写的是Picasso基本使用和源码完全解析,Picasso的源码阅读起来还是很顺畅的,然后就想到Glide框架,网上大家也都推荐使用这个框架用来加载图片,正好我目前的写作目标也是分 ...

  5. python入门小记

    一.help python中的帮助手册,对于初学者,多多使用help,多看看原生注释-- 1.help的使用 1.命令需要使用双引号或者单引号括起来,不使用引号引起来会报错 2.类或者函数(方法)不需 ...

  6. eclipse下建立 android 项目,相关文件夹介绍

    今天开始进入ANDROID开发,之前一直做些JAVA的WEBSERVICE之类的文件,第一次从头开始整理ANDROID项目,我会把最近遇到的问题做一一梳理. 现在来说一下建立ANDROID项目后产生的 ...

  7. EOS数据源的配置

    EOS产品默认安装完成后的数据源为default,由于业务需要,会配置多数据源,这就有了以下的随笔: 1.在governor里面新增数据源 2.逻辑流中,数据源默认为default,根据需要改为自己新 ...

  8. H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持

    H.264格式,iOS硬编解码 以及 iOS 11对HEVC硬编解码的支持 1,H.264格式 网络表示层NAL,如图H.264流由一帧一帧的NALU组成: SPS:序列参数集,作用于一系列连续的编码 ...

  9. Python模块之ConfigParser - 读写配置文件

    Python 标准库的 ConfigParser 模块提供一套 API 来读取和操作配置文件. 配置文件的格式 a) 配置文件中包含一个或多个 section, 每个 section 有自己的 opt ...

  10. 使用zabbix监控mysql的三种方式

    使用zabbix监控mysql的三种方式 1.只是安装agent 2.启用模板监控 3.启用自定义脚本的模板监控 zabbix中默认有mysql的监控模板.默认已经在zabbix2.2及以上的版本中. ...