Event handler tab control with jQuery - forms

I have a survey with many input elements, and I have a progress bar that shows how much of the survey that has been filled out/answered by having a click event on the input elements. This works fine until someone use tab control to navigate through the form. Is there a tab control event, or some other event that I can use to track this behaviour?

Use the event focus to capture when the user is tabbing around in your controls:
$.on("focus", "input", function() { });

Related

Aem Event on View Properties in Touch UI

I have a custom multifield JS where I am populating it on dialog ready event.
The same multifield is used in Page Properties field also.
In touch UI when we are viewing the properties of page from sites my custom code doesn't kick in as it's not a dialog.
Can any body help in knowing what is the even when we click on view properties?
Try the event foundation-contentloaded this event might be triggered twice for page properties, so please protect your code against that by making sure it only runs once.
View Properties opens the page in full view instead of a dialog or modal. For touch UI the events are jQuery based events.
You can use document ready event handler for full page
$( document ).ready(function() {
// Handle stuff here
});

Implementing "onclickout" with GWT

I need a way of capturing onclick event when a user clicks out of a FocusPanel(in the form of a dialog box). I need to warn the user to save their work before clicking outside thus losing the panel. I know how to do it in JavaScript but it I am stuck with GWT. Any assistance will be appreciated.
Every click event provides coordinates of a click. Check that these coordinates are outside of your popup panel.
Alternatively, make your PopupPanel modal, so that users can exit it only by clicking on UI elements that you provide, for example, submit and cancel/close buttons.

Sencha Touch/Ext: How to disable a Form inside a Tab Panel (tabpanel) without disabling the Tab

I have a simple Tab Panel (tabpanel) where each Tab is a Form. By default, I want the Form to be disabled (read only), and editable once the user taps the Edit button. By setting the "disabled" config of the form, the Tab is also disabled (cannot tap it).
How can I disable the form while keeping the Tab enabled? I have a couple of solutions to fall back on, but I'm hoping for something cleaner/simpler.
My solutions so far:
Make the Tabs Containers and place the Form inside the Container
Disable at the Fieldset level
My current solution uses the Tab Panel's "initialize" event handler and calls "setDisabled(true)" on each Form Panel.
onTabPanelInitializer: function(component, options){
component.query('formpanel').forEach(function(element, index, array){
element.setDisabled(true);
});
}

How to avoid closing Popup

I have an Popup(not modal window) which shows textbox, when I start typing in the textbox I need to open another popup which show listbox,when I select any item from list box the popup disappears as well the previous popup also disappears how can I avoid closing of the very first popup on close of 2nd popup.
Use a standard "bandpopup" component - in this case you wouldn't even have a second popup to manage. Other thing which comes to my mind is add onClose event listener or event handler - whichever you prefer - and stop event propagation with Event.stop(caughtEvent). It will effectively prevent propagation of OnClose event and your first popup wouldn't be closed.

Ajax Control Toolkit - Use client-side button to activate tab

I'm using the TabContainer/TabPanel components of the Ajax Control Toolkit.
I'd like to hide the tabs themselves and use a button elsewhere on the page to activate (bring to the front) one of the tabs without posting back to the server.
I can show and hide the tabs by grabbing their clientIDs and manually setting the visibility and display styles.
But is there a javascript function I can call to do this and perform whatever magic happens behind the scenes when I click an actual tab?
Example:
var tab = $find(“tabContainer’s ClientID”);
tab.set_activeTabIndex(1); // active the second tab panel
tab.getFirstTab().set_enabled(false); // disable the first panel