h:commandLink with f:ajax doesn't work - jsf-2

i use jsf2.0. my code look like this:
<h:form id="form">
<h:commandButton value="testbutton" action="#{Bean.test}">
<f:ajax render="msg"/>
</h:commandButton>
<h:outputText value="#{Bean.outmsg}" id="msg"/>
</h:form>
it's working well.
but if i change h:commandbutton to h:commandlink,
code look like this:
<h:form id="form">
<h:commandLink value="testbutton" action="#{Bean.test}">
<f:ajax render="msg"/>
</h:commandLink>
<h:outputText value="#{Bean.outmsg}" id="msg"/>
</h:form>
then my code can't work.
i need help,thanks guys.

use this code.
<f:ajax event="click" render="msg" listener="#{Bean.test}"/>
should be your java bean side like this.
public void test(AjaxBehaviorEvent event) { }

Related

Command Link with in a datatable not working

I am having a problem with primefaces command link.
I have two <h:form> which are not nested the link from the second <h:form> is not triggered.
<h:form>
<p:dataTable>
<p:column>
</p:column>
<p:column>
<p:commandLink onclick="dialog.show()"/>
</p:column>
</dataTable>
</h:form>
<p:dialogBox widgetWar="dialog">
<h:form>
<p:dataList value="#{bean.List}" var="var">
<p:commandLink value="#{var.name}" actionListener="#{bean.viewName(var.id)}"/>
</dataList>
</h:form>
</p:dialogBox>
The command Link from the dialog box is not working and there are no exceptions thrown.
Can any one help?
Your command Link shoud be inside <p:column>.
<p:dataList value="#{bean.List}" var="var">
<p:column>
<p:commandLink value="#{var.name}" actionListener="#{bean.viewName(var.id)}"/>
</p:column>
</p:dataList>
This is necessary in order tou have data Selection inside dataList. Related problem is here

PrimeFaces dialog not working in Chrome browser

As you can see I am trying to display a dialog box on click on the command link, the dialog is displayed in IE and Firefox, but not in Google Chrome v23, please suggest.
<h:form id="myForm">
<p:tabView id="tabView">
<p:tab id="tab1" title="Tab 1">
<h:panelGrid columns="1" cellpadding="10">
<h:dataTable value="#{testBean.dataList}" var="data">
<h:column>
<h:outputText value="#{data}" />
</h:column>
<h:column>
<p:commandLink action="#{testBean.loadCommentHistory(data)}"
update=":myForm:tabView:dialog" oncomplete="dlg.show()">
<h:graphicImage url="resources/theme1/images/comments.gif"
styleClass="basicImageStyle" />
</p:commandLink>
</h:column>
</h:dataTable>
<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
<h:outputText value="#{testBean.commentHistory}" />
</p:dialog>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
When you update the dialog the dialog is reset to the default state which is hidden. If you call dialog.show() and update the dialog the dialog is hidden again. Chrome (being probably faster than IE or FireFox) seems to handle this differently. A solution would be to wrap the content of the dialog in a container and update the container.
<p:commandLink action="#{testBean.loadCommentHistory(data)}"
update=":myForm:tabView:dialog-content" oncomplete="dlg.show()">
<h:graphicImage url="resources/theme1/images/comments.gif"
styleClass="basicImageStyle" />
</p:commandLink>
<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
<p:outputPanel id="dialog-content">
<h:outputText value="#{testBean.commentHistory}" />
</p:outputPanel>
</p:dialog>
Try to encapsulate the page in a f:view tag if you haven't already. There is some problem when it is not present with Chrome and Safari. See http://primefaces.org/faq.html question 3
<html xmnls=... >
<f:view contentType="text/html">
<h:head>
....
</h:head>
<h:body>
....
</h:body>
</f:view>
</html>

p:selectOneMenu first ajax request issue

I have a problem with PrimeFaces p:selectOneMenu component when I try to update a p:dataGrid by changing the SelectOneMenu's value.
Xhtml:
<p:selectOneMenu value="#{bussinessOwnersViewerMB.selectedCity}" effect="explode">
<f:selectItems value="#{bussinessOwnersViewerMB.cities}" var="city" itemLabel="#{city.cityName}" itemValue="#{city.cityId}"/>
<p:ajax listener="#{bussinessOwnersViewerMB.handleCityChange}" update="mainform:bolist"/>
</p:selectOneMenu>
<p:dataGrid id="bolist" var="bo" value="#{bussinessOwnersViewerMB.bOwners}" columns="3" rows="#{bussinessOwnersViewerMB.os}">
<p:column>
<p:panel header="#{bo.bOName}">
<h:panelGrid columns="1">
<p:graphicImage value="/resources/images/#{bo.boType}/#{bo.bOId}/mainProfile.jpg"/>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
The problem is, when I change the selectOneMenu's value at the first time the datagrid doesn't get updated. What happen is only the postconstructor method is called, after the first change it works fine.
My managed bean is a viewscoped managed bean.
The listener method "bussinessOwnersViewerMB.handleCityChange" is :
public void handleCityChange(ValueChangeEvent event) {
bOwners = bovb.loadAllDistributerByType(new Integer(selectedCity)); // selectedcity is the selected item id
os = Integer.toString(bOwners.size());
}
In the past you couldn't update a dataGrid like that; you had to wrap it in a panelGroup. I don't know wether or not that has changed, but I still do it like that and it still works. So just put your dataGrid inside a panelGroup and update the panelGroup (instead of the dataGrid) in your ajax tag.
In my case the problem was generated by a <p:panel> that contains a <h:panelGroup>, so the partial submit using <p:ajax> did not work. This problem happen when in the form there are empty fields which has required=true.
I updated the <p:panel> in <h:panelGroup>.
From:
<p:panel ... >
...
<h:panelGroup ...>
<!-- Form inside -->
</h:panelGroup>
...
</p:panel>
to
<h:panelGroup ... >
...
<h:panelGroup ...>
<!-- Form inside -->
</h:panelGroup>
...
</h:panelGroup>

