标签: sweetalert2

我正在使用javascript甜蜜警报库:

https://limonte.github.io/sweetalert2/

https://github.com/limonte/sweetalert2

我想从警告框中删除"确定"按钮,但我没有找到任何不显示此按钮的属性.

我正在使用timer属性timer:1000在一秒钟内关闭警报.所以,我认为在这件事上没有使用ok按钮.

在角度项目中的npm开始后获取此错误.

app/app.component.ts(12,7):错误TS2304:找不到名称'swal'.app/app.component.ts(21,7):错误TS2304:找不到名称'swal'.

我创建了一个角度项目.在app.component.ts里面我添加了甜蜜的警报代码

export class AppComponent {
deleteRow() {
      swal({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then(function() {
      swal(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
    })
  }
}

我做到了

npm install sweetalert2 --save 

并在index.html中添加了路径

<script src="node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert2/dist/sweetalert2.css">

如何在使用promises时正确转义取消按钮而不会抛出错误？我的代码会抛出一个带有必填复选框的警报确认.代码应该对用户执行,但它会在控制台窗口中引发错误:

未被捕(承诺)取消

//validation logic all passes...Now proceed to...

 else
    {

//determine and parse Discounts

 var myLookup = document.getElementsByName("myLookup")[0].value;
$.post( "findthem.php", {myLookup: myLookup })
  .done(function(json_data){
     var theResponse1 = $.parseJSON(json_data);
     myDiscountRate = theResponse1['ourDiscountFound'];

    }).then( function(callback){

    priceRate = priceRate * (1 - (.01 * myDiscountRate));
    newRate = priceRate.toFixed(2);
}

swal({
  title: "Confirm",
  input: 'checkbox',
  inputValue: 0,
  type: "warning",
  inputPlaceholder: 'I agree to <a href="#blahblahMore"></a> Your new Rate is :'+newRate,
  showCancelButton: true,
  confirmButtonText: 'Confirm',
  showLoaderOnConfirm: true,
  preConfirm: function(result) {
    return new Promise(function(resolve, reject) { …

我想在Angular中注销时关闭所有对话框(mat-dialog,bootstrap modals和sweet alert).这是在AngularJS(版本1.5)中完成的方式:

function logout() {
  //hide $mdDialog modal
  angular.element('.md-dialog-container').hide();

  //hide any open $mdDialog modals & backdrop
  angular.element('.modal-dialog').hide();
  angular.element('md-backdrop').remove();

  //hide any open bootstrap modals & backdrop
  angular.element('.inmodal').hide();
  angular.element('.fade').remove();

  //hide any sweet alert modals & backdrop
  angular.element('.sweet-alert').hide();
  angular.element('.sweet-overlay').remove();
}

我怎么能在Angular中做到这一点？使用$('.mat-dialog-container')或$('.inmodal')不给我一个选择hide()或做close()

我尝试过这样做,但我无法获得元素参考:

import { ElementRef, Injectable, ViewChild } from '@angular/core';
import { MatDialog, MatDialogContainer, MatDialogRef } from '@angular/material';

export class MyClass
{
  @ViewChild('.mat-dialog-container') _matDialog: ElementRef;
  @ViewChild('.mat-dialog-container') _matDialogRef:MatDialogRef<MatDialog>;

  constructor() { }

  function logout()
  {
    //access the …

我有一个带2个按钮的sweetalert,但我想再添一个按钮.例如,截至目前,我有,我不想再添加一个按钮.请帮忙

$("#close_account").on("click", function(e) {
        e.preventDefault();
        swal({
          title: "Are you sure?",
          text: "You will not be able to open  your account!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, close my account!",
          closeOnConfirm: false
        },
        function(){
          window.location.href="<?php echo base_url().'users/close_account' ?>"
        });
    });

提前致谢:)

我遇到一个问题，第三方库正在使用 JSDOM 中不可用的一些有效的 CSS 解析器功能，我只想抑制此类错误。但考虑到我通过 Jest 使用 JSDOM，我不太确定如何做到这一点。我查看了testEnvironmentOptionsJest 文档中的 ，但我不知道要设置哪些选项。

错误消息基本上如下：

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:35:21)
    at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._childTextContentChangeSteps (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:37:12)
    at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:225:14)
    at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:202:14)
    at HTMLStyleElementImpl.appendChild (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:327:17)
    at HTMLToDOM._parseWithParse5 (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:60:21)
    at HTMLToDOM._doParse (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:47:42)
    at HTMLToDOM.appendToNode (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:37:17)
    at setInnerHTML (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:40:25)
    at HTMLStyleElementImpl.set innerHTML [as innerHTML] (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:211:5)
    at HTMLStyleElement.set [as innerHTML] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:874:29)
    at node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1
    at Object.<anonymous> (node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1)

它似乎也与 SweetAlert2 库有关。

testEnvironmentOptions 的 Jest 文档

JSDOM 问题

我在我的项目中使用 sweealert2 这是我的代码

标头通过 jsdeliver.net 包含 js

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8" charset="UTF-8"></script>

jQuery 版本：jQuery v3.4.1

页脚脚本

<script>
$(document).ready(function() {
    $("#updateUserProfile").submit(function(e) {
    e.preventDefault(); 

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), 
           success: function(data)
           {
                $('.modal').modal('hide');
                var hasil = $.parseJSON(data);
                Swal.fire({
                    icon: 'info',
                    title: hasil.message,
                    showConfirmButton: false,
                    timer: 1500
                });
                // Swal.fire('Success', hasil.message, 'success', 1500)
                setTimeout(function(){
                    window.location.reload(1);
                }, 1500);
           }
         });
    });
});
</script>

console.log 上的错误

SweetAlert2: Unknown parameter "icon"

但是当我这样使用时没有错误，并且出现图标

Swal.fire('Success', hasil.message, 'success', 1500)

我正在使用最新版本的真棒SweetAlert2 jquery插件.

我有一个带2个按钮的简单SweetAlert.1按钮是确认按钮,另一个是取消按钮.我正在使用html选项向警报添加文本输入.当用户按下确认按钮时,执行AJAX呼叫并关闭警报.

现在我想使用取消按钮执行一些其他代码,而不是关闭警报的默认操作.(用户可以使用showCloseButton:true关闭警报).

所以简而言之:如何删除关闭处理程序并将自己的自定义处理程序添加到swal的取消按钮？

问题:
我想在甜蜜警报上单击"确定"后将用户重定向到另一个页面,但是在我出于某种原因打开另一个甜蜜警报之前,用户不会被重定向.
您可以在代码上断点,但页面上没有任何反应.

问题的简单例子:http://jsfiddle.net/ADukg/14306/

注意:包括0秒超时"解决问题"

重现:
1)注意箭头后面的文字.. $ scope.name ="original",你可以看到它显示在页面上.
2)单击"单击第一个"按钮.这运行函数$ scope.changeMe(),它将$ scope.name更新为"delayed ......."
3)到现在为止,按钮上方的文本应该已经更改.但是直到你打开另一个甜蜜的警报,文本才真正改变
4)点击"然后在这里"或"点击第一个"按钮,弹出另一个甜蜜警报,DOM将最终改变.

我很确定这与AngularJS有某种关系,必须使用1.4.3.

有任何想法吗？

HTML:

<div ng-controller="MyCtrl">
  <div>
    <button ng-click="changeMe()">click first</button>
    <button ng-click="decoy()">then here</button>
  </div>
  <div>
    <button ng-click="reset()">reset text</button>
  <div>
</div>

JS:

var myApp = angular.module('myApp',[]);

myApp.controller("MyCtrl", function($scope, $timeout) {
    $scope.name = 'original';
    $scope.copy = angular.copy($scope.name);

    $scope.changeMe = function() {
      swal("Text should change now")
      // runs on hitting "OK"
      .then(function() {
                  // UNCOMMENT THIS and re-run the fiddle to show expected behavior …

我正在尝试为我的模态添加一个额外的类，以便我可以从 LESS 中选择它并将其背景变为透明。但是 customClass 不起作用。有没有其他方法可以做到。顺便说一句，我已经对默认类进行了很多更改，因此我只需要为一种模式执行此操作，无法影响全局 swal。

   swal({
      title: success,
      showConfirmButton: false,
      html: true,
      customClass: ".swal-back"
   });