CODEWITHSUNDEEP
jquerycssasp.net
Ika
Ika

Reputation: 211

sweetAlert - not calling function on confirm button click

I added following alert by following this but no functions are getting called when I click cancel or confirm buttons, am I doing something wrong? My master page has link to css: <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet" /> 

            sweetAlert({
                html: true,
                title: 'Error',
                text: "test",
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Check',            
            }).then((result) => {
                if (result.value) {
                    sweetAlert("Yes", "Blah", "info");
                } else {                   
                    sweetAlert("No", "Blah", "info");
                }
                });

Upvotes: 3

Views: 4212

Answers (1)

Admir
Admir

Reputation: 155

If you're using jQuery, attach click event on DOM element where you want to call action, and fire SweetAlert popup. Use SweetAlert or sweetAlert instances to trigger (fire) event.

Here is example that will help you start with:

$(function() {
  const events = {
    click: 'click'
  };
  
  const $button = $('#somethingToDo');
  
  $button.on(events.click, function(event) {
    const config = {
      html: true,
      title: 'Error',
      text: 'test',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Check',    
    };
    
    // first variant
    sweetAlert.fire(config).then(callback);
    
    function callback(result) {
      if (result.value) {
        // second variant 
        SweetAlert.fire("Yes", "Blah", "info");
      } else {
        // second variant 
        SweetAlert.fire("No", "Blah", "info");
      }
    }
  });
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="somethingToDo">
  Do something
</button>

Upvotes: 3

Related Questions