Prevent losing form data by navigating away from page - javascript

I am creating a datagrid with hundreds of rows which contain a checkbox on each row so that the user can select an item from the grid.
Now the user may spend a great deal of time going filtering/searching through the grid and ticking the required checkboxes, only to accidentally press the backspace key on their keyboard or click on a hyperlink on the page. And they would lose all their checkbox selections.
So I want to introduce some functionality whereby if at least one checkbox has been ticked, then if the user unintentionally does an action that would navigate them away from the page, then a JavaScript confirm message is displayed to notify the user of this.
The checkboxes would all belong to the same group, for instance it would be called "products".
Is this possible to do at all?

There is a beforeunload event which occurs when the user navigates away: http://jsfiddle.net/FprNV/1/.
Returning a string there results in a message appearing with two buttons (stay/navigate); the exact implementation of this dialog differs across browsers.
$(window).bind('beforeunload', function() {
var checkboxcount = $("input:checkbox:checked").length;
if(checkboxcount > 0) {
return 'Are you sure?';
}
});

Related

Trigger an event on back button in browser/android with javascript

My angular app's content creation flow is being broken by androids and browsers physical buttons which take the user to where they came from instead of previous step in the process. I tried fixing it with locationChangeStart as well as few other similar events, but they all get triggered both by my "Continue" buttons as well as physical "back" buttons.
Is there a way to trigger an event only when user presses browsers/android's back button, or alternatively to know if locationChangeStart was triggered by the back button vs app's button? If possible, I would like avoid adding jQuery as we are not currently using it.
I gave up on trying to detect the user pressing back button and act on it. Instead, make it the default action and change the way our buttons behave. I detect when user is pressing one of our buttons and set a variable based on it.
var navigating = false;
$scope.$on('$locationChangeStart', function(event) {
if($scope.global.application="new-ad" && !navigating){
event.preventDefault();
$scope.areYouSure = true;
}
});
$scope.nextStep = function() {
navigating = true;
$location.url('/step-two');
}
Basically, we first set our variable to false, and if the user presses physical back, it will display the prompt alerting user they will lose their work. However, if the user instead uses our "continue" button, also triggering the locationChange, it will set variable to true, letting the app know what the locationChange is triggered from within the app and allowing it to continue.

Mozilla Extension: Multiple States between multiple tabs

I am creating a mozilla extension that converts the content of a webpage on click of the "convert button"(Label: Convert) in other language
and its label gets converted to English so that on click of that button(Label: English) the content gets converted into original form
I tried to set attribute "changedcontent" with each tab so that on event focus ,focussed tab reads its "changedcontent" attribute and set the label on button ("Convert" or "English")
problem arises where i need to switch between multiple tabs, plugin in the different tab should maintain different state depending on whether it is displaying changed content(should display button label: English)
or it is in its original form(should display button label: "Convert")
so when i click refresh button or click other link in the webpage. The label of the button which is "English" with converted content on the page should gets changed to "Convert"
so for this i have handled page unload event to track page refresh or link click, but since webpage may contain multiple frames/iframes this event is getting called multiple times.
If in the meantime i switch the tab, label of other tab gets converted from "English" to "Convert"
code of the unload event is:
window.addEventListener('unload', unloadingDocument, true);
function unloadingDocument()
{
var currentTab = gBrowser.selectedTab;
currentTab.setAttribute("changedcontent" , "false");//set the transliterated attribute back to false
var convertButton = document.getElementById("convert_button");
convertButton.setAttribute("label","Convert");
}
Please suggest how can i solve this problem and maintain different states of mozilla plugin between multiple tabs.
Thanks
You could use the Session Store API to have independent state between tabs.
-- EDIT:
So if you already have a way to know if a specific tab is "Translated or not", if you want the button to change to have the correct state when another tab is selected, you might want to check for the tabSelect event: Detecting tab selection
In this event you check your tab attribute to check if you have to change or not the label/behaviour of your button.
-- Edit 2 :
If when you click the "Convert" button you do your processing, and you set the attribute changedcontent of that tab to true. Then you have a load/unload listener to check for the refresh, to change the state back to false. Then if you change tabs, you would have the tabSelect event to change the button whenever you change tabs.
If you add this listener when you change changedcontent to true. Then when the event beforeunload is first called, you check if changedcontent is true, you change it to false and remove the listener.

How to determine the selected option on beforeunload event?

Used the following code used to prompt the user while navigating to other page without saving the modified information
$(body).bind("beforeunload", function(e) {
if (isModified == true)
return "Are you sure want to exist without save";
});
I need to disable the buttons in the page, if the user selects an "Leave this Page" option. Other wise might able to select the button again while postbacking. Is there any event available to know the selection of beforeunload.

ExtJs Tab Panel Question

I have a few tabs in a tab panel with similar forms. How do I prevent going to the next tab unless the previous tab is correctly filled? Thanks.
I think your approach is not the best, if you want to create a wizard you should probably use the cardlayout.
If you really want to stick with your current approach, I would hook the beforetabchange event and cancel the event if the form are not valid.
i.e.
tabpanel.on('beforetabchange', function(tb,newtab,oldtab){
// insert your validation here
// if the user cannot go here
return false; // would prevent the change of tab
});

How do i find the new focus item with jquery?

I have a pop up dialog that lets you write text and does stuff when you click a button. My code is below
This function works, i find the new object by looking at e.originalEvent.explicitOriginalTarget. However now i notice if i press tab this function will be called but e.originalEvent.explicitOriginalTarget will give me the same current object instead of the new object. So my dialog doesnt close if a user presses tab to leave. How do i find the correct new dom item?
$('#Area').focusout(function (e) {
if ($(e.originalEvent.explicitOriginalTarget).closest('#Area').size() == 0)
$('#Area').hide();
});
event.relatedTarget worked for me. It will give the other DOM element, within the event, if there is one.
An example would be, if you had 2 buttons controlling the same function, and didn't want their code to be executed if they were clicked consecutively. You could attach a focusout event handler and check for an ID, or a class name.
$(".buttons").on("focusout", function (event) {
if($(event.relatedTarget).prop("class").indexOf("buttons") === -1) {
//code to execute
}
});
Perhaps a better example would be the issue I had.
I created a custom drop down list, that has a button beside it. The drop down list can be opened and closed by either clicking on the list, or the button. It can also be closed be losing focus to either object.
This becomes a problem in the following scenario.
1) user opens drop down list by clicking the list object.
2) user closes drop down list by clicking the button.
What happens is the list opens, but when the user goes to close the list, the list loses focus, which closes it, but since they are clicking on the button, it opens back up. The focusout causes the two objects to cancel each other out, in this type of scenario.
By writing the focusout event, I can now set it to only trigger when the relatedTarget doesn't have the same class as the target that called the event.
$(".listControl").on("focusout", function (event) {
if($(event.relatedTarget).prop("class").indexOf("listControl") === -1) {
//Close the drop down list
}
});
http://api.jquery.com/event.relatedTarget/
Check out this question/answer How to select an element that has focus on it with jQuery
I think the reason why you don't get anything with $("*:focus"); in Firebug console is when you click the console, the element loses focus.
And if you want to tackle it with events, the opposite of focus() is blur().
Edit
Maybe you can even try a different approach. If your only concern is watching for tab key, you can use .keypress() event and watch for tab keycode which is 9.

Categories