Toast (ok)
Toast
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://localhost/library/sweetalert2/sweetalert2.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost/library/fontawesome/css/all.css">
<script type="text/javascript" src="http://localhost/library/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/library/sweetalert2/sweetalert2.min.js"></script>
</head>
<body>
<button type="button" id="button">Nhấn vào đây!</button>
<script>
jQuery(document).ready(function($) {
$('#button').click(function(event) {
var id = 65352;
Swal.fire({
title: 'settings for project '+id,
html:
"<p>some setting</p>"+
"<input class='toggle' id='setting' data-docid='"+id+"' type='checkbox' checked>",
showCancelButton: true,
showConfirmButton: false,
cancelButtonText: 'close',
onBeforeOpen: () => {
const setting = $("#setting[data-docid="+id+"]");
$(setting).on("change",function(){
console.log($(this).attr("checked"));
if($(this).attr("checked") == "checked"){
$checked = 1;
}else{
$checked = 0;
}
$.parameters = {
id: id,
checked: $checked,
type: "accept"
}
//using an api to communicate between client and server
result = "TRUE"
if(result.indexOf("TRUE") > -1){
const Toast = Swal.mixin({ //when firing the toast, the first window closes automatically
toast: true,
position: 'top-end',
showConfirmButton: true,
timer: 3000,
onBeforeOpen: () => {
Swal.showLoading()
}
});
Toast.fire({
type: 'success',
title: 'changed the thingy successfully'
})
}else{
const Toast = Swal.mixin({ //when firing the toast, the first window closes automatically
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
Toast.fire({
type: 'error',
title: 'cant change the thingy'
})
}
});
}
})
});
});
</script>
</body>
</html>Last updated