We Keep Coding

why my function inside button didnt work? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
so this is my highschool project,
This is the Button
<button onclick="btncncl(); location.href='hapus.php?id=<?= $dp["ID"]; ?>'" class="button-64" role="button"><span class="text">Delete</span></button>
this is the javascript (swal)
function btncncl() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
the button works, but the swal function doesn't appear, and this code is inside php file

Because you are not passing the parameter ID into your function.
<button onclick="btncncl(<?= $dp["ID"]; ?>)" class="button-64" role="button">Delete</button>
function btncncl(id = null) {
if(id){
$.ajax({
url: "yourCancelPHPFile.php",
type: 'POST',
data: {id: id},
dataType: 'json',
success:function(response) {
if(response.success == true) {
Swal.fire({
toast: true,
icon: response.icon,
title: response.title,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
});
} else {
Swal.fire({
toast: true,
icon: response.icon,
title: response.title,
position: 'top',
showConfirmButton: false,
timer: 2000,
timerProgressBar: true,
});
}
}
});
}
}

Here is the solution,
I test it. you also can run and check the code.
Note: this is sweetalert2. You need to link js of it. (external or internal)
check the full code below.
document.getElementById("deleteBtn").addEventListener("click", function () {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
location.href='hapus.php?id=<?= $dp["ID"]; ?>';
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
});
<button id="deleteBtn" class="button-64" role="button"><span class="text">Delete</span></button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
<script src="btncncl.js"></script>
Hope you will fix it : )

function btncncl() {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
<button onclick=btncncl() location.href='hapus.php?id=<?= $dp["ID"]; ?>' class="button-64" role="button"><span class="text">Delete</span></button>
Hey... Look at this part
onclick="btncncl();

How to refresh the page after conform pop up?

When I click the delete button it will conform pop up - if I choose "YES" then success msg wil be shown "Module has been deleted".
$(document).ready(function () {
$("#example tbody").on('click', '.user-Delete', function (e) {
e.preventDefault();
var getId = $(this).data('id');
swal({
title: "Are you sure?",
text: "You will not be able to recover this Module!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
$.ajax({
type: 'POST',
url: '#Url.Action("DeleteModule")',
dataType: 'json',
data: {
ModuleID: getId
},
success: function (data) {
if (data.success) {
swal({
title: "Deleted!",
text: "Module has been deleted.",
type: "success",
confirmButtonClass: "btn-success",
});
}
},
error: function (ex) {
alert('Failed to retrieve Sub Categories : ' + ex);
}
});
} else {
swal({
title: "Cancelled",
text: "Module Record is safe :)",
type: "error",
confirmButtonClass: "btn-danger"
});
}
});
});
});
Inside the message popup if I choose ok button then only page should refresh.
when I click OK then refresh the page

You can use :
window.location.reload();

try this :
success: function (data) {
if (data.success) {
swal({
title: "Deleted!",
text: "Module has been deleted.",
type: "success",
confirmButtonClass: "btn-success",
},
function(){
location.reload();
});
}
}

Try adding this to your swal() call within the success block:
success: function (data) {
if (data.success) {
swal({
title: "Deleted!",
text: "Module has been deleted.",
type: "success",
confirmButtonClass: "btn-success",
})
.then(function() {
location.reload();
});
}
},

You can use below javascript function on ok button click
alert("page refresh")
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
<input type="submit" value="ok" id="submit" onclick="refresh()">

SweetAlert confirm redirect

I've got this function to reset the game after the user presses delete and then presses ok again.
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?", text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"),
function(){
window.location.href = "includes/php/reset.php?naam=<?php echo $naam ?>";
}
});
}
it works if i do the window.location.href at the place were the second swal('deleted'... etc) is at , but if i use a second function after the user preses OK aswell it wont fire the window.location.href

Try this code :-
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?", text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
swal({
title: "Deleted!",
text: "Your imaginary file has been deleted.",
type: "success",
//timer: 3000
},
function(){
window.location.href = "/";
})
});
}

By adding a conditional statement & .then, you can redirect on the "OK" Button, and no need to implement the timer. I use this particular method for API calls.
function confirmReset() {
swal({
title: "Are you sure you want to reset your game?",
text: "You will not be able to recover your game!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Continue to .....',
'success'
).then(function() {
window.location = "/";
})
}
}

Can I disable sweet alert js buttons?

