We Keep Coding

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

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!

Uk-modal set bgclose via javascript

I'm using uk-modal on a project.
As you can see from the documentation, to open a modal via a link this is what you do:
Modal
I really need to have the bgclose:false set (so that the modal does not disappear on clicking on the background).
The point I need to reach is to open the modal via Javascript (and not on a link as above).
This is the normal script I would use (shortened):
UIkit.modal("#modal_loading").show();
On the documentation I cannot find the way of setting the bgclose to false via Javascript.
The workaround I made for now is to make an invisible (display:none) link as above and trigger its click event:
$('#open_loading_modal').trigger('click');
But this is ..... boring.
How do I set bgclose to false via Javascript?

I found the answer:
UIkit.modal("#modal_loading", {bgclose: false}).show();

How to open <ace:dialog> or <p:dialog> by JavaScript?

I need to open ace:dialog or p:dialog (because IceFaces is a fork of PrimeFaces, and it's the same tag and attributes) in area where I've did the click with the mouse, but I don't know how to do this with JavaScript. How can I achieve this?

General: To open the dialog just call onclick="mydialog.show();" on the html element where the click should be possible..
If you want to show the dialog at the "click-position", maybe you should write your own javascript method to set the position..
Or easier, use the property "onShow" of the dialog to set the "position", which is also a property of the dialog.
Have a look here..
http://res.icesoft.org/docs/v3_latest/ace/tld/ace/dialog.html

How To Pre-Load Javascript/JQuery/HTML Dialog Boxes

I have a lot of experience in Swing and WPF but not much in Javascript. I am learning as I go. The below is what I would like to do
Have a single HTML Page for End User
Preload Dialogs which will be displayed in response to user action
Currently I have all the divs for the dialog boxes load as part of the document and then in the document $(document).ready() function I call hide().
I then open and close them. All this works currently. However I have the following problems:
The divs sometimes momentarily appear on page load
It annoys me that all these dialogs that are not part of the index page have to be loaded as part of the index page. (I am a little OCD with Code Organization).
Thanks-in-advance,
Guido

You could start the dialog box divs off with a style attribute set to:
style="display:none;"
Which is what jQuery does when it calls .hide(), then you wont have to wait for jquery to be ready before the element is hidden, the CSS will automatically do it for you

The jQueryUI Dialog will ease your display issues. I've found it to be more stable than anything I could write myself. You can, using AJAX, load content dynamically and put that markup into a single dialog DIV. It's as simple as knowing the DIV's ID, setting the html based on the AJAX response and then calling .dialog() on the popup.

how to show a dialog in jQuery Mobile

I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.
Like this:
Info
Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.
This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?
$("#buttAbout").click(function () {
$('#about').show();
return false;
});

It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:
$.mobile.changePage('#about','pop',false,true)
The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-role attribute is correctly set to dialog on the div for your dialog, in order to ensure the correct history/styling behaviour.