Databases
StackOverflow2013
Postsdbo
POp:selectOneButton suddenly stops working, first button is not clickable anymore
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POp:selectOneButton suddenly stops working, first button is not clickable anymore
    text
    copied!<p>I have been successfully been using the PrimeFaces selectOneButton - using PF 3.5. Suddenly, it has stopped working, and the first button is always not clickable - there has been no changes to the webpage code nor the backing bean code (which would affect it).</p> <pre><code>&lt;p:selectOneButton value="#{bean.result}"&gt; &lt;f:selectItems value="#{bean.options}" /&gt; &lt;p:ajax event="change" process="popupPanel" update="Grid" listener="#{myBackingBean.submitItem(bean.itemId)}" /&gt; &lt;/p:selectOneButton&gt; </code></pre> <p>I have a theory to why the first button is not clickable.</p> <p>From PrimeFaces SelectOneButton showcase:</p> <blockquote> <p>SelectOneButton is an input component to select options using regular buttons instead of radio buttons</p> </blockquote> <p>So, SelectOneButton is <em>really</em> radio buttons, but displayed with a nice touch ;)</p> <p>Now, the rendered HTML of selectOneButton with two options is as follows;</p> <pre><code>&lt;div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active"&gt; &lt;input id="mainForm:Grid:0:j_idt64:0" name="mainForm:Grid:0:j_idt64" type="radio" value="Yes" class="ui-helper-hidden" checked="checked"&gt; &lt;span class="ui-button-text ui-c"&gt;Yes&lt;/span&gt; &lt;/div&gt; &lt;div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right"&gt; &lt;input id="mainForm:Grid:0:j_idt64:1" name="mainForm:Grid:0:j_idt64" type="radio" value="No" class="ui-helper-hidden"&gt; &lt;span class="ui-button-text ui-c"&gt;No&lt;/span&gt; &lt;/div&gt; </code></pre> <p>I notice two differences... 1) The div classes are different. 2) First option has checked="checked"</p> <p>1) Checking the CSS of the div class, I cannot see anything major to which would make the button unclickable. 2) Obviously, since its really a radio button, the first option is "checked". </p> <p>Now, when clicking a plain-old-standard radio button, you can't click on it to "release it" - once its clicked its clicked, and other radio buttons need to be clicked to change the option.</p> <p>Since my first option is always "checked" would this block the button to be "clickable"? Has any one else ever experienced something similar? Having looked around I seem to be the only one who has had this issue.</p> <p>I can do workarounds, but I can not find out why it has suddenly stopped working, and would rather find a solution!</p> <p>Any help is appreciated!</p> <p><strong>UPDATE</strong></p> <p>Luckily, I found an old previous version of my webapp and I checked the rendered HTML.</p> <p>Heres the following HTML of the first button (which is unclickable on my current version).</p> <pre><code>&lt;div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left"&gt; &lt;input id="mainForm:Grid:0:j_idt63:0" name="mainForm:Grid:0:j_idt63" type="radio" value="Yes" class="ui-helper-hidden"&gt; &lt;span class="ui-button-text ui-c"&gt;Yes&lt;/span&gt; &lt;/div&gt; </code></pre> <p>The two differences I described above, are not rendered in my previous version - there is no "ui-state-active" in the div class, nor "checked='checked'" in my <code>&lt;input /&gt;</code></p> <p>I edited the HTML manually on my current (unclickable) version, and removed "checked='checked'" - this had no effect. I then removed the "ui-state-active" from my div class - and the button is now clickable.</p> <p>I am still puzzled to why the HTML is now rendered differently, what could I of changed which would make this happen? </p> <p>Thanks again.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload