How to set value of p:selectBooleanCheckbox with JavaScript

Question

When the focus is on the checkbox and the user presses enter, I need the value to be active or inactive depending on which its state, and also focus a button, the focus works but the value is not being updated, this is what I have so far:

SelectBooleanCheckBox:

<p:selectBooleanCheckbox id="sbcActivoProp" widgetVar="sbcActivoPropWV" onchange="document.getElementById('frmGuardarActualizarPropiedad:btnGuardarPropiedad').focus(); return false;"
    binding="#{programaAccesoMB.sbcActivoProp}"
    label="#{etiquetasMsg.general_activo}" disabled="false">
</p:selectBooleanCheckbox>

Javascript:

<script type="text/javascript">
                                 var focusSbcActivoProp = document.getElementById('frmGuardarActualizarPropiedad:sbcActivoProp_input');           
                                    if (focusSbcActivoProp != null) {
                                     focusSbcActivoProp.onkeydown = function(event) {
                                     if (event.keyCode == 13) {
                                         var ischecked = sbcActivoPropWV.input.is(':checked');
                                         if(ischecked){
                                             console.log('is checked');
                                             document.getElementById('frmGuardarActualizarPropiedad:sbcActivoProp').value=false;
                                         }else{
                                             console.log('is not checked');
                                             document.getElementById('frmGuardarActualizarPropiedad:sbcActivoProp').value=true;
                                             }
                                         document.getElementById('frmGuardarActualizarPropiedad:btnGuardarPropiedad').focus();
                                     }
                                     return false;
                                     }
                                };
                            </script>

Checkboxes can normally be toggled by pressing the space button while "enter" submits the form. Why do you need to change this? — Selaron, Dec 30 '19 at 17:31
Please format your code. It's unreadable on my phone. And why do you need the binding? — Kukeltje, Dec 30 '19 at 17:50
@Selaron yes I know, its a quality requeriment, the software is for old people and also that needs to press enter several times and have things done almost automatically per transaction hehe — BugsOverflow, Dec 30 '19 at 18:05
Hint ;-) https://stackoverflow.com/questions/11427647/get-widgetvar-with-javascript-or-check-uncheck-all-other-primefaces-checkboxes — Kukeltje, Dec 30 '19 at 18:14

score 4 · Accepted Answer · answered Dec 30 '19 at 18:21

4

The PrimeFaces documentation has the answer for you:

Client Side API

Widget: PrimeFaces.widget.SelectBooleanCheckbox

Method   Params     ReturnType  Description 
check()     -       void        Checks the checkbox.
uncheck()   -       void        Unchecks the checkbox.
toggle()    -       void        Toggles check state.

I checked and this works at least for 7.0 and 8.0 (did not look for earlier versions but it is very simple to just try)

answered Dec 30 '19 at 18:21

Kukeltje

12,223
4
24
47

Uh no .. I lookt at `checkbox`-Documentation which does not contain client side api ._. – Selaron Dec 30 '19 at 18:49
@Selaron: Checkbox is not a real component (read the first line) ;-) but the component it is a helper for, SelectManyCheckbox, has neither. Issues can be filed ;-) – Kukeltje Dec 30 '19 at 18:55

score 0 · Answer 2 · answered Dec 30 '19 at 18:27

0

Thanks to the documentation referenced from @Kukeltje, this is how the javascript code ended being:

<script type="text/javascript">
                                 var focusSbcActivoProp = document.getElementById('frmGuardarActualizarPropiedad:sbcActivoProp_input');           
                                    if (focusSbcActivoProp != null) {
                                     focusSbcActivoProp.onkeydown = function(event) {
                                     if (event.keyCode == 13) {
                                        sbcActivoPropWV.toggle();
                                        document.getElementById('frmGuardarActualizarPropiedad:btnGuardarPropiedad').focus();
                                     }
                                     return false;
                                     }
                                };
                            </script>

answered Dec 30 '19 at 18:27

BugsOverflow

386
3
19

Doesn't PrimeFaces need `PF('sbcActivoPropWV')` to reference widgetVars? Did they change it again? – Selaron Dec 30 '19 at 18:51
Yes thats true @Selaron, but this project im working on uses PrimeFaces 3.4 so no need in this case – BugsOverflow Dec 30 '19 at 19:51
@Selaron: It might be you can still set a sort of backwardscompatibility mode to get this behaviour. Not sure though – Kukeltje Dec 31 '19 at 08:57
@BugsOverflow: Please next time **mention** version info in the question – Kukeltje Dec 31 '19 at 08:58

How to set value of p:selectBooleanCheckbox with JavaScript

2 Answers2