Styling SweetAlert2

Hello,

I am trying to style SweetAlert2:

  function myFunction() {

    Swal.fire({
       title: "Data lama akan dihapus!",
       icon: "warning",
       showCancelButton: true,
       confirmButtonText: "Lanjut"    
     });
  }

It looks good, except that I wonder why after 2 seconds it automatically confirm, evenif I pressed Cancel. Any idea why?

ref: https://sweetalert2.github.io/

LaryAI

1 year ago

Level 58

It sounds like you are experiencing an issue where the SweetAlert2 modal automatically confirms after 2 seconds, even if you press the Cancel button. This behavior is not typical for SweetAlert2 and might be caused by some additional code or settings that are not shown in your example.

To help you better, let's ensure that your SweetAlert2 configuration is correct and doesn't include any unintended behavior. Here is a basic example of how to use SweetAlert2 with proper styling and functionality:

function myFunction() {
    Swal.fire({
        title: "Data lama akan dihapus!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Lanjut",
        cancelButtonText: "Batal"
    }).then((result) => {
        if (result.isConfirmed) {
            // Handle the confirm action
            console.log("Confirmed");
        } else if (result.isDismissed) {
            // Handle the cancel action
            console.log("Cancelled");
        }
    });
}

In this example:

showCancelButton: true enables the Cancel button.
confirmButtonText: "Lanjut" sets the text for the confirm button.
cancelButtonText: "Batal" sets the text for the cancel button.
The .then((result) => { ... }) block handles the actions based on whether the user confirmed or canceled the alert.

If the alert is still automatically confirming after 2 seconds, check for any additional JavaScript code that might be interacting with the SweetAlert2 modal. For instance, ensure there are no setTimeout functions or other event listeners that might be triggering the confirm action.

If you have any additional code or settings that might be affecting the behavior, please share them so we can provide a more accurate solution.

davy_yg

1 year ago

Level 27

@Snapey Using SweetAlert2 is already styling, before I only use confirm() which has a standard styling.

@laryai

on top I have:

	<script>

	$(document).ready(function(){

  		setTimeout(function(){
      			$('.alert').fadeOut('fast');
  		}, 3000);
 });

	</script>

but should the setTimeout effecting the SweetAlert2? Also, it automatically confirm after 2 seconds and evenif I pressed the cancel button.

Snapey

1 year ago

Level 122

what has your question got to do with styling?

davy_yg

1 year ago

Level 27

Here is my button code:

	<span style="margin-left: 250px;"><button class="btn btn-primary" type="submit" onclick="myFunction()">Isi Sample Data</button></span>

Snapey

1 year ago

Level 122

@davy_yg probably because you have to prevent default behaviour of submit.

amitsolanki24_

1 year ago

Best Answer

Level 8

It looks good, except that I wonder why after 2 seconds it automatically confirm, evenif I pressed Cancel. Any idea why?

Because you have set button type to submit change it to button type="button"

And then update below code and write form submit code in then() function of sweat alert.

Swal.fire({
  title: "Do you want to save the changes?",
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: "Save",
  denyButtonText: `Don't save`
}).then((result) => {
  
  if (result.isConfirmed) {
    Swal.fire("Saved!", "", "success");
    // form submit event comes here
  } else if (result.isDenied) {

    Swal.fire("Changes are not saved", "", "info");
  }

});

davy_yg

1 year ago

Level 27

Solved.

...

<span style="margin-left: 250px;"><button class="btn btn-primary" type="button" onclick="myFunction()">Isi Sample Data</button></span>

...

<script>

function myFunction() {
	Swal.fire({
    	title: "Data lama akan dihapus!",
    	icon: "warning",
    	showCancelButton: true,
    	confirmButtonText: "Lanjut",
    	cancelButtonText: "Batal"
	}).then((result) => {
    	if (result.isConfirmed) {
        	// Handle the confirm action
        	console.log("Confirmed")
        	$("form").submit();
        	// taruh disini
    	} else if (result.isDismissed) {
        	// Handle the cancel action
        	console.log("Cancelled");
    	}
	});

}

</script>

Thanks @amitsolanki24_

Please or to participate in this conversation.