Skip to Main Content
Forums

Java EE (Java Enterprise Edition) General Discussion

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

h:selectOneMenu javascript onchange problem

843842Jan 2 2007 — edited Feb 14 2008
Hello and happy new year for all this is the first time i post here i have a nasty annoying problem with my application well to explain better
i have 4 <h:selectOneMenu> lists 3 lists depends on the first one via javascript using the onclik or onchange i mean when the value of the first list matches a certain value the other combo lists are disabled
(i took the DOM IDs from the HMTL page generated from the JSF page) 
<script language="javascript">

function disableOtherLists()

{

var listIndex = document.getElementById("formCreation:categorieListItems").selectedIndex;

var value1=document.getElementById("formCreation:categorieListItems").options[listIndex].value;

 

if(value1==3)

{

document.getElementById("formCreation:banqueListItems").disabled = "disabled";

document.getElementById("formCreation:localiteListItems").disabled = "disabled";

document.getElementById("formCreation:numCompte").disabled = "disabled";

}

else

{

document.getElementById("formCreation:banqueListItems").disabled = "";

document.getElementById("formCreation:localiteListItems").disabled = "";

document.getElementById("formCreation:numCompte").disabled = "";

 

}

 

 

 

//alert(text1);

}

 

</script>
the jsf code associated
 <h:selectOneMenu onchange="disableOtherLists();" id="categorieListItems"  value="#{beq.categorie}" >

<f:selectItems value="#{ beq.categorieListe}" />

</h:selectOneMenu>


                             </td>

                             <td colspan="2">

                             </td>

                                   <td width="28%"></td>

                             </tr>       

                             <tr>

                                   <td width="18%">

                                         <label>

                                               <span class="Texte1">Banque</span>

                                         </label>

                                   </td>

                             <td width="18%">

                                   <span class=Texte1>

                                         <label>Ville de cialiation </label>

                                   </span>

                             </td>

                             <td width="17%">

                                   <label>

                                         <span class="Texte1">Num&eacute;ro de compte</span>

                                   </label>

                             </td>

                             <td width="28%">&nbsp;</td>

                        </tr>

                             <tr>

                                <td>

                                    <span class=Texte1>

                                         <h:selectOneMenu id="banqueListItems"  value="#{beq.banque}" immediate="true">

                                                     <f:selectItems value="#{ beq.banqueListe}" />

                                               </h:selectOneMenu>

                                         </span>

                             </td>

                             <td>

                                   <span class=Texte1>

                                         <h:selectOneMenu id="localiteListItems"  value="#{beq.ville}">

                                                     <f:selectItems value="#{ beq.localiteListe}" />

                                               </h:selectOneMenu>

                                   </span>

                             </td>

                             <td><h:inputText id="numCompte" value="#{beq.numCompte}" size="24" /></td>

                             <td>&nbsp;</td>

                             </tr>

                             <tr>
