SweetAlert while navigating to other page - javascript

In my application if I didnot click save and want to navigate from current page it should ask sweet alert are you sure want to leave? and two buttons save and leave. How can I do that.
Currently I am using jquery and It shows sweetalert box when I click on any anchor tag but immediately navigates to other page.
My Code is
jQuery(document).click(function(e) {
if (jQuery(e.target).is('a')) {
swal({
title: "Are you sure?",
text: "Want to continue without saving?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Leave",
closeOnConfirm: false,
html: false
}
);
}
});

At first you need to prevent default behavior of an <a> element since you missed it, it will still redirect regarding of your action, second is that you need to redirect user if confirm was clicked in swal like:
jQuery(document).click(function(e)
{
if (jQuery(e.target).is('a'))
{
// Prevent default behavior
e.preventDefault();
swal({
title: "Are you sure?",
text: "Want to continue without saving?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Leave",
closeOnConfirm: false,
html: false
}, function (isConfirm) {
if (isConfirm)
{
// If user clicked confirm navigate away
window.location = jQuery(e.target).attr("href");
}
});
return false;
}
});
hope that helps

Take a look at Event.preventDefault() or e.preventDefault()
That anchor tag a will create an event to navigate to its url, even if it's href=#.

Related

Disable Confirm Button onclick - Duplicate actions

When I click that button repeatedly, it performs the same action repeatedly. Does anyone know a way to disable the confirmation button after the first click?
$('#btn-executar-procedimento').on('click', function(e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "Confirm this",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Confirm!",
cancelButtonText: "Cancel!",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm) {
$('#executar-form').submit();
}
});
One way is to use unbind() function like this
$('#btn-executar-procedimento').on('click', function(e) {
$(this).unbind('click');
e.preventDefault();
Multiple Solutions are possible:
1.) Just put a boolean and change the value as soon as someone has clicked the button first time and of course check for it :)
2.) If you really don't want to show that again then remove/unbind the action handler. (But what happens if someone cancels the popup, then you would need again the handler)
My solution is pretty simple. Just disable the button after the first click using disabled property:
$('#btn-executar-procedimento').on('click', function(e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "Confirm this",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Confirm!",
cancelButtonText: "Cancel!",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm) {
$('#executar-form').submit();
//disable the button
$('#btn-executar-procedimento').disabled = true;
}
});
There can be many solutions but the easy and best ones are
To use CSS
1.Hide the button if not needed further using display: none
2.You can also use pointer-events: none.
2.Disabled attribute once the function call is done.
//disable the button after submit
$('#btn-executar-procedimento').disabled = true;
3.Use JS to unbind the event/action
remove/unbind the action handler.
$(this).unbind('click');
There is the other method also but these are the easiest ones.
$('#btn-executar-procedimento').on('click', function(e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "Confirm this",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Confirm!",
cancelButtonText: "Cancel!",
closeOnConfirm: false,
closeOnCancel: true
}, function(isConfirm){
if (isConfirm) {
$('#executar-form').submit();
**//ALL LOGIC HERE AFTER SUBMIT**
}
});

how to stay on the same page when the confirm button of a sweet alert is clicked?

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. :)

Laravel 5.2 - Sweet Alert confirmation box

