We are developing a webapp using jBoss Seam and JSF. I am trying to implement
a dynamically filtered set of drop downs on a page. The drop downs are on
each row in a h:dataTable. I am trying to use the client side value change
listener, t:jsValueChangeListener to do the filtering. I am running into the
following problem with multiple rows in my dataTable: the drop down in one
row affects the filtered drop down in all the rows of the table. The
relevant jsf code is as follows:
<h:dataTable id="entryTable"
value="#{calfVaccinationInfoRowList}" var="calfVaccinationInfoRow" >
......
<h:column>
<f:facet name="header">
<h:outputText value="Product"/>
</f:facet>
<t:jsValueSet name="localMedLocations"
value="#{calfVaccinationInfoRow.productMap}"/>
<h:selectOneMenu
value="#{calfVaccinationInfoRow.productName}" id="product_select" >
<f:selectItems
value="#{calfVaccinationInfoRow.productDescriptions}"/>
<t:jsValueChangeListener
for="location_select"
expressionValue="n=$srcElem.options[$srcElem.selectedIndex].value;
l=localMedLocations[n]; $destElem.options.length=0; for(i=0;i<l.length;i++)
{ $destElem.options[i]=new Option(l[i],l[i]); }"/>
</h:selectOneMenu>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Location"/>
</f:facet>
<t:jsValueSet name="localMethods"
value="#{calfVaccinationInfoRow.locationMap}"/>
<h:selectOneMenu
value="#{calfVaccinationInfoRow.medAppLocationDesc}" id="location_select" >
<f:selectItems
value="#{calfVaccinationInfoRow.medAppLocations}"/>
<span class="rvgMessage">
<h:message for="location_select"/>
</span>
<t:jsValueChangeListener
for="method_select"
expressionValue="n=$srcElem.options[$srcElem.selectedIndex].value;
l=localMethods[n]; $destElem.options.length=0; for(i=0;i<l.length;i++) {
$destElem.options[i]=new Option(l[i],l[i]); }"/>
</h:selectOneMenu>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Method"/>
</f:facet>
<h:selectOneMenu
value="#{calfVaccinationInfoRow.method}" id="method_select" >
<f:selectItems
value="#{calfVaccinationInfoRow.methods}"/>
<span class="rvgMessage">
<h:message for="method_select"/>
</span>
</h:selectOneMenu>
</h:column>
......
</h:dataTable>
When I looked at the generated HTML source, I see that all the drop down
boxes in all rows are being affected in the onClick event as seen below -
look for
'calfVaccinationRound1Form:entryTable_0:product_select','calfVaccinationRound1Form:entryTable_0:location_select'
and
'calfVaccinationRound1Form:entryTable_1:product_select','calfVaccinationRound1Form:entryTable_1:location_select'
<td>
<script type="text/javascript"><!--
var localMedLocations_hm=new Object();
localMedLocations_hm['testVaccine']=new Array('- Select -','back','neck');
localMedLocations_hm['testImplant']=new Array('- Select -','left ear');
var localMedLocations=localMedLocations_hm;
//--></script>
<select id="calfVaccinationRound1Form:entryTable_0:product_select"
name="calfVaccinationRound1Form:entryTable_0:product_select" size="1"
onchange="orgApacheMyfacesJsListenerSetExpressionProperty('calfVaccinationRound1Form:entryTable_0:product_select','calfVaccinationRound1Form:entryTable_0:location_select',null,'n=$srcElem.options[$srcElem.selectedIndex].value;
l=localMedLocations[n]; $destElem.options.length=0;
for(i=0;i<l.length;i++) { $destElem.options[i]=new Option(l[i],l[i]);
}');
orgApacheMyfacesJsListenerSetExpressionProperty('calfVaccinationRound1Form:entryTable_1:product_select','calfVaccinationRound1Form:entryTable_1:location_select',null,'n=$srcElem.options[$srcElem.selectedIndex].value;
l=localMedLocations[n]; $destElem.options.length=0;
for(i=0;i<l.length;i++) { $destElem.options[i]=new Option(l[i],l[i]);
}');">
<option value="- Select -" selected="selected">- Select -</option>
<option value="testVaccine">testVaccine</option>
<option value="testImplant">testImplant</option></select></td>
Has anybody else run into this problem and found a solution to it? It does
not make sense that changes in one row should trigger changes in another in
the listener javascript, but this seems to be the case.
--
View this message in context:
http://www.nabble.com/use-of-t%3AjsValueChangeListener-with-h%3AdataTable-t1521005.html#a4130278
Sent from the My Faces - Dev forum at Nabble.com.
