We Keep Coding

PrimeFaces radiobutton styles not updating when clicked via Javascript

I have a p:selectOneRadio setup as follows :
<p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom"
required="true" requiredMessage="Please select a position">
<f:selectItems value="#{employeeBean.positionList}" var="pos"
itemLabel="#{pos.name}" itemValue="#{pos}" />
<p:ajax process="#this" update="#this"/>
</p:selectOneRadio>
<ui:repeat id="iterator" value="#{employeeBean.positionList}" var="template" varStatus="iterStat">
<div class="form-group" onclick="document.getElementById('employeeForm:positionRadio:#{iterStat.index}').click();">
<h:outputText styleClass="form-control" value="#{pos.name}"/>
<p:radioButton for=":employeeForm:positionRadio" itemIndex="#{iterStat.index}" />
<div style="display: inline">
<p style="display: inline">
<h:outputText value="#{pos.description}"/>
</p>
</div>
</div>
</ui:repeat>
I need to check the corresponding radio button if anything in the div containing it is clicked. I am attempting to do this using
onclick="document.getElementById('employeeForm:positionRadio:#{iterStat.index}').click();"
This is only half working. When I click on the div I do see the POST request fire, however the styles aren't updated so none of my radio buttons are checked client side.
This is of course because p:radioButton is rendered as a div with a hidden input radio element and a visible span that is styled accordingly. Why is the span style not updated when clicked via javascript and is there a way to fix it?
Using JSF 2.1.7, PrimeFaces 5.0 and Java 1.7

I have been working on this problem further and have a solution.
I would still prefer a different one, but my current solution is to update the styles manually via javascript.
First off I added a hidden input field outside the ui:repeat to track the previously clicked radio button index
<input type="hidden" name="prevClicked" id="prevClicked" value="-1"/>
I also gave the p:radioButton inside the ui:repeat an id of raBtn and moved the onclick javascript to a function as follows
function radioBtnDivClicked(event, radioIndex){
// check prevClicked field to revert styles if necessary
if(document.getElementById('prevClicked').value != -1){
var prevIndex = document.getElementById('prevClicked').value;
document.getElementById('employeeForm:iterator:' + prevIndex + ':raBtn').children[1].className = 'ui-radiobutton-box ui-widget ui-corner-all ui-state-default';
document.getElementById('employeeForm:iterator:' + prevIndex + ':raBtn').children[1].children[0].className = 'ui-radiobutton-icon ui-icon ui-icon-blank';
}
// set styles for clicked div
document.getElementById('employeeForm:positionRadio:' + radioIndex).click();
document.getElementById('employeeForm:iterator:' + radioIndex + ':raBtn').children[1].className = 'ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active';
document.getElementById('employeeForm:iterator:' + radioIndex + ':raBtn').children[1].children[0].className = 'ui-radiobutton-icon ui-icon ui-icon-bullet';
document.getElementById('prevClicked').value = radioIndex;
// stop bubbling
event.stopPropagation();
}
This should be fairly simple to convert to jQuery.
Furthermore I only changed to onclick to
onclick="radioBtnDivClicked(event,#{iterStat.index});"
This works, but I prefer a solution in which the radio button behaves as it does when it is clicked directly(ie Primefaces handles the style changes).

You seem to be clicking on the 'wrong' html element. If you look at that id of the generated <p:radioButton... e.g. the first button in the custom layout example in the PrimeFaces showcase:
<div id="j_idt88:opt1" class="ui-radiobutton ui-widget">
<div class="ui-helper-hidden-accessible">
<input value="Red" id="j_idt88:customRadio:0_clone" name="j_idt88:customRadio" class="ui-radio-clone" data-itemindex="0" type="radio">
</div>
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default">
<span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span>
</div>
</div>
And create a click on the div with the 'ui-widget' class beneath it
So
$('#j_idt88\\:opt1 .ui-widget').click(); # The \\ is for escaping the colon in the jQuery selector)
Then it works. I tried this and tested in the PrimeFaces 6.0 showcase
You might need to use your own id's or see if there is some logic in the generated ones if you don't explicitly assign id's.

If a disabled input button is clicked, display message

