Develop Reference

Prevent user to leave page without the confirmation

I have found on StackOverflow this script that handles the issue when a user wants to leave the page, to ask him before doing it.
ISSUE
It is working fine (even though there is probably a much better solution) but I have realized that it is causing one "bug". When a user sends data from the form and the script asks him does he want to leave the page (because of the redirect) it still sends data. So, even if the user clicks on "Cancel" it will still proceed to the store() method and if the user adds something more and sends again the data I get duplicates. Is there a way to include "stop propagation" in this script?
CODE
window.onbeforeunload = function () {
return 'Are you sure you want to close this website?';
};
Additional question
Since this script is running with the Laravel Livewire, every time I click on any button related to the livewire (which won't redirect the user to the other page) script prompts the popup to ask if the user is sure he wants to leave the page. Is there any workaround (if you need some other code, write a comment because I am not sure which part could help you at all :) ) for this issue?

Try this:
<script>
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
</script>
Here is a working jsFiddle

Is there anyway to find whether the add to home screen - app icon has been added to home screen using Javascript?

Configured our app to support Add to home screen option, to ask for permission we added one button, onclick the prompt will ask to add the icon in home screen. If the user keep clicking close, then it wont ask further, so the button becomes non-functional.
If the user already added icon, i didn't get any method to find it.

There isn't any method best known to me to capture whether the app icon has been added to home screen or not. Simple reason for that could be absence of any valid existing use case. However, what you can capture is the action taken by the user. When the A2HS banner is shown, you can tap into the beforeinstallprompt event to determine the choice made by the user when presented with the banner.
The code below shows this in action:
window.addEventListener('beforeinstallprompt', function(event) {
event.userChoice.then(function(result) {
if(result.outcome == 'dismissed') {
// User dismissed
}
else {
// User accepted
}
});
});
UPDATE:
While going through the official doc for A2HS, found a way to determine if the app was successfully added to the users home screen after they accepted the prompt, you can listen for the appinstalled event. Code:
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});

appinstalled does not work
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});

How to show dialog box if user wants to close the browser and then check what they selected?

I'm wondering if there is any solution in JavaScript or JQuery to show the message to the user if they want to close their browser/window? I know there is an option to use beforeunload but the only problem is that I couldn't find what user selects Leave Page or Stay on Page. Reason why I'm asking if this is possible is because if user selects Leave Page I want to process AJAX call and then close the browser. All solutions so far would run AJAX call before user selects the option. Here is example of my current function that I use:
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "Your browser is now offline.",
recID = $.trim($("#recordID").val());
recID ? removeLock(recID) : ""; // Call function to remove record from the Lock table.
(e || window.event).returnValue = confirmationMessage; //I'm not sure what is the purpose of this line ???
return confirmationMessage;
});
As you can see above in the code my removeLock() function will execute as soon as user clicks on the X to close the browser/window. That will remove record from the lock table. This can be the problem if user decides to stay on the page. I'm wondering if there is any alternative solution or the way to check what user selects? Thank you.

I read your post as this may come in handy for tracking user behaviour one day.
I think your question is answered in an older post:
Capturing result of window.onbeforeunload confirmation dialog
HTH

Need two action in chrome extension browser action

I am trying to create one chrome extension with content script interaction. I am facing one problem in the browser action scenario. I have tried to search the solution in the google but vain.
Here is the scenario.
I want two different action when click on the chrome extension icon (browser action). If i have some key stored in local storage, i need to send a message to content script else i need to show popup.
Say for an example, if suppose i am trying to validate whether user is logged in gmail or not. At first time if user didn't logged in i need to show popup with message "please log in" when click on the extension icon. If user already logged in then i will store it in local storage, so if user click again in the icon instead of showing popup need to contact content script.
Please suggest.
EDIT : UPDATING MY CODE HERE
in background.js. (problem is it is not going into the else part. always its showing popup eventhough it has local storage value)
if(localStorage.accessToken=="" || localStorage.accessToken==undefined){
chrome.browserAction.setPopup({
popup : "popup.html"
})
}else{
chrome.browserAction.onClicked.addListener(function(e){
chrome.tabs.query({active: true, currentWindow: true},function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id,{accesskey:localStorage.accessToken},function(response) {});
});
})
console.log('already logged in')
}

The browserAction.onClicked event does not fire when it already has a popup.

It's not entirely clear what you need help with here so I'm guessing based on the wording of your question that you need help with either logic or localStorage.
I don't know a ton about events on the chrome extension icon, but assuming that you can get that event your code ought to look something like the following:
// this code goes inside your icon click handler
if (localStorage.loggedIn === 'loggedIn') {
// do whatever action you want to happen if the user is logged in
} else {
if (/* check to see if logged in goes here*/) {
// user is logged in so store value so you don't have to check again
localStorage.loggedIn = 'loggedIn';
} else {
localStorage.clear('loggedIn');
alert("Please login to gmail first")
}
}
Of course, this code does what you asked, but it doesn't handle the case where the user clicks on the button, was logged in, then logs out at some future point and clicks the button again. The localStorage value wouldn't have been reset in that case, unless you do it elsewhere.

FB Login button not calling onlogin function

I have my fb login button created as so
<fb:login-button perms="email" size="small" onlogin="check_login_session()">Sign Up Using Facebook</fb:login-button>
I have also defined the check_login_session function already as I'm using it on a .click link elsewhere on the page(which does work). However, my problem is when I'm already logged in to FB and I click the button, the FB popup appears, then dissapears and it does nothing. The onlogin is not called nor is any error displayed.
If I was to logout however, and then click the button, it would give me the fb login prompt, and after filled out and submitted would behave as it is supposed to. It's only when I'm already logged in and I click the FB login button that the issue occurs. Any Ideas?
Edit: I found that it does call it if I say put alert("Test") in the onlogin but any function I define on the page and try to call it returns saying it's not defined.

I think you want to be notified about a logged in user either after a login happened or of a user comes to teh page and is already logged in. In this case you have to subscribe to the auth event and handle it:
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
//yourcode
} else if (response.status === 'not_authorized') {
//your code
} else {
//yourcode
}
});

The new facebook login flow says to only display the facebook login button if the user is not currently logged into facebook. If you display it anyway, nothing will happen when they click on it because it will detect that the user is already logged into facebook and so will exit the login process and the post login hook won't be called. The facebook documentation says to first detect whether the user is already logged into facebook, and if they are logged in, grab the facebook uid and simply execute the function you would have called as part of the post login hook. The facebook login button is simply that--a button to log into facebook and not a button to log into your site.

The event says onlogin, so it will only execute when you login through Facebook Connect.
If you are already logged in on Facebook Connect, then the function won't execute because you're already logged in...?

Most likely the function you're trying to call isn't accessible on that page even though you think it should be. Make sure you removed the () after the function's name. The fact that "alert" does work but your function doesn't kind of proves that. Make sure your function can be accessed by the script by making it global and ensuring your script is loaded.

The function has to be defined on the window. The solution is:
// somewhere before the button is rendered
window.loginCallback = () => {
// callback logic
}
<div
className="fb-login-button"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
data-onlogin="loginCallback();"
></div>