You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by JeroenM <je...@hotmail.com> on 2009/07/09 16:24:10 UTC
Issues when using Facelets
Hi,
I'm having trouble with a <h:selectOneRadio> . I have two pages divided into
two parts; top part being some input text boxes for the query parameters,
bottom part a result list with a selectOneRadio to select a row (and further
on display some details).
When using it in a dialog: the beans valueChangedListener gets called
without any trouble or additionional javascript submit(); because the dialog
doesn't use any Facelets tag
<trh:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad"
xmlns:f="http://java.sun.com/jsf/core">
<trh:head>
<script type="text/javascript" src="../js/global.js"></script>
</trh:head>
<trh:body>
<tr:form>
<trh:tableLayout>
<trh:rowLayout>
<trh:cellFormat>
<tr:outputLabel for="land" value="Land" />
</trh:cellFormat>
<trh:cellFormat>
<tr:inputText id="land" value="#{pickLand.zoekString}" />
</trh:cellFormat>
<trh:cellFormat>
<h:commandButton value="Zoeken"
actionListener="#{pickLand.zoeken}" />
</trh:cellFormat>
</trh:rowLayout>
</trh:tableLayout>
<h:dataTable binding="#{pickLand.dataTable}" value="#{pickLand.items}"
styleClass="itemClass"
headerClass="headerClass" var="currentItem">
<h:column>
<f:facet name="header">Code</f:facet>
<h:selectOneRadio styleClass="none"
valueChangeListener="#{pickLand.setSelectedItem}"
onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="#{currentItem.id}"/>
</h:selectOneRadio>
</h:column>
<h:column>
<f:facet name="header">Landnaam</f:facet>
<h:outputText value="#{currentItem.naam}" />
</h:column>
</h:dataTable>
<tr:commandButton text="Submit" action="#{pickLand.save}" />
<tr:commandButton text="Cancel" action="#{pickLand.cancel}" />
</tr:form>
</trh:body>
</trh:html>
However I also have a page which includes ui:composition tags. Because of
this the generated page output is different. The javascript function which
toggles the radiobutton gets called, however the valueChangedListener doesnt
get called. Only if I supply an additional onclick=submit() the
valueChangedListener gets called, but as a side effect the entire page will
be flushed. Is there any way (or documentation) to do this without the page
being reloaded?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:tr="http://myfaces.apache.org/trinidad"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<ui:composition template="/facelets/template.xhtml">
<ui:define name="content">
<script type="text/javascript" src="../js/global.js"></script>
<h3>Zoeken VIP</h3>
<tr:form>
<trh:tableLayout>
<trh:rowLayout>
<trh:cellFormat>
<tr:outputLabel for="vipnummer" value="VIP nummer" />
</trh:cellFormat>
<trh:cellFormat>
<tr:inputText id="vipnummer"
value="#{zoekenVIP.persoon.vipnummer}" />
</trh:cellFormat>
</trh:rowLayout>
<trh:rowLayout>
<trh:cellFormat>
<tr:outputLabel for="gbanummer" value="GBA nummer" />
</trh:cellFormat>
<trh:cellFormat>
<tr:inputText id="gbanummer"
value="#{zoekenVIP.persoon.gbanummer}" />
</trh:cellFormat>
</trh:rowLayout>
<trh:rowLayout>
<trh:cellFormat>
<tr:outputLabel for="jaargeboorte" value="Jaar geboorte" />
</trh:cellFormat>
<trh:cellFormat>
<tr:inputText id="jaargeboorte"
value="#{zoekenVIP.persoon.jaargeboorte}" />
</trh:cellFormat>
</trh:rowLayout>
<trh:rowLayout>
<trh:cellFormat>
<tr:outputLabel for="geboortegemeente" value="Geboorte gemeente" />
</trh:cellFormat>
<trh:cellFormat>
<tr:inputText id="geboortegemeente"
value="#{zoekenVIP.persoon.geboortegemeente}"
partialTriggers="btnZoekGemeente" />
</trh:cellFormat>
<trh:cellFormat>
<tr:commandButton text="LOV" id="btnZoekGemeente"
useWindow="true" partialSubmit="true"
action="dialog:pickGemeente"
returnListener="#{zoekenVIP.handleGemeente}" />
</trh:cellFormat>
</trh:rowLayout>
</trh:tableLayout>
<h:commandButton value="Nieuw" actionListener="#{zoekenVIP.nieuw}" />
<h:commandButton value="Zoeken" actionListener="#{zoekenVIP.zoeken}"
action="next" />
<h:dataTable binding="#{zoekenVIP.dataTable}"
value="#{zoekenVIP.items}" styleClass="itemClass"
headerClass="headerClass" var="currentItem">
<h:column>
<f:facet name="header">Code</f:facet>
<h:selectOneRadio styleClass="none"
valueChangeListener="#{persoonsGegevens.setSelectedItem}"
onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="#{currentItem.vipnummer}" />
</h:selectOneRadio>
</h:column>
<h:column>
<f:facet name="header">VIP Nummer</f:facet>
<h:outputText value="#{currentItem.vipnummer}" />
</h:column>
<h:column>
<f:facet name="header">Achternaam</f:facet>
<h:outputText value="#{currentItem.achternaam}" />
</h:column>
</h:dataTable>
</tr:form>
</ui:define>
</ui:composition>
</f:view>
</html>
--
View this message in context: http://www.nabble.com/Issues-when-using-Facelets-tp24410595p24410595.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
Re: Issues when using Facelets
Posted by Joe ONeil <jo...@comcast.net>.
The reason the Dialog is working is because clicking the save button causes a
total page refresh the listener gets called on the refresh. The select item
does not call an action so you have to refresh the page with the submit
call( you also want to add immediate="true" to avoid validation)
To use the listener without out a submit you need to use partial page
rendering that is fire when the onchange event of the selectOneRadio button
occurs. To do this you will need to use Tomahawk or trinidad components
depending which framework you use will have different solutions
Trinidad
http://myfaces.apache.org/trinidad/devguide/ppr.html
Tomahawk
<h:selectOneRadio id="SOR" styleClass="none"
valueChangeListener="#{pickLand.setSelectedItem}"
onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="#{currentItem.id}"/>
</h:selectOneRadio>
<s:pprPanelGroup id="poPrefixppr" partialTriggers="SOR(onchange),
BTN(onclick),BTN2(onclick)">
<!--Components that you wish to reflect change here
-code between will be updated on id selectOneRadio with id="SOR" is change
or
Command buttons with ids BTN and BTN2 are clicked
->
</s:pprPanelGroup
JeroenM wrote:
>
> Hi,
>
> I'm having trouble with a <h:selectOneRadio> . I have two pages divided
> into two parts; top part being some input text boxes for the query
> parameters, bottom part a result list with a selectOneRadio to select a
> row (and further on display some details).
>
> When using it in a dialog: the beans valueChangedListener gets called
> without any trouble or additionional javascript submit(); because the
> dialog doesn't use any Facelets tag
>
> <trh:html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:ui="http://java.sun.com/jsf/facelets"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:trh="http://myfaces.apache.org/trinidad/html"
> xmlns:tr="http://myfaces.apache.org/trinidad"
> xmlns:f="http://java.sun.com/jsf/core">
> <trh:head>
> <script type="text/javascript" src="../js/global.js"></script>
> </trh:head>
> <trh:body>
> <tr:form>
> <trh:tableLayout>
> <trh:rowLayout>
> <trh:cellFormat>
> <tr:outputLabel for="land" value="Land" />
> </trh:cellFormat>
> <trh:cellFormat>
> <tr:inputText id="land" value="#{pickLand.zoekString}" />
> </trh:cellFormat>
> <trh:cellFormat>
> <h:commandButton value="Zoeken"
> actionListener="#{pickLand.zoeken}" />
> </trh:cellFormat>
> </trh:rowLayout>
> </trh:tableLayout>
>
> <h:dataTable binding="#{pickLand.dataTable}" value="#{pickLand.items}"
> styleClass="itemClass"
> headerClass="headerClass" var="currentItem">
> <h:column>
> <f:facet name="header">Code</f:facet>
> <h:selectOneRadio styleClass="none"
> valueChangeListener="#{pickLand.setSelectedItem}"
> onclick="dataTableSelectOneRadio(this);">
> <f:selectItem itemValue="#{currentItem.id}"/>
> </h:selectOneRadio>
> </h:column>
> <h:column>
> <f:facet name="header">Landnaam</f:facet>
> <h:outputText value="#{currentItem.naam}" />
> </h:column>
> </h:dataTable>
>
> <tr:commandButton text="Submit" action="#{pickLand.save}" />
> <tr:commandButton text="Cancel" action="#{pickLand.cancel}" />
> </tr:form>
> </trh:body>
> </trh:html>
>
>
> However I also have a page which includes ui:composition tags. Because of
> this the generated page output is different. The javascript function which
> toggles the radiobutton gets called, however the valueChangedListener
> doesnt get called. Only if I supply an additional onclick=submit() the
> valueChangedListener gets called, but as a side effect the entire page
> will be flushed. Is there any way (or documentation) to do this without
> the page being reloaded?
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:ui="http://java.sun.com/jsf/facelets"
> xmlns:tr="http://myfaces.apache.org/trinidad"
> xmlns:trh="http://myfaces.apache.org/trinidad/html"
> xmlns:h="http://java.sun.com/jsf/html"
> xmlns:f="http://java.sun.com/jsf/core">
> <f:view>
> <ui:composition template="/facelets/template.xhtml">
> <ui:define name="content">
> <script type="text/javascript" src="../js/global.js"></script>
>
> <h3>Zoeken VIP</h3>
> <tr:form>
> <trh:tableLayout>
> <trh:rowLayout>
> <trh:cellFormat>
> <tr:outputLabel for="vipnummer" value="VIP nummer" />
> </trh:cellFormat>
> <trh:cellFormat>
> <tr:inputText id="vipnummer"
> value="#{zoekenVIP.persoon.vipnummer}" />
> </trh:cellFormat>
> </trh:rowLayout>
> <trh:rowLayout>
> <trh:cellFormat>
> <tr:outputLabel for="gbanummer" value="GBA nummer" />
> </trh:cellFormat>
> <trh:cellFormat>
> <tr:inputText id="gbanummer"
> value="#{zoekenVIP.persoon.gbanummer}" />
> </trh:cellFormat>
> </trh:rowLayout>
> <trh:rowLayout>
> <trh:cellFormat>
> <tr:outputLabel for="jaargeboorte" value="Jaar geboorte" />
> </trh:cellFormat>
> <trh:cellFormat>
> <tr:inputText id="jaargeboorte"
> value="#{zoekenVIP.persoon.jaargeboorte}" />
> </trh:cellFormat>
> </trh:rowLayout>
> <trh:rowLayout>
> <trh:cellFormat>
> <tr:outputLabel for="geboortegemeente" value="Geboorte gemeente" />
> </trh:cellFormat>
> <trh:cellFormat>
> <tr:inputText id="geboortegemeente"
> value="#{zoekenVIP.persoon.geboortegemeente}"
> partialTriggers="btnZoekGemeente" />
> </trh:cellFormat>
> <trh:cellFormat>
> <tr:commandButton text="LOV" id="btnZoekGemeente"
> useWindow="true" partialSubmit="true"
> action="dialog:pickGemeente"
> returnListener="#{zoekenVIP.handleGemeente}" />
> </trh:cellFormat>
> </trh:rowLayout>
> </trh:tableLayout>
>
> <h:commandButton value="Nieuw" actionListener="#{zoekenVIP.nieuw}" />
> <h:commandButton value="Zoeken" actionListener="#{zoekenVIP.zoeken}"
> action="next" />
>
> <h:dataTable binding="#{zoekenVIP.dataTable}"
> value="#{zoekenVIP.items}" styleClass="itemClass"
> headerClass="headerClass" var="currentItem">
> <h:column>
> <f:facet name="header">Code</f:facet>
> <h:selectOneRadio styleClass="none"
> valueChangeListener="#{persoonsGegevens.setSelectedItem}"
> onclick="dataTableSelectOneRadio(this);">
> <f:selectItem itemValue="#{currentItem.vipnummer}" />
> </h:selectOneRadio>
> </h:column>
> <h:column>
> <f:facet name="header">VIP Nummer</f:facet>
> <h:outputText value="#{currentItem.vipnummer}" />
> </h:column>
> <h:column>
> <f:facet name="header">Achternaam</f:facet>
> <h:outputText value="#{currentItem.achternaam}" />
> </h:column>
> </h:dataTable>
> </tr:form>
> </ui:define>
> </ui:composition>
> </f:view>
> </html>
>
>
--
View this message in context: http://www.nabble.com/Issues-when-using-Facelets-tp24410595p25191747.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.