I want to disable the button displayed in sweet alerts so that my user cannot click the button again and again. I have attached the screen shot of the alert here
I want to disable the confirmation button (I don't want the alert to be closed):
swal({
title: "Are you sure?",
text: "You want to add this discount?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Continue",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
}, function (isConfirm) {
if (isConfirm) {
document.getElementById('message_error_new_discount').innerHTML = '';
$.post('./CURL/addNewDiscount.php', JSON.stringify({
"code": discount_code_newDiscount,
"percentage": percentage_newDiscount,
"startDate": sdate_newDiscount,
"endDate": edate_newDiscount
}), function (data) {
var text = "your discount code is " + data.code;
swal({ title: "Discount Added!", text: text, type: "success" }, function () {
window.location = './discountlist.php';
});
});
} else {
swal({ title: "Cancelled", text: "", type: "error" }, function () {
window.location = './discountlist.php';
});
}
});

Here is what you can try, if you don't want to show any button and also you can add timeout, so that it will be closed after sometime.
swal({
title: "Are you sure?",
text: "You want to add this discount?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Continue",
cancelButtonText: "Cancel",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm){
if (isConfirm) {
document.getElementById('message_error_new_discount').innerHTML = '';
$.post('./CURL/addNewDiscount.php',JSON.stringify({
"code": discount_code_newDiscount,
"percentage": percentage_newDiscount,
"startDate": sdate_newDiscount,
"endDate": edate_newDiscount
}),function(data){
var text = "your discount code is "+data.code;
swal({title:"Discount Added!",
text:text,
type:"success",
showCancelButton: false,//There won't be any cancle button
showConfirmButton : false //There won't be any confirm button
},function(){
window.location='./discountlist.php';
});
});
}else{
swal({title:"Cancelled",text:"", type:"error"},function(){
window.location='./discountlist.php';
});
}
});

SweetAlert confirm with Ajax request

I'm new at Javascript - coding it actually for the first time.
I'm trying to do a button with delete confirmation with SweetAlert. Nothing happens when I press the button with onclick="confirmDelete()". This code may be just crab, but here it is:
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
)},
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {id: 5},
dataType: "html",
success: function () {
swal("Done!","It was succesfully deleted!","success");
}
});
}
</script>
Delete
Can I add any alert if deleting fails?

If I understand your question correctly, you are asking how to handle error condition in ajax request. Ajax settings has an error attribute and it can be used like this
$.ajax({
.... other settings you already have
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
Also, you are invoking swal in a wrong way. Swal has a callback like this
swal({settings}, function(isConfirm){});
Overall code would look something like this
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {
id: 5
},
dataType: "html",
success: function () {
swal("Done!", "It was succesfully deleted!", "success");
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
});
}
Here is a demo http://jsfiddle.net/dhirajbodicherla/xe096w10/33/

Try This Code.It's Working fine for me.
$('.delete-confirm').on('click', function() {
var postID = $(this).val();
console.log(postID);
swal({
title: "Are you sure?",
text: "If you delete this post all associated comments also deleted permanently.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
}, function() {
setTimeout(function() {
$.post("delete.php", {
id: postID
},
function(data, status) {
swal({
title: "Deleted!",
text: "Your post has been deleted.",
type: "success"
},
function() {
location.reload();
}
);
}
);
}, 50);
});
});

You have doing mistake in swal({)} it should be swal({})
Updated code :
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(isConfirm){
if (isConfirm) {
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {id: 5},
dataType: "html",
success: function () {
swal("Done!","It was succesfully deleted!","success");
}
});
}else{
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
})
}
</script>

I finally got this to work for that one dude 3 years from now.
function dropConfig(config_index){
swal({
title: "WARNING:",
text: "Are you sure you want to delete this connection?",
type: "warning",
inputType: "submit",
showCancelButton: true,
closeOnConfirm: true,
timer: 2000
}, //end swal }
function(isConfirm) {
if (isConfirm == true) {
//do the ajax stuff.
$.ajax({
method: "POST",
url: "/drop_config",
data: {"curr_config": $("#curr_conf_conn_name_" + config_index).val()}})
.success(function(msg) {
show_notification(msg,"success");
setInterval(function() {.reload();
}, 2500);})
.error(function(msg) {show_notification(msg.responseText,"danger");});
} // end if }
}); // end function } & end swal )
} // end function }