javascript - sweetalert disappear Instantly - Stack Overflow

admin管理员组

文章数量:1345174

swal({
    title: "xxx",
    type: "warning",
    showCancelButton: true,
    .....
    },
    function(isConfirm) {
        if (isConfirm) {
            swal("yes, do it!");
        } else {
            swal("cannel!");
        }
    }
);

in my page a button binding a js function , the function execute this code . On the page appear the "are you sure" confirm box when I click the button. but when I click yes , the next sweetalert just flushes and disappear instantly. what's wrong?

swal({
    title: "xxx",
    type: "warning",
    showCancelButton: true,
    .....
    },
    function(isConfirm) {
        if (isConfirm) {
            swal("yes, do it!");
        } else {
            swal("cannel!");
        }
    }
);

in my page a button binding a js function , the function execute this code . On the page appear the "are you sure" confirm box when I click the button. but when I click yes , the next sweetalert just flushes and disappear instantly. what's wrong?

• javascript
• jquery
• sweetalert

Share Improve this question Follow asked Mar 11, 2016 at 3:44 oceanhLiuoceanhLiu 3311 gold badge11 silver badge44 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Looks like the closing operation of the plugin uses a timer to do some cleanup, which is executed after 300ms, so the new alert also is getting cleaned up.

One hack to fix it is to use a timer like

swal({
    title: "xxx",
    type: "warning",
    showCancelButton: true
  },
  function(isConfirm) {
    debugger;
    setTimeout(function() {
      if (isConfirm) {
        swal("yes, do it!");
      } else {
        swal("cannel!");
      }
    }, 400)
  }
);

<script src="https://cdnjs.cloudflare./ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />

As the problem has been solved, consider this just an another approach.

You can also use event.preventDefault() for the 2nd sweetalert. I got stuck in the same situation, except that I only had 1 sweetalert to be displayed.

From this mozilla page,

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

On clicking the submit button, it appeared for an instance and then I was directed to another page (specified in action attribute). Since this was happening by default, using event.preventDefault() made it stay.

Thanks for sharing your doubt !

just add event.preventDefault(); before swal function it will prevent it from disappearing.

Set the closeonconfirm attribute to false i.e. closeOnConfirm: false,

Once You calling to the function which is show the sweet alert make sure calling button type should keep as button not submit.

<form  method="post">                                 
 <button  type="button" class="btn-wide btn btn-info" onclick="buy_harvest()">Buy</button>
                                            <button  type="submit" class="btn-wide btn-shadow btn btn-success" name="good_condition">Good condition</button>
                                            <button  type="submit" class="btn-wide btn btn-danger" name="inedible">Inedible</button>                                              </form>  

<script>
    function buy_harvest(){
       

    var { value: formValues } = Swal.fire({
        title: 'How mutch want to Buy?',
        showCancelButton: true,
        confirmButtonText: `Buy`,
        html:
          '<div style="float:left;"><input type="text" id="buy_qty" style="width:150px;"><label> Quanity </label></div>' ,
          
        focusConfirm: false,
        preConfirm: () => {
          var buy_qty = document.getElementById("buy_qty").value;
          if(buy_qty!="" || buy_qty!=0){
           
            //call to another function and pass value
            process_buy(buy_qty);
          }       
        }
      })
    }
</script> 

本文标签： javascriptsweetalert disappear InstantlyStack Overflow