Problems by combinate JSF-Names with JavaScript (de.dev.user)

Question

Hello again.
I have i new problem.
Overview:
1. Situation
2. Working code
3. Problem (reason for new idea)
4. New Idea
5. Problem (please help me !!)
[1]
The situation. I have one inputText and one selectOneMenu.
They are logicly combinated. Of this pair i have two.
If the user enters a errorcode in the inputText-field, the matching entry of the selectOneMenu have to be selected.
If the user select a entry of the selectOneMenu, the code have to be shown in the inputText.
Example:
inputText1 <-> selectOneMenu1
inputText2 <-> selectOneMenu2
[2]
For the moment i have realised this code (it works !!):
details.jsp:
<h:panelGrid columns="3">
<h:inputText binding="#{CbtdDetailsBean.itxtErrorCode1}" id="itxtErrorCode1" valueChangeListener="#{CbtdDetailsBean.itxtErrorCode1ValueChange}" onchange="submit()">
</h:inputText>
<h:selectOneMenu binding="#{CbtdDetailsBean.hsomErrorCode1}" id="hsomErrorCode1" valueChangeListener="#{CbtdDetailsBean.hsomErrorCode1ValueChange}" onchange="submit()" >
<f:selectItems binding="#{CbtdDetailsBean.uisiErrorCode1}" id="uisiErrorCode1" />
</h:selectOneMenu>
<h:outputText value="#{lgs.txtErrorCode}" />
<h:inputText binding="#{CbtdDetailsBean.itxtErrorCode2}" id="itxtErrorCode2" valueChangeListener="#{CbtdDetailsBean.itxtErrorCode2ValueChange}" onchange="submit()"  />
<h:selectOneMenu binding="#{CbtdDetailsBean.hsomErrorCode2}" id="hsomErrorCode2" valueChangeListener="#{CbtdDetailsBean.hsomErrorCode2ValueChange}" onchange="submit()">
<f:selectItems binding="#{CbtdDetailsBean.uisiErrorCode2}" id="uisiErrorCode2" />
</h:selectOneMenu>
</h:panelGrid>
CbtdDetailsBean.java:
private ArrayList getErrorCodeList()
  ArrayList errorCodeList = new ArrayList();
  errorCodeList.add(new SelectItem("1", "TestErrorCode1"));
  errorCodeList.add(new SelectItem("2", "TestErrorCode2"));
  errorCodeList.add(new SelectItem("3", "TestErrorCode3"));
  errorCodeList.add(new SelectItem("4", "TestErrorCode4"));
  errorCodeList.add(new SelectItem("5", "TestErrorCode5"));
  return errorCodeList;
// Value Change Listener (same for 2. group)
public void itxtErrorCode1ValueChange(ValueChangeEvent vce)
  this.hsomErrorCode1.setValue((String) vce.getNewValue());
public void hsomErrorCode1ValueChange(ValueChangeEvent vce)
  this.itxtErrorCode1.setValue((String) vce.getNewValue());
// Input Text ErrorCode 1 (same for 2. group)
private HtmlInputText itxtErrorCode1 = new HtmlInputText();
public HtmlInputText getItxtErrorCode1() { return itxtErrorCode1; }
public void setItxtErrorCode1(HtmlInputText itxtErrorCode1) { this.itxtErrorCode1 = itxtErrorCode1; }
// HtmlSelectOneMenu ErrorCode 1 (same for 2. group)
private HtmlSelectOneMenu hsomErrorCode1 = new HtmlSelectOneMenu();
public HtmlSelectOneMenu getHsomErrorCode1() { return hsomErrorCode1; }
public void setHsomErrorCode1(HtmlSelectOneMenu hsomErrorCode1) { this.hsomErrorCode1 = hsomErrorCode1; }
// UISelectItems (same for 2. group)
private UISelectItems uisiErrorCode1 = new UISelectItems();
public UISelectItems getUisiErrorCode1() { uisiErrorCode1.setValue(getErrorCodeList()); return uisiErrorCode1; }
public void setUisiErrorCode1(UISelectItems uisiErrorCode1) { this.uisiErrorCode1 = uisiErrorCode1; }-------------------------------------------------------------------------------------------------
[3]
Problem:
If the user changes the itxtErrorCode1-field, the hsomErrorCode1 will be updated by reload, but the hsomErrorCode1 also updates the itxtErrorCode1-field with the old value.
The second group is also updated. the itxtErrorCode2 has the value of hsomErrorCode2 (= 1) after entering itxtErrorCode1.
[4]
My new idea, where i need your help:
I think about a second way to update this fields. JavaScript !!
If this would work, i do not need to refresh the page.
The sourcecode i would like to user for this is implemented in the jsp-file:
<f:verbatim>
<script type="text/javascript">
<!--
  function SetControlByValue(cControl,sValue)
        cControl.value=sValue;
   function toUpper(obj)
        obj.value = obj.value.toUpperCase();
    // alert("document.frmDeviceDetails.hsomErrorCode2 = "+document.frmDeviceDetails.hsomErrorCode2);
-->
</script>
</f:verbatim>
<h:inputText binding="#{CbtdDetailsBean.itxtErrorCode1}" id="itxtErrorCode1" onchange="toUpper(this);SetControlByValue(document.frmDeviceDetails.hsomErrorCode1,this.value);" />
[5]
The new problem:
In the generated HTML-Code of itxtErrorCode1 and hsomErrorCode1 is:
<input id="body:frmDeviceDetails:itxtErrorCode1" name="body:frmDeviceDetails:itxtErrorCode1" type="text" ... >
<select id="body:frmDeviceDetails:hsomErrorCode1" name="body:frmDeviceDetails:hsomErrorCode1" ... >
How can i reference this "name" to javascript?
This Ideas does not work:
document.frmDeviceDetails.hsomErrorCode1
body:frmDeviceDetails:hsomErrorCode1
document.body:frmDeviceDetails:hsomErrorCode1
document.body.frmDeviceDetails.hsomErrorCode1
document.body.frmDeviceDetails.body.frmDeviceDetails.hsomErrorCode1
JavaScript seems to have a problem with ":". But this is part of the name!
Any Ideas?
p.s. please excuse my english, but i am from germany smile

Answer 1

I have run into this same problem with javascript and the colon. I am not sure if the colon is a valid character for a javascript identifier (one would think the RI developers would have checked it out though!?!).
Anyway, my workaround is to search through the Javascript DOM for the widget you want to obtain a reference to, using part of its id. After all, you know its id, you just can't use it as a javascript reference. In your Javascript code, do something like:
    var inputWidgets = document.getElementsByTagName("input");
    var targetInput;
    for(var i = 0; i < inputWidgets.length; i++)
       var inputId = inputWidgets.id;
if(inputId.indexOf("yourInputId") != -1)
targetInput = inputWidgets[i];
break;
It's a lot of effort to just get a reference to a form widget....but it works (I pasted in the code and changed it a bit, so it might not work as is, but at least it demonstrates the idea).