Develop Reference

Alert user before leaving web page with unsaved changes on form

I have forms in my application, all in one page, and I change them on button click without refreshing page.
How can I secure the form in such a way that if someone navigates away, change form or closes the browser tab, they should be prompted to to confirm they really want to leave the form with unsaved data?
Yes I know about onbeforeunload event, but it wouldn't work if I change form without refreshing page
Hope someone understand me, and can help with an advice
P.S. I work with svelte

Whether there was a navigation or not is irrelevant, you just have to react to changes, e.g. you can handle a change event on the form-level to add the beforeunload handler which adds the confirmation question.
Something like:
<script>
function onChange() {
window.addEventListener('beforeunload', e => {
e.preventDefault()
return e.returnValue = "Are you sure you want to exit?";
});
}
</script>
<form on:change={onChange}>
...
</form>
(Maybe add a flag & if to prevent adding duplicate listeners.)
The change event only captures common interactions with native input elements. If the event is stopped from reaching the form (or whatever container you add the listener on) this will not work. It will also not capture more complex logic, like adding an item to some list.
Depending on your concrete code, you may need to handle additional/different events or changes.
If you use a client-side router of some kind you also have to signal to it, that it should not navigate away because beforeunload will not be triggered. How this is done depends entirely on the router being used.

Reload the page if i click on outside the multiple dropdown box using javascript

I have a small query, I have a multiple dropdown box in my form. after selecting multiple value, if I click on outside the multiple drop down box page should reload. How can I make it happen using javascript. I have used "onmouseout(reload.form)" option but it is not working. Please help me on this.
Thanks
Ranjith

In this scenario, you might need click event rather mouseout(which is not on click but when mouse loses the focus).
For more details about click outside the element refer the below link
Javascript Detect Click event outside of div
So once you capture the click out event, you can just trigger the page load using
window.location.reload(true) or window.location.reload(false)
true or false depends on you need to load from cache or server.
Hope it helps!!

Seems like you should really connect to the change() signal on the select box instead. By depending on the mouse event, you will prevent people form using your form with the keyboard only, for instance. onmouseout will also not work on mobile devices

Persistent page action icon

I want to display a notification for the user that will remain constantly visible in the form of a page action until the user does something. I am using this code right now:
chrome.tabs.getSelected(null, function (tab) {
chrome.pageAction.show(tab.id);
});
But that only creates a page action icon on the active tab when the extension is loaded. Instead, I want the icon to show all the time no matter what page or tab the user is on. It also needs to go away when the user does what is necessary to deal with the notification.
I was thinking of two ideas. The first was looping through and adding a page action to every tab, then hooking the new tab and navigation events and adding it to each of those. My second idea was hooking the active tab change event and adding it to the active tab then removing it from the former tab when changing tabs next.
But I thought that there's still probably a better way I didn't think of or didn't know about. So what's the best way to accomplish this?

You need to hook into the onActivated event if you want to get notified of tab changes.
However, that would not be enough, since the page action will reset on navigation. So you'll need to hook into almost every tabs API event to ensure your logic. Also, think of the cleanup required afterwards.
That really does seem like a poor job for a page action. There is also an important consideration that this UI element is not associated, by a typical user, with something that needs attention. Have you considered using notifications instead?
You could use chrome.notifications Rich Notifications together with the priority trick, or just web notifications. In either case it'll be something displayed to the user in a way that is appropriate for "something needs your attention". You can then hook into its onclick event.
If you do want a button, browserAction is totally appropriate. You can dynamically change picture, add a text badge to the icon to attract attention, or just plain disable the button (not hide, but grey out) when there's nothing to do.

According to the documentation, page actions are supposed to be used only for single pages. If you want something to show up on all pages, you should use a browserAction.
Alternatively you can try and set "<all_urls>" in the permissions, but I haven't tested if it actually works.

Is there an event for the browser's back button being pressed?

I am supporting an e-commerce app, which pretty much makes and submits orders.
A user found that if they submit their order, and press back really quickly, they can cause an error condition.
I want to prevent this. When the user clicks submit, I want to bind some kind of event to the browser's back button that instead will redirect them to the Index page. However, after about two hours of Googling (including a few StackOverflow topics), I have not found any clear way of influencing the behavior of the back button.
I briefly attempted to use history.pushState(), but as the HTML 5 documentation mentions, that will not cause a redirect; it merely alters the displayed URL/state.
Similarly, the history.onpopstate event appears unhelpful, because it occurs whenever a state is removed from the history listing; I'm looking for an event that occurs whenever the history listing is traversed backwards.
Question: Does an event for the browser's back button, or at least a way to prevent this particular stupid user trick exist?

You can't listen to the browser back button because it's outside of your reach (it's not part of the DOM).
What you can do is fix the previous page so that it detects if you've used the back button.
Without more information I can't give you any tips on how to achieve that.
Also, an error condition is not necessarily a bad thing. Just make sure it's clear what is happening: the error message should make sense.

Wrong answer...
Instead listen to window.onBeforeUnload and ask the user if he knows what he is doing. Return false if not. This is usually done via a confirm dialogue

Javascript event handler for Facebook Send

I'm integrating the Facebook Send button to our site and I'm trying to run some javascript as soon as the user sends the page to someone. With the Facebook Like button you can subscribe via javascript to the edge.create event which fires when the user Likes the page. Is there an equivalent for the Facebook Send button? I tested it and the edge.create doesn't catch the Send button.
So basically, is there any javascript event handler for the Facebook Send button?

The event you're looking for is "message.send" according to https://developers.facebook.com/docs/reference/plugins/send/

You should be able to add your own listeners by directly subscribing them to the classes prototype.
For example, we use this to reposition the Like/Send menus accordingly once rendered:
var Like = FB.CLASSES['XFBML.Like'];
Like.prototype.subscribe('xd.presentEdgeCommentDialog', function(a){
setTimeout(function(){
var el = $('#like-btn > span.fb_edge_comment_widget');
// console.log(a);
// console.log(el);
el.css('left', '-200px');
el.css('top', '20px');
}, 500);
})
The exact events you can subscribe depend on the class. You'll need to research this by looking to the JS SDK and then backtracking which events are being fired.
Good luck.

Hmm, have you tried to add a function that looks for the send button and adds your own click listener to it when it gets added?
You won't be able to get any information like response.session, but you can tally how many people click the button.
I can see why they didn't include anything to subscribe to with FB.event.subscribe. When they like your page, connect elements on your page are populated with their information when the page reloads (you may reload the page in your method that gets fired). They can send your page to someone without liking you.