I'm new to jQuery and I'm using the confirm box from here. But I'm facing a problem where my current page redirects back to Login page before even confirming my logout in the dialog box.
Below is my script:
$('a#logout').on('click', function () {
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
// $.alert('Confirmed!');
return true;
},
cancel: function () {
// $.alert('Canceled!');
return false;
},
}
});
if(isConfirmed == true){
window.location.href="extra-login.html";
}
});
And this is my HTML
<a href="extra-login.html" id="logout">
Log Out <i class="entypo-logout right"></i>
</a>
Any help would be appreciated. Thanks in advance!
The problem is your anchor elements default action is to take the user to login page which is not prevented.
You can call the event.preventDefault() to do this.
Also the confirm plugin looks like a non blocking plugin, so you need to move the redirect code to the success handler.
$('a#logout').on('click', function(e) {
e.preventDefault();
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function() {
window.location.href = "extra-login.html";
},
cancel: function() {},
}
});
});
I'm guessing the dialogue isn't blocking (I don't know of any that are in JS). You should just put your success code in the callback for the confirm button, like so:
$('a#logout').on('click', function () {
$.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
// $.alert('Confirmed!');
//I'm guessing this function is called when the button is clicked.
window.location.href="extra-login.html";
return true;
},
cancel: function () {
// $.alert('Canceled!');
return false;
},
}
});
});
But the main reason your code is redirecting immediately is the href tag in your link. You basically have a link to another page, that also tries to run some JS, but because it's a link it redirects before the JS can even run. Do this instead:
<a href="#" id="logout">
Log Out <i class="entypo-logout right"></i>
</a>
i am new,too
i hope my suggestion is right but why don't you put href in confirm function.
$('a#logout').on('click', function (event) {
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
window.location.href="extra-login.html";
},
cancel: function () {
event.preventDefault();
},
}
});
});
Why don't you use like this -
$('a#logout').on('click', function(){
if($(this).confirm({title: 'Logout Confirmation', content: 'Are you sure you want to logout?'})){
window.location.href="extra-login.html";
}else{
return false;
}
});
Related
I have a logout button in my navber.blade.php:
<a class="dropdown-item" id="logout" href="{{ route('admin.logout') }}">
{{ __('Logout') }}
</a>
I want that when I click the logout button, it will show me a confirmation message prompting whether you want to logout - (yes or no)? How to do this with jQuery or javascript?
Edit: I have add this jQuery code
<script>
$(document).on("click", "#logout", function(e) {
e.preventDefault();
var link = $(this).attr("href");
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
});
</script>
For logout it's showing message
But not logging out.
Note: I am just beginner of jQuery
I have missed to added
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
This link
I use Electron v13.0.1 from this repo
Need close confirmation, use this implementation:
win.on('close', function (e) {
require('electron').dialog.showMessageBox(this, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
}).then(function (data) {
if (data.response === 0) {
e.preventDefault();
}
});
});
But when I click on the close button dialog appeared on second and the application close without any confirmation or rejection. In other words, the dialog does not create conjunction for close.
What is the problem with my solution?
The problem is that you are calling an asynchronous method and the event function continues execution and eventually returns, before any user input is given.
One way to solve this is to use the showMessageBoxSync function for synchronous operation. This will wait until user selects an option before continuing execution. Like below:
const { dialog } = require('electron');
win.on('close', function (e) {
let response = dialog.showMessageBoxSync(this, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
});
if(response == 1) e.preventDefault();
});
I have a button here with a simple CSS. what I want is, when I hit on that button to reset my style. I use it, I need to add a sweet alert before pressing the button.
<button class="reset-option">Reset Options</button>
document.querySelector(".reset-option").onclick = function () {
localStorage.clear();
window.location.reload();
};
What I want is, add this alert to handle it with javascript.
swal({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
});
I tried to do this but it didn't work.
let resetOption = document.querySelector(".reset-option");
resetOption.onclick = function () {
if (resetOption.window === reload()) {
swal({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
});
}
}
You can have only one onclick handler per element. So here, the second overwrites the first.
Also, Swal returns a promise to handle the result. What is below is real close to the example found here.
I suggest:
document.querySelector(".reset-option").onclick = function () {
swal.fire({
title: "OOPS !",
text: "You Want To Resat Your Style!",
icon: "warning",
showCancelButton: true
}).then((result) => {
if (result.isConfirmed) {
console.log("confirmed");
//localStorage.clear();
//window.location.reload();
}else{
console.log("canceled")
}
})
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.12.5/sweetalert2.min.js"></script>
<button class="reset-option">Reset Options</button>
if you want to show an alert to user before hit the button, you can add mouse hover event to your button.
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
document.querySelector(".reset-option").onclick = function () {
localStorage.clear();
window.location.reload();
};
var cc=document.querySelector(".reset-option")
cc.addEventListener('mouseover', function() {
//your alert code here
alert('Before hit button');
});
I have developed a Window Pop up, using below code:
UPDATED CODE:
Parent.html
<a class="btn btn-primary" onclick="PopUp();">Pop Up</a>
<script>
var popup;
function PopUp() {
document.getElementById('myModal').style.display="block";
popup = window.open('popup.html', 'Google', width=700, height=600);
popup.onbeforeunload = function(){
alert("close");
document.getElementById('myModal').style.display="none";
}
}
</script>
POPUP.html
window.location = "http://www.google.com";
My requirement is that whenever someone close the Window Pop up there should be alert on Parent.html. As we don't have any control on Pop up window.
Is, there any way to do this.??
Try with something like thhis....
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
You can store the result of window.open:
let popup = window.open()
popup.onbeforeunload = function(){ }
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
EDIT
It only works if the popup opens the site in the same domain.
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