-
1. Re: Getting element id inside of rich:column
you can find the element using richfaces-client side api :)
you should edit your javascript function to look like
if (#{rich:element('kpata:kpataAllQ1')}.checked==true) { #{rich:element('kpata:kpataAllQ1')}.disabled = true }regards,
Ilya Dyoshin
-
2. Re: Getting element id inside of rich:column
I already tried that, but that didn't even call javascript alert message.
-
3. Re: Getting element id inside of rich:column
I found followings:
this works since this is outside of rich:column:
if (#{rich:element('kpata:kpataAllQ1')}.checked==true) {
#{rich:element('kpata:kpataAllQ1')}.disabled = true;
}
but this doesn't work. (maybe this is inside of rich:column?)
if(document.getElementById('kpata:kpataAllQ1').checked==true){
alert("test2");
#{rich:element('kpata:kpataCherokeeG1Q1')}.checked = true;
}
----
anyway, rich:column causing problem and this seems obvious so far. -
4. Re: Getting element id inside of rich:column
For starters it would be a little helpful if you posted the full context of your problem. IE, the whole xhtml or at least up to the parent of the rich:column you are having problems with. And please post your code in between backticks ` `
But anyways. I'm going to assume that this component is inside a rich:datatable. (Or some other table)
If it is then your client id will not be 'kpata:kpataAllQ1' because otherwise there each row in your datatable would have the same id.
The id of the component is more then likely something like 'kpata:0:kpataAllQ1' where the 0 represents which row of the table the component is in.
When you have problems like this look at the generated html it will make the problem quite obvious.
-
5. Re: Getting element id inside of rich:column
I viewed generated html source and the id seems dynamically generated.
Anyway, here is my entire code.
KpataList.xhtml
`<?xml version="1.0" encoding="UTF-8"?>
<page xmlns="http://jboss.com/products/seam/pages"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://jboss.com/products/seam/pages http://jboss.com/products/seam/pages-2.1.xsd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">
<ui:define name="body">
<h:form id="kpata" styleClass="edit">
<h3 align="center"><u> KPATA Quantitative Report</u> <br />
<br />
</h3>
<h:selectBooleanCheckbox value="#{quanChkBoxBean.kpataAllQ1}" id="kpataAllQ1" onclick="quanChkBox();"/> Select All Q1<rich:spacer height="1" width="22" />
<h:selectBooleanCheckbox disabled="true" value="#{quanChkBoxBean.kpataAllQ2}" id="kpataAllQ2" /> Select All Q2<rich:spacer height="1" width="22" />
<h:selectBooleanCheckbox disabled="true" value="#{quanChkBoxBean.kpataAllQ3}" id="kpataAllQ3" /> Select All Q3<rich:spacer height="1" width="22" />
<h:selectBooleanCheckbox disabled="true" value="#{quanChkBoxBean.kpataAllQ4}" id="kpataAllQ4" /> Select All Q4<rich:spacer height="1" width="22" />
<h:selectBooleanCheckbox disabled="true" value="#{quanChkBoxBean.kpataAllYTD}" id="kpataAllYTD" /> Select All YTD
<rich:tabPanel switchType="client">
<ui:include src="/KpataListQ1.xhtml" />
<ui:include src="/KpataListQ2.xhtml" />
<ui:include src="/KpataListQ3.xhtml" />
<ui:include src="/KpataListQ4.xhtml" />
<ui:include src="/KpataListYTD.xhtml" />
</rich:tabPanel>
<s:div styleClass="actionButtons">
<h:commandButton action="#{quanChkBoxBean.chkBoxListener}"
value="Create Report" >
<h:inputHidden value="kpata" id="kpataPDFbtn" />
</h:commandButton>
</s:div>
</h:form>
<ui:include src="/KpataListMp.xhtml"/>
</ui:define>
</ui:composition>
</page>
`
KpataListQ1.xhtml
`<?xml version="1.0" encoding="UTF-8"?>
<page xmlns="http://jboss.com/products/seam/pages"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://jboss.com/products/seam/pages http://jboss.com/products/seam/pages-2.1.xsd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" >
<rich:tab>
<f:facet name="label">
<h:panelGroup>
<font size="2">1st Quarter/2010</font>
</h:panelGroup>
</f:facet>
<rich:dataTable value="columns.data1" var="data"
style="{border: 2px solid}">
<rich:column colspan="17">
<h:outputText
value="GOAL ONE: Increase access to high-quality, evidence-based services to at-risk pregnant women, infants and toddlers (I/T) in un-served and under-served counties throughout the state." />
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="#{messages['lbl.objectives']}" />
</rich:column>
<rich:column>
<h:outputText value="Indicators" />
</rich:column>
<h:column>
<h:selectBooleanCheckbox id="kpataCherokeeG1Q1" value="#{quanChkBoxBean.kpataCherokeeG1Q1}" /><b/>
<h:outputText value="Cherokee" />
</h:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataCrawfordG1Q1" value="#{quanChkBoxBean.kpataCrawfordG1Q1}" /><b/>
<h:outputText value="Crawford" />
</rich:column>
<rich:column >
<h:selectBooleanCheckbox id="kpataEllisG1Q1" value="#{quanChkBoxBean.kpataEllisG1Q1}" /><b/>
<h:outputText value="Ellis" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataFinneyG1Q1" value="#{quanChkBoxBean.kpataFinneyG1Q1}" /><b/>
<h:outputText value="Finney" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataFordG1Q1" value="#{quanChkBoxBean.kpataFinneyG1Q1}" /><b/>
<h:outputText value="Ford" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataHarveyG1Q1" value="#{quanChkBoxBean.kpataHarveyG1Q1}" /><b/>
<h:outputText value="Harvey" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataJohnsonG1Q1" value="#{quanChkBoxBean.kpataJohnsonG1Q1}" /><b/>
<h:outputText value="Johnson" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataLeavenworthG1Q1" value="#{quanChkBoxBean.kpataLeavenworthG1Q1}" /><b/>
<h:outputText value="Leavenworth" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataMontgomeryG1Q1" value="#{quanChkBoxBean.kpataMontgomeryG1Q1}" /><b/>
<h:outputText value="Montgomery" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataSalineG1Q1" value="#{quanChkBoxBean.kpataSalineG1Q1}" /><b/>
<h:outputText value="Saline" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataShawneeG1Q1" value="#{quanChkBoxBean.kpataShawneeG1Q1}" /><b/>
<h:outputText value="Shawnee" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataWyandotteG1Q1" value="#{quanChkBoxBean.kpataWyandotteG1Q1}" /><b/>
<h:outputText value="Wyandotte" />
</rich:column>
<rich:column>
<h:selectBooleanCheckbox id="kpataOtherCountiesG1Q1" value="#{quanChkBoxBean.kpataOthercountiesG1Q1}" /><b/>
<h:outputText value="Other Counties" />
</rich:column>
<rich:column>
<h:outputText value="Totals" />
</rich:column>
<rich:column>
<h:outputText value="Edit" />
</rich:column>
<rich:column rowspan="2" breakBefore="true">
<h:outputText
value="Expand and support services to an additional 550 families with 687 children prenatal to 3 years of age through Parents as Teachers. " />
</rich:column>
<rich:column>
<h:outputText value="1. # of families served through KPATA" />
</rich:column>
<rich:column >
<h:outputText value="#{kpataList.resultList.get(0).cherokee}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).crawford}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).ellis}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).finney}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).ford}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).harvey}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).johnson}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).leavenworth}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).montgomery}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).saline}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).shawnee}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText value="#{kpataList.resultList.get(0).wyandotte}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText
value="#{kpataList.resultList.get(0).otherCounties}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="totals"
value="#{kpataList.resultList.get(0).cherokee + kpataList.resultList.get(0).crawford +
kpataList.resultList.get(0).ellis + kpataList.resultList.get(0).finney +
kpataList.resultList.get(0).ford + kpataList.resultList.get(0).harvey+
kpataList.resultList.get(0).johnson + kpataList.resultList.get(0).leavenworth +
kpataList.resultList.get(0).montgomery + kpataList.resultList.get(0).saline +
kpataList.resultList.get(0).shawnee + kpataList.resultList.get(0).wyandotte + kpataList.resultList.get(0).otherCounties}">
</h:outputText>
</rich:column>
<rich:column>
<a4j:commandLink value="Edit"
oncomplete="#{rich:component('countyedit')}.show()"
reRender="countyinfo">
</a4j:commandLink>
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="2. # of children served through KPATA" />
</rich:column>
<rich:column >
<h:outputText id="cherokee1"
value="#{kpataList.resultList.get(1).cherokee}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="crawford1"
value="#{kpataList.resultList.get(1).crawford}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="ellis1"
value="#{kpataList.resultList.get(1).ellis}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="finney1"
value="#{kpataList.resultList.get(1).finney}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="ford1"
value="#{kpataList.resultList.get(1).ford}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="harvey1"
value="#{kpataList.resultList.get(1).harvey}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="johnson1"
value="#{kpataList.resultList.get(1).johnson}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="leavenworth1"
value="#{kpataList.resultList.get(1).leavenworth}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="montgomery1"
value="#{kpataList.resultList.get(1).montgomery}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="saline1"
value="#{kpataList.resultList.get(1).saline}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="shawnee1"
value="#{kpataList.resultList.get(1).shawnee}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="wyandotte1"
value="#{kpataList.resultList.get(1).wyandotte}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="otherCounties1"
value="#{kpataList.resultList.get(1).otherCounties}">
</h:outputText>
</rich:column>
<rich:column>
<h:outputText id="totals1"
value="#{kpataList.resultList.get(1).cherokee + kpataList.resultList.get(1).crawford +
kpataList.resultList.get(1).ellis + kpataList.resultList.get(1).finney +
kpataList.resultList.get(1).ford + kpataList.resultList.get(1).harvey+
kpataList.resultList.get(1).johnson + kpataList.resultList.get(1).leavenworth +
kpataList.resultList.get(1).montgomery + kpataList.resultList.get(1).saline +
kpataList.resultList.get(1).shawnee + kpataList.resultList.get(1).wyandotte + kpataList.resultList.get(1).otherCounties}">
</h:outputText>
</rich:column>
<rich:column>
<a4j:commandLink value="Edit"
oncomplete="#{rich:component('countyedit1')}.show()"
reRender="countyinfo">
</a4j:commandLink>
</rich:column>
</rich:dataTable>
</rich:tab>
</ui:composition>
</page>` -
6. Re: Getting element id inside of rich:column
Ok, take some time to read about how client ids are generated.
Certain JSF components act as Naming Containers. The ids of these naming containers will prefix all their children.
So if you have a table with id 'table' and a row with id 'row' your actual row component will end up with an id of 'table:row'
The problem you are having is that because you are not specifying the ids for your naming containers (table, forms etc) they are getting dynamically generated.
So you are going to end up with something like kpata:j_randomNumber:0:kpataAllQ1.
To fix this make sure you specify an id for your rich:dataTable component and then the id will no longer look random.
Secondly, learn how to use the rich:datatable component.
How you are using this component is wrong.
You are repeating your columns for each row. This is not how to use the component.
kpataList.resultList.get(1) is a good indication that you are doing something wrong. If your resultList has 99 results are you going to generate an xhtml page that has all your columns repeated 99 times with the getter index increased by one!!!?? No.So, here's how you do it properly.
<rich:dataTable id="resultsTable" value="#{kpataList.resultList}" var="result" style="{border: 2px solid}"> <f:facet name="header"> <rich:column colspan="17"> <h:outputText value="GOAL ONE: Increase access to high-quality, evidence-based services to at-risk pregnant women, infants and toddlers (I/T) in un-served and under-served counties throughout the state." /> </rich:column> <rich:column breakBefore="true"> <h:outputText value="#{messages['lbl.objectives']}" /> </rich:column> <rich:column> <h:outputText value="Indicators" /> </rich:column> <h:column> <h:selectBooleanCheckbox id="kpataCherokeeG1Q1" value="#{quanChkBoxBean.kpataCherokeeG1Q1}" /><b/> <h:outputText value="Cherokee" /> </h:column> <rich:column> <h:selectBooleanCheckbox id="kpataCrawfordG1Q1" value="#{quanChkBoxBean.kpataCrawfordG1Q1}" /><b/> <h:outputText value="Crawford" /> </rich:column> <rich:column > <h:selectBooleanCheckbox id="kpataEllisG1Q1" value="#{quanChkBoxBean.kpataEllisG1Q1}" /><b/> <h:outputText value="Ellis" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataFinneyG1Q1" value="#{quanChkBoxBean.kpataFinneyG1Q1}" /><b/> <h:outputText value="Finney" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataFordG1Q1" value="#{quanChkBoxBean.kpataFinneyG1Q1}" /><b/> <h:outputText value="Ford" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataHarveyG1Q1" value="#{quanChkBoxBean.kpataHarveyG1Q1}" /><b/> <h:outputText value="Harvey" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataJohnsonG1Q1" value="#{quanChkBoxBean.kpataJohnsonG1Q1}" /><b/> <h:outputText value="Johnson" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataLeavenworthG1Q1" value="#{quanChkBoxBean.kpataLeavenworthG1Q1}" /><b/> <h:outputText value="Leavenworth" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataMontgomeryG1Q1" value="#{quanChkBoxBean.kpataMontgomeryG1Q1}" /><b/> <h:outputText value="Montgomery" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataSalineG1Q1" value="#{quanChkBoxBean.kpataSalineG1Q1}" /><b/> <h:outputText value="Saline" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataShawneeG1Q1" value="#{quanChkBoxBean.kpataShawneeG1Q1}" /><b/> <h:outputText value="Shawnee" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataWyandotteG1Q1" value="#{quanChkBoxBean.kpataWyandotteG1Q1}" /><b/> <h:outputText value="Wyandotte" /> </rich:column> <rich:column> <h:selectBooleanCheckbox id="kpataOtherCountiesG1Q1" value="#{quanChkBoxBean.kpataOthercountiesG1Q1}" /><b/> <h:outputText value="Other Counties" /> </rich:column> <rich:column> <h:outputText value="Totals" /> </rich:column> <rich:column> <h:outputText value="Edit" /> </rich:column> </f:facet> <!--I'm not sure what you are trying to do here so this may not work --> <rich:column rowspan="2" breakBefore="true"> <h:outputText value="Expand and support services to an additional 550 families with 687 children prenatal to 3 years of age through Parents as Teachers. " /> </rich:column> <rich:column> <h:outputText value="1. # of families served through KPATA" /> </rich:column> <rich:column > <h:outputText value="#{result.cherokee}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.crawford}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.ellis}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.finney}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.ford}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.harvey}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.johnson}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.leavenworth}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.montgomery}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.saline}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.shawnee}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.wyandotte}"> </h:outputText> </rich:column> <rich:column> <h:outputText value="#{result.otherCounties}"> </h:outputText> </rich:column> <rich:column> <h:outputText id="totals" value="#{result.cherokee + result.crawford + result.ellis + result.finney + result.ford + result.harvey+ result.johnson + result.leavenworth + result.montgomery + result.saline + result.shawnee + result.wyandotte + result.otherCounties}"> </h:outputText> </rich:column> <rich:column> <a4j:commandLink value="Edit" oncomplete="#{rich:component('countyedit')}.show()" reRender="countyinfo"> </a4j:commandLink> </rich:column> </rich:dataTable>At least from what I can see this is how it should look (or close to this).
From a programming perspective it is generally a very bad idea to use list.get(index) in an xhtml page. As now you are bound to an exact number of results being returned by your query.
If I'm way off track and what you are doing is what you need for your application then I'm sorry. It just looks very awkward.
-
7. Re: Getting element id inside of rich:column
Thank you for your advise here. I didn't know it will generate randomly if I don't specify dataTable id. It works now.
Regarding the resultList, I also thought that way. The thing is this table format has two columns left side and one of them spans. Indeed there will be only 2 rows for this resultList. I am sure there is a better way to do it or maybe I used a wrong component.
Anyway, thanks for your help. I appreciate.... -
8. Re: Getting element id inside of rich:column
actually you forget about rowKeyVar property of the rich:dataTable component ;) that allows you to controll the ids for your inner components.
Sorry for late response,
Regards
Ilya Dyoshin