代码之家 › 专栏 › 技术社区 › WhiteLine

SweetAlert2:无法触发验证消息

sweetalert2

WhiteLine · 技术社区 · 6 年前

我已经创建了这个弹出窗口序列 Sweetalert2

用户选择一年,等待报表生成,最后可以下载报表。

这是代码(简体)

var startYear = 2017;
$("#test").click(function(){

    var _id = ....;

    var listYears = {};
    for (var i = parseInt(moment().format("YYYY")); i >= startYear; i--) listYears[" " + i] = i;

    swal({
        title: "Data export",
        html : "Select a year and press the <strong>export</strong> button.",
        reverseButtons : true,
        showCancelButton: true,
        cancelButtonText : "Cancel",
        confirmButtonText: "Export",
        validationMessage : "Select a year",
        inputClass : "form-control", /* bootstrap 4 class */
        input: "select",
        inputOptions: listYears,
        inputPlaceholder: "Select..",
    }).then((result) => {
        if (result.value) {

            swal({
                title: 'Wait',
                text: 'Report generation in progress..',
                allowOutsideClick : false,
                showConfirmButton : false,
                onOpen: () => {

                    swal.showLoading();

                    var dataGET = ".....&id=" + _id + "&year=" + parseInt(result.value);
                    var xhr = $.ajax({
                        type: "GET",
                        url: ".....php",
                        data : dataGET,
                        cache: false,
                        success : function(val){
                            var _this = this;
                            if(val == "OK_DOWNLOAD"){

                                var pathDownload = xhr.getResponseHeader(".....");
                                var nameDownload = xhr.getResponseHeader(".....");

                                swal({
                                    type : "success",
                                    title: 'Perfect',
                                    html : 'Now you can download the report<br/><a class="btn btn-custom-secondary mt-3" href="......" target="_blank" id="tempBtnDownloadReport"><span class="icon-download1"></span></a>',
                                    showConfirmButton : false,
                                }); 

                                $("#tempBtnDownloadReport").click(function(){
                                    swal.close();
                                });

                            }else{
                                _this.error();
                            }
                        },
                        error : function(){
                            swal("Attention","Error creating report, please try again.","error");
                        },
                        complete : function(jqXHR,textStatus){
                            swal.hideLoading();
                            xhr = null;
                        }
                    });

                }
            });

        }
    });

我的问题是当用户按下导出按钮时,选择它还没有被“选中”。我想触发错误消息(“选择一年”),如下所示 these examples 是的。

1 回复 | 直到 6 年前

WhiteLine 6 年前

解决了的

我用了 预先确定 事件。

 swal({
        title: "Data export",
        html : "Select a year and press the <strong>export</strong> button.",
        reverseButtons : true,
        showCancelButton: true,
        cancelButtonText : "Cancel",
        confirmButtonText: "Export",
        validationMessage : "Select a year",
        inputClass : "form-control",
        input: "select",
        inputOptions: listYears,
        inputPlaceholder: "Select..",
        allowOutsideClick: () => !Swal.isLoading(),
        preConfirm: (test) => {
           if(test == "") Swal.showValidationMessage("Select a year");
        }
    }).then((result) => {
        if (result.value) {

            swal({
                title: 'Wait',
                text: 'Report generation in progress..',
                allowOutsideClick : false,
                showConfirmButton : false,
                onOpen: () => {

                    swal.showLoading();

                    var dataGET = "category=download&cmd=do_excel_report&id=" + _id + "&year=" + parseInt(result.value);

                    var xhr = $.ajax({
                        type: "GET",
                        url: "/" + $("html").data("project") + "/home/command.php",
                        data : dataGET,
                        cache: false,
                        success : function(val){
                            var _this = this;
                            if(val == "OK_DOWNLOAD"){

                                var pathDownload = xhr.getResponseHeader("Custom-Success-Download-Path");
                                var nameDownload = xhr.getResponseHeader("Custom-Success-Download-Name");

                                swal({
                                    type : "success",
                                    title: 'Perfect',
                                    html : 'Now you can download the report<br/><a class="btn btn-custom-secondary mt-3" href="/' + $("html").data("project") + "/home/command.php?category=download&cmd=download_excel_report&path=" + pathDownload + "&name=" + nameDownload + '" target="_blank" id="tempBtnDownloadReport"><span class="icon-download1"></span></a>',
                                    showConfirmButton : false,
                                }); 

                                $("#tempBtnDownloadReport").click(function(){
                                    swal.close();
                                });

                            }else{
                                _this.error();
                            }
                        },
                        error : function(){
                            swal("Attention","Error creating report, please try again.","error");
                        },
                        complete : function(jqXHR,textStatus){
                            swal.hideLoading();
                            xhr = null;
                        }
                    });

                }
            });

        }
    });