I have an input button, which when it is disabled, and someone tries to click it, needs to display an alert.
How is it possible to display a javascript message despite being disabled?
Tried this with no luck:
<input type="submit" onclick="alert('click')" value="Disabled Input Button" disabled/>

Use onmousedown instead of onclick, which is only fired when it is 'allowed' to. Some browsers, particularly Chrome, appear to disable all DOM events when a form element is disabled. While I think this is out of spec, you can use the following workaround:
Instead of using the disabled attribute, use CSS pointer-events to achieve a similar effect, illustrated here:
button.disabled {
pointer-events:none;
}
And then just use <button class="disabled"> instead of <button disabled>.

<span onclick="alert('This input is disabled')">
<input type="submit" value="Disabled Input Button" disabled/>
</span>
Wrapping it with another tag that has the on click function works.

Drop down div on focus of search box using xoxco

I'm using Xoxco's plugin for tag input found here:
http://xoxco.com/projects/code/tagsinput/
In my modification, I've used JQuery's focus() function
<input id="tags_1" class="tag-holder" type="text" class="tags" /></p>
<div id="std" style="display:none;">
<span id='pdf' onmouseover="" style="cursor: pointer;">PDF</span>
<p id="reset" onmouseover="" style="cursor: pointer;">Reset Tags</p>
</div>
My JQuery for this is
$('#tags_1').focus(function(){
$('#std').css('display','block');
});
However, this doesn't seem to work when used with my modification of the plugin. It does work separately without using the plugin. Anything I'm missing here?

Because the issue is it adds a _tag in your elements id and that id is no more available so you have to target this id #tag_1_tag:
so your code should be like this:
order matters
$('#tags_1').tagsInput({width: 'auto'}); //<----tagInput applied
$('#tags_1_tag').focus(function(){ //<-----this id has to be the target now
$('#std').css('display','block');
});
Demo Fiddle
or even you can use attribute selectors:
$('[id^="tags_1"]').focus(function(){ //<-----this id has to be the target now
$('#std').css('display','block');
});
Demo with attribute selector

input type=file attached to an onclick event

I have a menu like this:
<ul class="sub">
<li>New</li>
<li>Open</li>
<li>Save</li>
<li>Help</li>
</ul>
and I'd like to attach an onclick even to the Open li that would kick off a file open dialog, like input type="file" does. I can handle attaching code to the li's onclick event, but I don't know what code to attach.
TIA

You can add a normal input type="file" to the page and style it to be hidden. Something like this:
<input type="file" id="theFileInput" style="display:none;" />
(Only using in-line styling for this example, I recommend separating the style from the markup of course.)
Then you can initiate a click on it in response to a click event on the target element. With jQuery (assuming you can set an id on the li, or otherwise uniquely identify it in the selector in some way) it would be something like:
$('#clickableLiElement').click(function() {
$('#theFileInput').click();
});
The input type="file" is still there and can be interacted with just like any other form element. It's just invisible to the user. But this would launch the Open File dialog and set its value to the element normally, which can be included in the POST to the server normally.

With JavaScript
<input type="file" accept="images/*" name="images" id="images" onClick="showModal()" style="display:none"/>
<script>
function showModal(){
document.getElementById('images').click();
}
</script>
<li onClick="showModal()"></li>

The answer above (David) works, but in your css file you need to do:
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
The display:none solution is not working with Chrome or Safari.

when i click on this textbox it gets big but when i click away how do i make it go back to normal?

i'm basically mimicking the share button feature on facebook with jquery and what im trying to do is when i click on the textbox area the textbox gets larger by height. and when i click away it should get back to normal. with the last piece of jquery the code doesnt work at all. what are my options in getting this to work?
thanks.
ps:
i know most of this can be done with css but i'm experimenting with jquery to better learn it. :)
here is my jquery.
$(function() {
$('input[name=search]').click(function() {
$(this).addClass('txthover');
});
$('body').click(function() {
$('input[name=search]').removeClass('txthover');
});
});
the html
<div id="box">
<div id="search">
<input type="text" name="search" /><input type="button" name="btnsearch" value="search" />
</div>
</div>

The proper way to do it would be to use the focus and blur events of the element:
$('input[name=search]').focus(function() {
$(this).addClass('txthover');
}).blur(function() {
$(this).removeClass('txthover');
});
Here is a quick example.