Come ottenere l'opzione selezionata da P: Selectoneradio usando JavaScript
-
28-10-2019 - |
Domanda
Come si ottiene quale radio è selezionata all'interno p:selectOneRadio
Utilizzo di javascript/jQuery?
Dal p:selectOneRadio
Non utilizza tag di radio Non ho idea di come ottenere l'opzione selezionata utilizzando i selettori CSS.
<p:selectOneRadio onchange="reactToChangedRadio()" >
<f:selectItem itemLabel="....." itemValue="..." />
<f:selectItem itemLabel="....." itemValue="..." />
<f:selectItem itemLabel="....." itemValue="..." />
</p:selectOneRadio>
Soluzione
È possibile utilizzare la soluzione jQuery o scegliere una semplice soluzione JavaScript:
document.getElementById("myFormId:mySelectId")[0].checked
Vedi il post di Coderach: http://www.coderach.com/t/210871/jsf/java/selectoneradio-javascript-value
AGGIORNAMENTO: Devo ammettere che sono in un reparto e mi dispiace per questo, ma ieri non ho avuto molto tempo ...
Devo dire che non sono stato in grado di ottenere il valore radio nel modo antico JavaScript:
<script type="text/javascript">
/* <![CDATA[ */
function reactToChangedRadio(){
alert("I'm in!");
var myval;
for(i=0;i<3;i++){
if(document.forms['myFormId']['myFormId:myRadio'][i].checked == true ){
myval = document.forms['myFormId']['myFormId:myRadio'].text/value;
}
}
alert( "val = " + myval );
}
/* ]]> */
</script>
D'altra parte, questa soluzione ha codificato funziona:
<script type="text/javascript">
/* <![CDATA[ */
function reactToChangedRadio(){
alert("I'm in");
var myval;
if(document.forms['myFormId']['myFormId:myRadio'][0].checked == true ){
myval = "first button";
}else if(document.forms['myFormId']['myFormId:myRadio'][1].checked == true ){
myval = "second button";
}else if(document.forms['myFormId']['myFormId:myRadio'][2].checked == true ){
myval = "third button";
}
alert( "val = " + myval );
}
/* ]]> */
</script>
, ma ovviamente, a causa di PrimeFaces Power, esiste una soluzione lato server (che utilizza il componente ReuqEstContext):
<h:form id="myFormId">
<p:selectOneRadio id="myRadio" value="#{handleFiles.radioVal}" >
<p:ajax event="change" oncomplete="handleComplete(xhr, status, args)" listener="#{handleFiles.testMethod}" />
<f:selectItem itemLabel="1" itemValue=" first" />
<f:selectItem itemLabel="2" itemValue=" second" />
<f:selectItem itemLabel="3" itemValue=" third" />
</p:selectOneRadio>
</h:form>
<script type="text/javascript">
function handleComplete(xhr, status, args) {
alert("Selected Radio Value" + args.myRadVal);
}
</script>
Il codice lato server:
private String radioVal;
public String getRadioVal() {
return radioVal;
}
public void setRadioVal(String radioVal) {
this.radioVal = radioVal;
}
public void test(){
RequestContext context = RequestContext.getCurrentInstance();
context.addCallbackParam("myRadVal", radioVal);
System.out.println("radioVal: "+radioVal);
}
Il componente ReuqEstContext è disponibile qui: http://www.primefaces.org/showcase-labs/ui/requestcontext.jsf (solo per PF 3)
Altri suggerimenti
Il problema potrebbe essere risolto facilmente con jQuery find () utilizzando il metodo GetJQ del widget PF:
<p:selectOneRadio ... widgetVar="mySelectName" .../>
Possiamo ottenere il valore corrente chiamando:
PF('mySelectName').getJQ().find(':checked').val();
Se hai solo bisogno del valore dell'elemento selezionato in JS, puoi chiamare la tua funzione this.value
parametro. Guarda all'interno di PF generato HTML:
<input id="{component_id}:{index}" name="{component_id}" type="radio" value="{itemValue}"
checked="checked" onchange="reactToChangedRadio(this.value);">
...
per ciascuno selectItem
. Quindi this.value
funziona perfettamente, non c'è bisogno di cercare checked
:
<script>
function reactToChangeRadio(par){
alert('Value of selected item is: ' + par);
}
</script>
<p:selectOneRadio onchange="reactToChangedRadio(this.value);" >
<f:selectItem itemLabel="....." itemValue="..." />
<f:selectItem itemLabel="....." itemValue="..." />
<f:selectItem itemLabel="....." itemValue="..." />
</p:selectOneRadio>
Oppure puoi passare this.id
in funzione per usarlo nel selettore jQuery.
hai tu usi il :controllato Pseudo Selettore: Maggiori informazioni qui: http://api.jquery.com/checked-selector/
$(":checked")
Tutto quello che devi fare è disabilitare tutti i pulsanti di opzione tranne quello che è stato controllato come:
<h:selectOneRadio id="rad" ... onclick="dataTableSelectOneRadio(this)" >
<f:selectItems .... />
</h:selectOneRadio>
Ed ecco la tua sceneggiatura:
function dataTableSelectOneRadio(radio){
var id = radio.name.substring(radio.name.lastIndexOf(':'));
var temp = radio.name.lastIndexOf(':') - 1;
var index = radio.name.substring(temp,temp+1);
var el = radio.form.elements;
for(var i = 0 ; el.length; i++)
{
if(el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
if(el[i].name.indexOf(index) != -1)
el[i].check = true;
else
el[i].check = false;
}
}
}
Esiste una soluzione a una riga a questa domanda che gestisce anche il caso in cui si dispone di più input di selectoneradio su una pagina.
Se il tuo modulo viene chiamato myForm
, e il tuo input Selectoneradio ha l'ID myRadio
, quindi la seguente riga otterrà il valore selezionato:
$('[id^=myForm\\:myRadio]:checked').val()
Funziona perché a tutti gli input interni viene fornito un ID che inizia con myForm:myRadio
. La riga sopra trova tutte le entità che iniziano con quella stringa e seleziona solo quelle controllate. Poiché è possibile controllare un solo pulsante di opzione, questo fornisce il pulsante di opzione selezionato. Quindi possiamo semplicemente afferrare il suo valore.