f:ajax within ui:repeat, unknown id for the component [duplicate]

This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 7 years ago.
When I try to render a panelGroup by an ajax call, it gives unknown id.
<h:form id="form1" prependId=false>
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render="panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
When I tried this code, it gives unknown id panel1. I tried with id ":panel1" too. I get the same error.
A relative client ID (i.e. not starting with :) is relative to the current parent NamingContainer component. The <ui:repeat> is also a NamingContainer. So the render="panel1" is looking for the component within the context of <ui:repeat>. This isn't going to work. An absolute client ID (i.e. starting with :) is looking for the component within the context of view root. But you've it inside a <h:form> -which is in turn another NamingContainer component-, so the render=":panel" is also not going to work.
The following should work, with prependId="false" removed so that you can refer it:
<h:form id="form1">
<h:panelGroup id="panel1">
<h:dataTable/>
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render=":form1:panel1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
By the way, if you actually want to render only the table, then you should be doing this:
<h:form id="form1">
<h:panelGroup>
<h:dataTable id="table1" />
<ui:repeat value="#{bean.page}" var="page">
<h:commandLink value="#{page}">
<f:ajax execute="#form" render=":form1:table1" listener="#{bean.page}" />
</h:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
Update: as per the comments, it turns out that you have changed the JSF default NamingContainer separator character from : to _ by configuration. In that case, you need to use _ instead of : in the client ID selector.
<f:ajax execute="#form" render="_form1_panel1" listener="#{bean.page}" />
<ui:repeat value="#{interaction.interactionListBean}" var="interactionItr">
<h:commandLink value="#{interactionItr.interactionDate}" styleClass="#{interaction.createImage}" style="margin:0 5px 5px 0!important; display:inline-block;"><br/>
<f:ajax render=":formId:interactionDate :formId:category :formId:activity :formId:status :formId:channel :formId:status1 :formId:caseId :formId:comment :formId:user1 :formId:team :formId:user :formId:transit "
listener="#{interactionController.interactionDetailGet}"/>
<f:param name="RefId" value="#{interaction.interactionRefId}"/>
</h:commandLink>
</ui:repeat>
problem :
please refer above with above code their is no exception on console but the ajax listerner will not invoke when I saw this post similiar kind of concept being use just I was place the exceute="#form" then my coding is working fine
solution:
execute="#form"

JSF Bean won't set

This is very confusing. I'm working on a simple app for a class and followed the examples but the damn Bean property just won't set. Code follows:
Bean code:
import java.io.Serializable;
import javax.faces.bean.*;
import javax.faces.event.*;
#ManagedBean(name="dist") // or #Named("dist")
#SessionScoped
public class DistanceConvertBean implements Serializable{
private static final double MILESTOKM = 1.609344;
private static final double KMTOMILES = 0.62137;
private double input;
private String convertTo;
private String outputString;
Eclipse generated getters and setters
Index.xhtml code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<h:panelGrid columns="3">
<h:outputText value="Distance:"/>
<h:inputText id="inDist" value="#{dist.input}" required="true">
<f:convertNumber maxFractionDigits="2"/>
<f:validateDoubleRange maximum="10000"/>
</h:inputText>
<h:message for="inDist"/>
<h:outputText value="Convert To:"/>
<h:form>
<h:selectOneRadio value="#{dist.convertTo}" required="true">
<f:selectItem itemValue="km" itemLabel="Kilometer"/>
<f:selectItem itemValue="miles" itemLabel="Miles"/>
</h:selectOneRadio>
</h:form>
<h:form>
<h:commandButton value="Convert" action="blah"/>
</h:form>
</h:panelGrid>
</h:body>
</html>
Blah.xhtml code:
<h:body>
<h:outputText value="#{dist.input}"/>
</h:body>
So I put in 10 in the InputText field in Index.xhtml and press the command button to go to blah.xhtml. The value in blah is still 0.0.
I'm using Tomcat 7 and Eclipse Heilos and created a dynamic web project. I do have all the JSF jars in WEB-INF/libs. I don't understand why the bean properties are not being set. This look exactly like those newbie codes you find in COREJSF examples. Web.xml is using 2.5 for servlet so I shouldn't need a face-config.xml.
Your <h:inputText> is not inside a <h:form> element.
Put the <h:inputText> inside the same <h:form> as the command button:
<h:form>
<h:inputText id="inDist" value="#{dist.input}" required="true">
<f:convertNumber maxFractionDigits="2"/>
<f:validateDoubleRange maximum="10000"/>
</h:inputText>
<h:message for="inDist"/>
<h:commandButton value="Convert" action="blah"/>
</h:form>
The same applies to your <h:selectOneRadio>. Put it inside the <h:form> where the commandButton is.

Resources