We Keep Coding

How can i redirect alert button on chice using sweetAlert js?

I'm using sweetAlert this is working fine with single button but now i want to click button with choice but I'm not able to that, What is wrong?
Now my redirection is working on both buttons but i want to click only for single button. How can i do that?
What i tried:-
function CallMessage() {
swal({
title: 'this is title',
text: 'message',
buttons: ["Finish Now", "Exit Anyway"]
}).then(function() {
window.location = 'login.aspx';
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button onclick="CallMessage();">Button</button>
Answer will be appriciated!

The promise returned by swal() is resolved to the value of the clicked button. When using the array shorthand to set the buttons property, the first (cancel) button returns null, while the rest return true:
function CallMessage() {
swal({
title: 'this is title',
text: 'message',
buttons: [ 'Finish Now', 'Exit Anyway' ]
}).then(value => {
console.log(value);
if (value) {
console.log('Redirecting!');
// location.href = 'login.aspx';
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<button onclick="CallMessage();">Button</button>
If you have more than two buttons, you can also set custom values for each one using an object instead of an array. See the Advanced Examples section of the docs for more details.

Using data attributes with jquery.confirm.js

I'm trying to utilise the jquery.confirm script. It's all firing as expected but I'm trying to use custom data attributes that are passed into a controller elsewhere on the site, but I'm getting the error of undefined.
<a class="confirmMemberDelete" data-title="Mr Goose" data-user="CON-000132456" data-username="Mr Goose" href="#">
$(".confirmMemberDelete").confirm({
text: "Are you sure that you wish to delete this user?",
confirm: function (button) {
var conNum = $(this).attr('data-user');
var conName = $(this).attr('data-username');
alert("You just confirmed.");
alert($(this).attr('data-user'));
},
cancel: function (button) {
alert("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
The two custom data attributes are data-user and data-username. data-title is used by the confirm script as a title for the confirmation box.
I can't find any documentation online so any help would be marvellous.

Still not fixed in version 3.3.4, but I'm able to extract the data attributes the following way.
<a class="confirmMemberDelete" data-title="Mr Goose" data-user="CON-000132456" data-username="Mr Goose" href="#">
$('.confirmMemberDelete').confirm({
title: 'Make this my profile picture',
buttons: {
ok: function () {
let user = $(this)[0].$target[0].dataset.user;
let username = $(this)[0].$target[0].dataset.username;
console.log(user, username);
},
cancel: function () {
}
}
});
Check out this fiddle

Jquery.valid() does not work after calling a jquery.dialog

I have one form that is in a dialog. When I apply the function:
var form = $('#xxx');
form.valid()
It works as expected, but this dialog has a button that currently calls another dialog. This second dialog has a form too with its own validation. When I close the second dialog, and then close the first one and open this last again, the validation of the first dialog,I mean "jquery.valid()", does not work. I noticed that the "form.validate.currentelement" of the first dialog, before calling the second dialog has data, but after calling the second one it does not.
part of my code
Landing page
//my first dialog
<div id="dgAddEdit" style="display: none;">
<div id="dgAddEditContent"></div>
</div>
<!-- my second dialog-->
<div id="dgVendorSearch" title="Vendor Search" class="dialogs"></div>
<div id="dgCollectible">
#using (Html.BeginForm("", "", FormMethod.Post, new { id = "" }))
{
//some html tags for the landing
}
</div>
Calling the dialogs
$('#dgAddEdit').dialog("option", "buttons", [
{ id: "SaveButton", text: "Save", click: function () { SaveFeature(); } },
{ id: "CancelButton", text: "Cancel", click: function () { $(this).dialog("close"); } },
{
id: "VendorSearch", text: "Vendor Search", click: function () {
$("#dgVendorSearch").dialog('open');
}
}
]);
calling the first dialog
$('#dgAddEdit').dialog("open");

my problem was that the second dialog had a reference to "jquery.valid" , this deleted all the validation rules of the first dialog, after deleting this reference all the dialogs are working as expected.

record being deleted without confirmation?

I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.

You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation

Replace javascript confirm by jquery confirm

I use the following code to use default javascript confirm by jquery ui dialogue.
jQuery.extend({
confirm: function(message, title, okAction) {
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
}
});
jQuery.confirm(
"LogOut",
"Do you want to log out",
function() {
});
Now I need to use this same code in a log out action. So that I can replace the javascript confirm in the code.
<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>
The problem I am facing now is, when I replace the confirm with another function and wait for its return value to make the decision, the dialogue box doesn't return the value to a variable. These two functions are executed simultaniously(its showing the alert, but it also get directed to the href target). Is there any way that the method can return a true or false value and hence proceed to the href target.
reference: jQuery Extend,jQuery UI Replacement for alert
related question : js override confirm

I don't know if you could actually do that as the jQuery.dialog function is asynchronous.
You could use a promise library to setup the button click events. But then you cannot simply specify a method in the onclick attribute and have to do it through code
var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise
jsFiddle
jQuery.extend({
confirm: function(message, title, okAction) {
var d = jQuery.Deferred();
jQuery("<div></div>").dialog({
// Remove the closing 'X' from the dialog
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
d.resolve(true);
return true;
},
"Cancel": function() {
jQuery(this).dialog("close");
d.resolve(false);
return false;
}
},
close: function(event, ui) { jQuery(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
return d.promise();
}
});
For more info about jQuery promise library see jQuery reference
Edit: Another way to to set it up: jsFiddle

The problem is that default confirm dialog is synchronus and block the whole browser UI. JQuery dialog is asynchronous and does not block UI (because it needs it to render).
So the answer to your problem is following. You need to change:
buttons: {
"Ok": function() {
window.location = "/future/myhome/head?$event=logout"
},
and
<a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a>

Personally, I use confirm more for conditional execution of a function or posting a form...
So, using your example, I'd have made the following small changes:
buttons: {
"Ok": function() {
jQuery(this).dialog("close");
okAction();
},
And then called the Confirm as follows:
onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>