I am trying to call a php file after clicking a button in the sweet alert. This function is the confirmation of Logging the account. Sample process is when you log out the active account, there will be a pop-up message that was the sweet alert, and if you click OK button, then it should have destroyed the session of the user. Can someone help me with this?
Here is my code:
<a href="javascript:swal({title:'Logout',
text:'Do you want to logout this Account?'
, icon:'warning',
buttons: true,
dangerMode: true}).then((willOUT) => {
if (willOUT) {
url: 'page_logout.php', {
icon: 'success',
});
}
});"
class="nav-item dropdown-item">
Log out
</a>
see the console
This would help you. It can take you to page_logout.php
And there is also some error in your swal code which you have written in
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="#" id="a_id">Logout</p>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#a_id").click(function(){
swal({title:'Logout',
text:'Do you want to logout this Account?',
icon:'warning',
buttons: true,
dangerMode: true
})
.then((willOUT) => {
if (willOUT) {
window.location.href = 'page_logout.php', {
icon: 'success',
}
}
});
});
});
</script>
</body>
</html>
or if you want to show message in the same page in which there is logout button, then instead of url in your question do ajax request to page_logout.php. Hope it will help you.
try js:
<button type="button" onclick="logout('<?php echo $SESSION['user']['userId'] ?> ')" class="btn-danger">logout</button>
function logout(id) {
swal({
title: "Do you want to logout this Account?",
type: "error",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes!",
cancelButtonText: "No",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
userLogout(id);
}
});
}
function userLogout(id) {
$.post(base_url + "fileName/method_name", {id: id}, function (data) {
if (data === "1") {
}
else if (data === "0") {
swal("", "Error to logout user.", "warning");
} else {
swal("", data[0], "error");
}
});
}
You can use logout event with function
<script src="https://unpkg.com/sweetalert2#7.8.2/dist/sweetalert2.all.js"></script>
<a onClick="logout()">Logout</a>
<script>
function logout(){
swal({
title: 'Logout',
text: 'Do you want to logout this Account?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes!',
cancelButtonText: 'No.'
}).then(() => {
if (result.value) {
// Call ajax page_logout.php File
} else {
// Close alert
}
});
}
OR
functio logout() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function() {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
})
}
</script>
Related
i need help to fix my problem, i got problem after click cancel button on sweetalert its keep success, i want if i click cancel its not success and cancel function, this is my code on a href
<i class="fa fa-trash"></i>
this is code on javascript
<script type="text/javascript">
jQuery(document).ready(function($){
$('.delete-link').on('click',function(){
var getLink = $(this).attr('href');
swal({
title: 'Apakah kamu yakin? ',
text: "Anda tidak dapat mengembalikan ini!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'Iya, hapus!',
}).then(function () {
swal(
'Terhapus!',
'Data telah dihapus.',
'success',
window.location.href = getLink
)
});
return false;
});
});
</script>
hope you guys can help me :)
I fix my problem
Swal.fire({
title: 'Apakah kamu yakin? ',
text: "Anda tidak dapat mengembalikan ini!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'Iya, hapus!',
cancelButtonText: 'Batal'
}).then(function (result) {
if (result.isConfirmed) {
Swal.fire(
'Terhapus!',
'Data berhasil terhapus.',
'success',
window.location.href = getLink
)
} else if (
result.dismiss === Swal.DismissReason.cancel
) {
Swal.fire(
'Batal',
'Data tidak terhapus.',
'error'
)
}
});
I have linked sweetalert plugin for my confirmation message. But it's not getting the confirmation command (onclick yes/confirm button).
This is my delete button:
<a id="demoSwal" href="{{ route('setting.website_type.destroy', ['id' => $websiteType->id]) }}" class="btn btn-light btn-sm btn-delete demoSwal" data-toggle="tooltip" data-placement="top" title="Delete This Type"><i class="far fa-trash-alt"></i></a>
This is My JS Code:
$(document).ready(function(){
$('.demoSwal').click(function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your Data file has been deleted.", "success");
} else {
swal("Cancelled", "Your Data file is safe :)", "error");
}
});
});
});
This is my Controller Code:
public function destroy($id)
{
$delete_website_type = WebsiteType::find($id);
$delete_website_type->delete();
return redirect()->back();
}
Please Give me the solution...
you have to put .then()
let id = $("#your_id").val();
swal({
title: "Are you sure?",
text: "You will not be able to recover this file!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}).then((isConfirm) => {
if(isConfirm) {
//you can just use fetchAPI
fetch(`route_to_your_destroy_method/${id}`)
.then(response => response.json()
.then(result => {
//your result
if (result == 'success') {
//alert success
}else {
//alert fail
}
}).catch(err => {console.log(err)});
}
});
and in your destroy method
$delete_website_type = WebsiteType::find($id)->delete();
if(delete_website_type) {
$message = 'success';
}else {
$message = 'fail';
}
return json_encode($message);
Give it a try
for delete button:---
<i class="far fa-trash-alt"></i>
in Jquery
$(document).on('click', '.button', function (e) {
e.preventDefault();
var id = $(this).data('id');
swal({
title: "Are you sure!",
type: "error",
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes!",
showCancelButton: true,
},
function() {
$.ajax({
type: "POST",
url: "{{url('/setting/website_type/destroy')}}",
data: {id:id},
success: function (data) {
//
}
});
});
});
and
public function destroy(Request $request)
{
$delete_website_type = WebsiteType::find($request->id)->delete();
return redirect()->route('website.index')
->with('success','Website deleted successfully');
}
i have updated my answer try this one.
This is the sweet-alert I am using and I am changing the color of a button from red to green when it is clicked.but I don't want the page to reload when the confirm button is clicked.The issue is that the sweet alert is not closing when I click the confirm button.any help would be appreciated greatly
function UpdateChildStatus(id,status)
{
$.ajax({
method:'get',
url:'updateChildrenStatus',
data:{id:id,status:status},
success:function(result){
if (status===1)
{
swal({
title: "Successfully Enabled!",
type: "success",
showCancelButton: false,
confirmButtonColor: "#2ECC71",
confirmButtonText: "Ok",
closeOnConfirm: true },
function (confirm) {
location.reload();
});
}
else
{
swal({
title: "Successfully Disabled!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#E74C3C",
confirmButtonText: "Ok",
closeOnConfirm: true },
function (confirm) {
$("#'id'").attr('class', 'btn btn-block btn-success');
event.preventDefault();
});
}
},
error:function(x, y, thrownError){
console.log(thrownError);
}
});
}
if you are calling the function from your html like this:
<button onclick="someFunc()">,
You need to change that to
<button onclick="return someFunc()">
also, at the end of your function in javascript, add:
return false;
That should be enough to prevent the page from reloading on click. If you could provide your code a little bit in detail, I can modify it for you. :)
Currently this is the code I use to run a normal confirm window based on the class "confirmation". This is all done with an href link and not on a button onClick event. As the result of the click is to run another code snipped placed in a different file (with the intention to delete a row in db).
$('.confirmation').on('click', function () {
return confirm('Er du sikker på at du vil slette?');
});
What I want is to replace the confirm method with this SweetAlert function
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(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
Anyone know how to do this, what happens when I try to place the sweetalert inside the onClick function is that the alert appears but it automatically delete the row without me having to confirm anything and the alert fades out.
I found the solution!
$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
swal({
title: "Leave this site?",
text: "If you click 'OK', you will be redirected to " + linkURL,
type: "warning",
showCancelButton: true
}, function() {
// Redirect the user
window.location.href = linkURL;
});
}
I made this codepen in case anyone wants to debug. It appears this is working (check the browser console log for when 'done' is printed)
http://codepen.io/connorjsmith/pen/YXvJoE
$('.confirmation').on('click', function(){
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!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
console.log('done');
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
})
Add event.preventDefault(); preventDefault();
$('.confirmation').on('click', function (event) {
event.preventDefault();
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(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
});
Try this code which is mentioned as in docs:
$('.confirmation').on('click', function () {
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){
return isConfirm; //Will be either true or false
});
});
I wrote this function:
function sweetConfirm(title, text) {
event.preventDefault();
var target = $(event.target);
var href = null;
var form = null;
if (target.is("a")) href = target.attr("href");
else if (target.is("button:submit")) form = target.closest("form");
else if (target.is("button")) href = target.attr("href") || target.attr("value");
swal({
title: title,
text: text,
type: "warning",
allowOutsideClick: true,
showCancelButton: true
}, function () {
if (href) window.location.href = href;
else if (form) form.submit();
});
}
sweetConfirm function will accept a submit button, link button or a normal button and will ask before do the action.
You can use it in the following scenarios:
<a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 1
</a>
<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
Link Button 2
</button>
<form action="/" method="DELETE">
<input type="hidden" name="id" value="..">
<button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
Delete
</button>
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>
<a id="confirmation" href="test">Test</a>
<script type="text/javascript">
$('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});
function warnBeforeRedirect(linkURL) {
Swal({
title: 'sAre you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
window.location.href = linkURL;
}
})
}
</script>
</body>
</html>
This Is My HTML Code
I Have Two Input Button That I Want To Show Sweet Alert When a user Clicks on any Button
<tr class="examples odd" id="UserId_1" role="row">
<td class="sorting_1">1</td>
<td>admin</td><td>Mohammad</td>
<td>Farzin</td><td class="warning"><input type="button"
value="Delete" class="sweet-5" id="btn_Delete1"></td>
</tr>
<tr class="examples even" id="UserId_5" role="row">
<td class="sorting_1">2</td>
<td>11</td><td>11</td>
<td>11</td><td class="warning"><input type="button" value="Delete" class="sweet-5"
id="btn_Delete5"></td>
</tr>
Script
$(document).ready(function () {
document.querySelector('td.warning input').onclick = function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
};
});
Only The First Input Button Shows Sweet Alert, but
when I click the second button nothing happens
You were probably using SweetAlert version 2 and your code applies to version 1.
This should work:
swal({
title: 'Are you sure?',
text: 'Some text.',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes!',
cancelButtonText: 'No.'
}).then(() => {
if (result.value) {
// handle Confirm button click
} else {
// result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
}
});
<script src="https://unpkg.com/sweetalert2#7.8.2/dist/sweetalert2.all.js"></script>
Source:
Migration from Swal1 to Swal2
Try this
$(document).ready(function () {
$('body').on('click', 'td.warning input', function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
});
Check Fiddle
http://jsfiddle.net/hoja/5a6x3m36/5/
If you want sweet alert on click of any button then change your code like below:
$(document).ready(function(){
$(document).on('click', 'button', function(){
Swal.fire({
type: 'success',
title: 'Your work has been done',
showConfirmButton: false,
timer: 1500
})
});
});
with sweet alert it is more easy for example i fave a link what i need is to call onclick function and make sure i included sweetalser.css and sweetalert.min.js i hope this will work for you
<a onclick="sweetAlert('Greetings', 'Hi', 'error');" class="" data-toggle="modal" href='#modale-id'><i class="fa fa-fw fa-plus"></i>Streams</a>
You are only selecting the first element that matches 'td.warning input' selector, that's why nothing happens to the second element.
Try querySelectorAll('td.warning input') method.
This returns an array and you can loop through the array to set Event Listeners.
window.onload=function()
{
swal({ title: "PopOutTitle", text: "Your FIRST Name:", type: "input", showCancelButton: true, OnConfirm:school();
animation: "slide-from-top", inputPlaceholder: name }, function(inputValue){ if (inputValue === false) return false;
if (inputValue === "") { swal.showInputError("You need to write something!"); return false }
document.getElementById("name").innerHTML=inputValue || "Unknown";
});
}
function school(){
swal({ title: "PopOutTitle", text: "Your last Name:", type: "input", showCancelButton: true,
animation: "slide-from-top", inputPlaceholder: name }, function(inputValue){ if (inputValue === false) return false;
if (inputValue === "") { swal.showInputError("You need to write something!"); return false }
document.getElementById("name").innerHTML=inputValue || "Unknown";
});**I want to show multiple swal popout so I want to call the school function when Ok Button is clicked. How can I do this?**
<script>
$(document).ready(function(){
$('.btn-danger').on("click", function(){
swal({
title: "Delete?",
text: "Please ensure and then confirm!",
type: "warning",
showCancelButton: !0,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel!",
reverseButtons: !0
}).then(function (e) {
if (e.value === true) {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var id = $('.btn-danger').attr('data-id');
var cur_row = this;
$.ajax({
type: 'POST',
url: "{{url('/product_delete')}}/" + id,
data: {_token: CSRF_TOKEN},
dataType: 'JSON',
success: function (results) {
if (results.success === true)
{
swal("Done!", results.message, "success");
setTimeout(function(){
location.reload()
}, 2000);
}
else
{
swal("Error!", results.message, "error");
}
}
});
}
});
});
});
</script>
/* Add link in head section */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>
The Below examples are taken from https://sweetalert2.github.io/.
Get the latest version of sweetalter2 from here https://www.bootcdn.cn/limonte-sweetalert2/
Displaying validation error
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.7.0/sweetalert2.all.js"></script>
</head>
<body>
<script>
Swal.fire({
icon: 'error',
title: 'Validation Error!!!',
text: 'Passwords Did not Match!',
footer: 'Why do I have this issue?'
})
</script>
</body>
</html>
Display custom html
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script src="https://cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/11.7.0/sweetalert2.all.js"></script>
</head>
<body>
<script>
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
icon: 'info',
html:
'You can use <b>bold text</b>, ' +
'links ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down'
})
</script>
</body>
</html>