How to set focus on a web element from a Java Bean - javascript

I'm using PrimeFaces, Java and JavaScript in a WebApp and the following problem occured:
I have two RadioButtons and when one of them gets selected, the focus disappears from the selected one. My goal is: The focus must remain there. The RadioButton selection triggers some value changes in the connected Java Bean and depending on these changes beneath the RadioButtons other Web Elements are loaded. So which website part is loaded is specified in the bean. But if these additional Web Elements are loaded, the whole page is updated and the focus that was located on the selected RadioButton disappears and you will find the focus at the page header again.
I'm using the and the elements in the HTML.
I tried following steps:
<t:radio for="radioOne" index="0" renderLogicalId="true"
onclick="focus()" title="#{mybean.title}"/>
but it didn't work, the focus still disappears as soon as the complete page is loaded.
Is there a possibility to use a boolean attribute like focus or focused together with the and get the values directly from the Java Bean? This could be something like this:
<t:radio for="radioOne" index="0" renderLogicalId="true"
title="#{mybean.title}" focused="#{mybean.selected}"/>
with boolean selected defined in the Bean. Unfortunately, I haven't found the focused attribute or something similar in combination with RadioButtons to set the focus from the Bean. Or, maybe you have a different solution that would fit to my case? Many Thanks in advance!

Related

How to fire CoffeeScript/Javascript after user presses back button

Different parts of the UI on my Rails 4 application rely on a dynamically populated select controls, where the option selected in the first select determines the options available in the second select. The script that sets the options of the second select runs when the select's onChange event is fired.
Everything works fine, until the user clicks the browser's back button and returns to the form that contains the two select controls. The first select retains the user's selection, but the second select (which is dynamically populated by the script) reverts to default options.
Browsers don't seem to fire any event at all when the user uses the back button, so there doesn't appear to be anything for me to hang my script on. How can I get my script to run after the user presses the back button?
What are my alternatives if I can't get the actual script to run? Do I have to ditch dynamic selects in favor of a single, massive select that lists all options in one control?
This is an inelegant, but expedient solution:
Rather than recreating my own session history mechanism, I just added a javascript_tag to my form which included a copy of the script which runs on page load (including when the user hits the back button, whereas the script in my assets folder only ran when the page was newly loaded).
This solution isn't DRY by any means, but it works in this limited circumstance.

Lotus Notes:Web page refresh restriction on attachment upload

I have a situation, in which I want to restrict my web page to refresh after I attach a document.
The secnerio is there is some hide when condition written on OnLoad of the Form using javascript, and as soon as the form loads the hide when is active but below that we have more hide when on the basis of selection of a drop down, that is also working, but if I attach a document the web page refreshes and the onload triggers, which further enables the first hide-whne and then again I have to select from drop-down to enable the next hide-when.
Please help if we can restrict web-page refresh after attachment upload.
It sounds like the problem might be more that you have to re-select the drop-down to get the hide-when on that to work after a refresh ? That is, the value is already selected, so there's no change, so the hide-when isn't triggered ?
If so, you probably need to package up the drop-down's hide-when code into a function (if it isn't aleready) and always call that during onload so that if the page refreshes, all hide-when is honoured.
That's assuming the hide-when resulting form the drop-down change is also in Javascript. If it isn't and you have "Refresh fields on keyword change" ticked in the Notes Designer field's properties, then that's what's causing the second refresh, and your best best would be to un-tick that peoperty and simulate the resulting hide-when using javascript, with an onchange event on the drop-down.

Programmatically firing a client-side event

I have a typical ASP.NET web form application. It has about 20 separate user controls (.ascx files), each one containing a DetailsView control. One of the requirements of this application is that there needs to be a single Edit, Update, and Cancel link outside of those user-controls, which, when clicked, will cause each of those DetailsView objects to go into the correct mode, Edit or ReadOnly, and, if Update was clicked, do an appropriate database update. In other words, clicking that "global" link has to programmatically fire the client-side click for each of those corresponding links that you get "for free" when you create a DetailsView or GridView. I've tried copying the actual __doPostBack event that gets invoked when you do use one of those "internal" links, assigning it to a string, doing a Page.ClientScript.RegisterScriptBlock, then doing a LinkName.Attributes.Add("onclick", "script_string_name") -- but I just can't get it to work. What is the correct way to accomplish this?
You can use the asp:linkbutton control to do this.

How to preserve "expanded" state of additional form fields with JavaScript when clicking the back button in IE?

I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.

Advice about using Tabindex and javascript/jquery to make "tabbing" easier

I'm making a large and complex application and I need to set tabindexes to help user navigate through the pages. This is a private application so I don't have restriction about (ab)using javascript (jquery).
I currently have these questions.
1) How do you force with javascript (jquery) the browser to move the cursor inside a specific textbox as soon as a page has loaded? I noticed that often browsers don't automatically put the cursor inside the first tabindexed input. I want a surefire way that forces it there no matter what.
2) Some fields that activate ui enanchement (namely jquery ui datepicker) have problems with tabbing (like having to push tab two time to go away from it), is there any way to avoid this?
3) How do you read and set tabindex with jquery? I have some fields that get hidden/shown based on user action and they should be able to "give" their tabindex to other fields if they get hidden, is this a problem, does the browser still consider a tabindex after the page has loaded?
Thank you very muchh
To put focus on a specific textbox, do this (assuming textbox id is #firstBox): $('#firstBox').focus(); See more examples here: How do you automatically set the focus...
Not particularly because the DatePicker is also its own UI, so it has various objects within it that can be focused on (which is what tabbing picks up on).
Actually, now that I've thought about it, if you hide a field (AKA, "hidden") it will not have a tabindex and the other tabs will fall in line with what is defined for the browser (typically top to bottom, left to right order). You shouldn't have to worry about setting the tabindex manually.

Categories