when the first list box is set to the value 3 (the other list boxes are disabled as excpected but when i submit the form it seems that the page is refreshed and the other lists are no longer disabled and the form is emptied i wonder where this problem comes from

here is all my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

 

<script language="javascript">

function grise()

{

var listIndex = document.getElementById("formCreation:categorieListItems").selectedIndex;

var value1=document.getElementById("formCreation:categorieListItems").options[listIndex].value;

 

if(value1==3)

{

document.getElementById("formCreation:banqueListItems").disabled = "disabled";

document.getElementById("formCreation:localiteListItems").disabled = "disabled";

document.getElementById("formCreation:numCompte").disabled = "disabled";

}

else

{

document.getElementById("formCreation:banqueListItems").disabled = "";

document.getElementById("formCreation:localiteListItems").disabled = "";

document.getElementById("formCreation:numCompte").disabled = "";

 

}

 

 

 

//alert(text1);

}

 

</script>

 

 

 

<f:view>

<HEAD>

      <TITLE>BEQ - Creation </TITLE>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<META http-equiv="expires" content="Now"> 

 

<LINK href="commun/styles.css" type=text/css rel=stylesheet>

 

<style type="text/css">

<!--

.Style1 {font-size: 12px}

-->

</style>

 

</HEAD>

      <BODY>

            <h:form id="formCreation"> 

                  <table class=datatable width="100%" border=0>

                  <tbody>

                             <tr bgcolor=#ffff99>

                             <td style="COLOR: #ff0000" colspan=6>

                                   <b></b>

                             </td>

                             </tr>

                             <tr class=TrTableau>

                             <td colspan=4 height=50>

                                   <span class=EnteteForme>Bons d'&eacute;quipement  - 

          Cr�ation </span><br>

                                   <span class=EnteteForme><h:outputText value="#{beq.message}"/></span>

                             </td>

                             </tr>

                             <tr>

                             <td width="18%">

                                         <label>

                                                     <span class=Texte1>Num&eacute;ro</span>

                                         </label>

                             </td>

                             <td width="18%">

                                   <span class=Texte1>

                                         <label>Date de souscription</label>

                                   </span>

                             </td>

                             <td colspan="2">

                                   <label></label>

                             </td>

                        </tr>

                             <tr>

                             <td><h:inputText value="#{beq.numero}"/></td>

                             <td><h:inputText value="#{beq.dateSouscription}"/></td>

                             <td colspan="2">&nbsp;</td>

                             </tr>

                             <tr>

                             <td width="18%" height="21">

                                   <label>

                                         <span class="Style1">Perception</span>

                                   </label>

                             </td>

                             <td width="18%">&nbsp;</td>

                             <td colspan="2">&nbsp;</td>

                             </tr>

                             <tr>

                             <td>

                                   <span class=Texte1>

                                               <h:selectOneMenu id="perceptionListItems"  value="#{beq.perception}">

                                                     <f:selectItems value="#{ beq.perceptionListe}" />

                                               </h:selectOneMenu>

                                   </span>

                             </td>

                             <td>&nbsp;</td>

                             <td colspan="2">&nbsp;</td>

                        </tr>

                             <tr>

                             <td colspan="4">

                                   <span class="Texte1">Nom ou raison sociale </span>

                             </td>

                        </tr>

                             <tr>

                                <td colspan="4"><h:inputText value="#{beq.nom}"  size="30"/></td>

                        </tr>

                             <tr>

                              <td width="18%">

                                   <span class=Texte1>

                                         <label>Cat�gorie</label>

                                   </span>

                              </td>

                             <td colspan="2">

                             </td>

                             <td width="28%">

                             </td>

                             </tr>

                             <tr>

                             <td width="18%">

                                   <span class=Texte1>

                                         <h:selectOneMenu onchange="grise();" id="categorieListItems"  value="#{beq.categorie}" >

                                                     <f:selectItems value="#{ beq.categorieListe}" />

                                               </h:selectOneMenu>

                                   </span>

                             </td>

                             <td colspan="2">

                             </td>

                                   <td width="28%"></td>

                             </tr>       

                             <tr>

                                   <td width="18%">

                                         <label>

                                               <span class="Texte1">Banque</span>

                                         </label>

                                   </td>

                             <td width="18%">

                                   <span class=Texte1>

                                         <label>Ville de cialiation </label>

                                   </span>

                             </td>

                             <td width="17%">

                                   <label>

                                         <span class="Texte1">Num&eacute;ro de compte</span>

                                   </label>

                             </td>

                             <td width="28%">&nbsp;</td>

                        </tr>

                             <tr>

                                <td>

                                    <span class=Texte1>

                                         <h:selectOneMenu id="banqueListItems"  value="#{beq.banque}" immediate="true">

                                                     <f:selectItems value="#{ beq.banqueListe}" />

                                               </h:selectOneMenu>

                                         </span>

                             </td>

                             <td>

                                   <span class=Texte1>

                                         <h:selectOneMenu id="localiteListItems"  value="#{beq.ville}">

                                                     <f:selectItems value="#{ beq.localiteListe}" />

                                               </h:selectOneMenu>

                                   </span>

                             </td>

                             <td><h:inputText id="numCompte" value="#{beq.numCompte}" size="24" /></td>

                             <td>&nbsp;</td>

                             </tr>

                             <tr>

                             <td colspan=4>

                                   <label>

                                         <span class=Texte1>Adresse</span>

                                   </label>

                             </td>

                             </tr>

                             <tr>

                             <td colspan=4>

                                   <h:inputTextarea value="#{beq.adresse}"  styleClass="inputTxt"  cols="104" rows="3"  />

                             </td>

                             </tr>

                              <tr>

                              <td width="18%">                               <label>

                                         <span class=Texte1>Si&egrave;ge</span>

                                   </label>

                              

                              </td>

                             <td colspan="2">                               <label>

                                         <span class=Texte1>Montant</span>

                                   </label>

                             </td>

                             <td width="28%"></td>

                        </tr>

                             <tr>

                             <td>                               <span class=Texte1>

                                         <h:selectOneMenu id="siegeListItems"  value="#{beq.siege}">

                                                     <f:selectItems value="#{ beq.siegeListe}" />

                                               </h:selectOneMenu>

                                  </span>

                             </td>

                             <td colspan="2"><h:inputText value="#{beq.montant}"/></td>

                             <td>&nbsp;</td>

                             </tr>

                        <tr>

                                  <td colspan=4>

                                  <label>

                                         <span class=Texte1>Motif</span>

                                  </label>

                                  </td>

                             </tr>

                             <tr>

                                   <td colspan=4>

                                         <h:inputTextarea value="#{beq.motif}"  styleClass="inputTxt" cols="104" rows="1" />

                                   </td>

                             </tr>

                        <tr>

                             <td colspan=4 height=51>

                                   <div align=right>

                                               <h:commandLink action="Accueil.jsf">

                                                     <h:graphicImage value="commun/annuler.gif" style="border:0px"/>

                                               </h:commandLink>
                                               <%-- 
                                               <h:commandLink action="#{beq.createAction}">

                                                     <h:graphicImage value="commun/enregistrer.gif" style="border:0px"/>

                                               </h:commandLink>
                                               --%>
                                               <h:commandButton action="#{beq.createAction}" image="commun/enregistrer.gif"/>
                                               
                                                                                        

                                    </div>

                              </td>                         

                        </tr>

                  </tbody>

                  </table>

            </h:form> 

      </BODY>

</f:view> 

</HTML>

Comments

843842
place and <h:message layout="table"> after <h:form>.

<h:form>
<h:message layout="table">

Lets see if this displays any error messages
843842
thanks i'll give it a try (i just forgot to add when i remove the javascript part it works)

Message was edited by:
iqbal_addou
843842
I've just tried and it didn't display any error message the problem is related to the java script when i remove the java script it works when i add it it doesn't work
843842
Download and install Firefox. Within firefox there is an error console under the tools pull down. This will help you debug your Java Script
843842
You might want to try the following.

When I set a variable in Java script I do the following.

var actiontaken = document.forms[0].elements["con4:actiontaken"].value;
document.forms[0].elements["con4:actiontaken"].disabled=true;
843842
thank you for your answer i'm already using firefox firebug i didn't find out but however i found a work around i'm using a hidden div to simulate the disabled stuff
thanks anyway
843842
Hi,

You're not binding the disabled properties of the other h:selectOneMenu and when the page is rerendered this info is lost.
Try to evaluate the disabled properties to #{beq.categorie == 3}
843842
Sorry but i didn't really understand what do you mean
843842
Hi,

If you only update the disabled state of the <select> elements through javascript and then submit the form without telling the rendering phase that the disabled state of the corresponding component has changed, this will not persist.

I think that managing the disabled state only server side is cleaner:
<h:selectOneMenu onchange="this.form.submit()" id="categorieListItems"  value="#{beq.categorie}" > 
<f:selectItems value="#{ beq.categorieListe}" /> 
</h:selectOneMenu>

..

 <h:selectOneMenu id="banqueListItems"  value="#{beq.banque}" immediate="true" disabled="#{beq.banqueListItemsDisabled}"> 
<f:selectItems value="#{ beq.banqueListe}" />
</h:selectOneMenu>
1. The form is submitted when the 1rst select value has changed
2. The disabled property of the second selectOneMenu has a beq.banqueListItemsDisabled binding.

Put the disabled logic in the beq bean:
public boolean isBanqueListItemsDisabled()
{
   return banque != 3;
}
843844
Hi, we have the solution !!!!

Properties of selectOneMenu component can not be changed with javascript because disappears relationship with Bean.

You have to create the HTML select, and send data to Bean through a "inputHiden" that store value selected in the combo (this should take place with a javascript function to jump on the "onchange" where you assign the value of inputHiden to the combo). With this, you can change the properties of the javascript with select hassle-free.

Sorry for my english, it�s not my native language...
Regards from SPAIN


In Spanish :

No se pueden variar las propiedades de los componentes selectOneMenu con javascript por que desaparece la relacion con el Bean.

Tienes que crear los select con HTML y mandar los datos al Bean a traves de un "inputHiden" que almacenara el valor seleccionado en el combo (esto se realizara con una funcion javascript que salte en el evento "onchange" que que asigne el valor del combo al inputHiden). Con esto puedes cambiar las propiedades del select con javascript sin ningun problema.
1 - 10
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Mar 13 2008
Added on Jan 2 2007
#javaserver-faces
10 comments
4,518 views