Laravel 8 logout confirmation message how to do it? - javascript

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

Related

Alert on Pop Up Close

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.

Add jQuery Confirm before Logout

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;
}
});

jquery popup submit the form in post method

Here is my form
<form method="POST" action="adddriverprocess.php" enctype="multipart/form-data">
<...>
<...>
</form>
It works good in the submit <input type="submit" value="Submit"/>
I am trying to have the jquery popup in it, where by pressing the form should do the post action.
So, i had this jquery button
<button class="delete-btn btn-sm"><span class="icon"></span></button></td>
With
$('.btnActivation').click(fnActivation);
function fnActivation() {
var url =$(this).attr("id");
$("#dialog-confirms").html("Are you sure you want to submit this form ?");
var buttonsConfig = [
{
text: "Yes",
"class": "ok",
click: function() {
$(this).dialog('close');
window.location.href=url;
}
},
{
text: "Cancel",
"class": "cancel",
click: function() {
$(this).dialog('close');
}
}
];
$("#dialog-confirms").dialog({
resizable: false,
modal: true,
title: "Ma$na Taxi",
height: 250,
width: 400,
buttons: buttonsConfig,
});
}
The popup comes good, but when i press the ok button it takes me to the adddriverprocess but in get method but i want it to do in post method with the datas that is filled in the name.
How can i do this ?
Put an ID on your form and change your "Yes" click function to post your form instead of the location.
Change this:
click: function() {
$(this).dialog('close');
window.location.href=url;
}
To this:
click: function() {
$('#MyForm').submit();
$(this).dialog('close');
}
Here's the jQuery submit() documentation:
http://api.jquery.com/submit/

Yes/ No Dialog box before redirection

I have a PHP-based form that will insert data into a database.
What I want to happen is when I click the submit button, a popup box would appear with a yes and no. If yes is chosen, then it will redirect to the page that will insert the form data into the database.
How can this be done? Thanks.
You can make it with js and jQuery. I don't know your context, but it might be like this:
$('<div></div>').appendTo('body')
.html('<div><h6>Do you really want to do this?</h6></div>')
.dialog({
modal: true,
title: 'Title',
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
alert("No");
$('#msg').show();
}

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

Categories