I have Categories listed in a view. A delete category button is also there in the view which does work and deletes the category when clicked.
What I want to do is before deleting a category, a sweet alert dialog to pop up and ask for confirmation. If confirmed, it should go to the defined route and delete the category.
The delete link is defined like this:
<a id="delete-btn" href="{{ route('admin.categories.destroy', $category->id) }}" class="btn btn-danger">Delete</a>
and the script is defined like this:
<script>
$(document).on('click', '#delete-btn', function(e) {
e.preventDefault();
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled","Category deletion Cancelled", "error");
}
});
});
</script>
However, when I click the delete button it deletes the category, but the sweet alert message doesn't show up.
The route is defined as following:
Route::get('/categories/destroy/{category}', [
'uses' => 'CategoriesController#destroy',
'as' => 'admin.categories.destroy',
]);
and the controller function is defined as:
public function destroy(Category $category)
{
$category->delete();
//this alert is working fine. however, the confirmation alert should appear
//before this one, which doesn't
Alert::success('Category deleted successfully', 'Success')->persistent("Close");
return redirect()->back();
}
Any help would be appreciated. Thanks.
Try this:
<script>
var deleter = {
linkSelector : "a#delete-btn",
init: function() {
$(this.linkSelector).on('click', {self:this}, this.handleClick);
},
handleClick: function(event) {
event.preventDefault();
var self = event.data.self;
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled", "Category deletion Cancelled", "error");
}
});
},
};
deleter.init();
</script>
EDIT: From your comment at #kalyan-singh-rathore's answer, I think you're not properly injecting the script in your blade template. If you're extending a base layout, make sure you've included the script or yielded it from a child layout.
Write anchor in below way.
Delete
Now in URL select change href to customParam.
function (isConfirm) {
if (isConfirm) {
window.location = link.attr('customParam');
} else {
swal("cancelled", "Category deletion Cancelled", "error");
}
}
Basically in your case both href and event lisner are on click.
Try this one it worked out for me :)
document.querySelector('#promote').addEventListener('submit', function (e) {
let form = this;
e.preventDefault(); // <--- prevent form from submitting
swal({
title: "Promote Students",
text: "Are you sure you want to proceed!",
type: "warning",
showCancelButton: true,
// confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false,
dangerMode: true,
}).then((willPromote) => {
e.preventDefault();
if (willPromote.value) {
form.submit(); // <--- submit form programmatically
} else {
swal("Cancelled", "No students have been promoted :)", "error");
e.preventDefault();
return false;
}
});
});

How to wait for user response on Meteor AutoForm submission?

I am using Meteor and Aldeed's Autoform. I want to check that the user is certain before submission takes place. I have tried many things but when I press the button, the form submits anyway. Here's what I have now, which produces a modal nicely (with SweetAlert) even though submission occurs in the background anyway:
AutoForm.hooks({
createEventForm: {
before: function() {
this.event.preventDefault();
},
beginSubmit: function() {
this.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: true },
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
},
How can I make the form wait for the user to confirm or cancel the operation?
Thanks!
The beginSubmit is called at the beginning of the form submission. As the documentation states, it can be used to disable/enable buttons or showing a wait message when submitting longer requests. If you want to display a confirmation message and submit the form depending on the user's decision, you need to use the before hook.
For example:
AutoForm.hooks({
createEventForm: hooksObject
});
var hooksObject = {
before: {
insert: function(doc) {
var self = this;
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: true
}, function(isConfirm) {
if (isConfirm) {
/* Submit form: */
self.result(doc);
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
/* Async cancel form submission: */
self.result(false);
}
});
}
}
}

Sweet alert no works with cancel button

I'm using the sweet alert library and I have a problem with the cancel button. This is my code for the sweet alert:
sweetAlert({
title: title,
text: text + ' ' + courseList,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: confirmButtonText,
cancelButtonText: "Continue with purchase",
closeOnConfirm: false,
closeOnCancel: false,
html: true
},
function(isConfirm) {
if (isConfirm) {
angular.forEach(repeatedCourses, function(repeatedCourse) {
$rootScope.$apply(function() {
this.removeCoursePurchase(repeatedCourse);
}.bind(this));
}.bind(this));
$rootScope.$broadcast('uncheckCheckboxes');
swal("Deleted!", "Your purchase has been refreshed.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
}.bind(this));
When the user click on the confirm button, works fine, but If the cancel button is clicked doesn't do anything, it doesn't appear the "Cancelled" box and I don't know why!
Remove the .bind(this) attached to the callback function and it will work.

Categories