I got panel with closeable property and rendered property. At first, the panel rendered is false, so it's not shown.
After I clicked command Button, the panel rendered is set to true (in my bean it named isShowChat) and the panel appeared.
When I close that panel, every ajax run in that window closed.
Here's my xhtml code :
<h:form id="live-chat">
<p:panelGrid class="panel-content" columns="2" columnClasses="form-right,form-left" id="live-chat-panelgrid">
<p:panel style="min-width: 500px; height: 500px;" >
<p:panel header="#{liveChatMBean.agent.name}" closable="true" rendered="#{liveChatMBean.isShowChat}">
<p:ajax event="close" listener="#{liveChatMBean.onClose}" />
</p:panel>
</p:panel>
</p:panelGrid>
</h:form>
Here's my onClose method on backing bean :
public void onClose(CloseEvent event) {
isShowChat = false;
}
I don't know why when I triggered onClose listener, every ajax run in there is stop.
Have you guys face this problem? Thanks for your help.
Update :
Sorry I forgot to tell there's error in firebug.
Related
I need your help and guidance on fixing the issue of showing the dialog after refreshing the form by using ajax. I am having a dataTable that it is showing a number of requests and onclick of the commandButton view, a dialog will be shown that contains some information. And onclose of the dialog, the form will be refreshed and the dataTable will get the updated information from the database. However for the first time, the dialog will be shown and the form will be refreshed by closing the dialog.
If I tried to click again on the view commandButton on the second time, the commandButton will not show any dialog and will not seem to do an action. Even the log it is not showing anything.
Here is my xhtml:
<h:form id="Requests">
<p:dataTable id="PendingRequests" var="hr" value="#{hrd.pendingRequests}"
filteredValue="#{hrd.filteredPendingRequests}">
<p:column headerText="Req. Date" sortBy="#{hr.requestDate}"
filterMatchMode="contains" filterBy="#{hr.requestDate}">
<h:outputText value="#{hr.requestDate}" />
</p:column>
<p:column>
<f:facet name="header">View</f:facet>
<p:commandButton id="submitbutton" update=":Requests:#{hr.dialogueName} "
oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search"
title="View">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog id="CertificateDialog" header="Cert1" widgetVar="CertificateDialog">
<p:ajax event="close" update=":Requests" listener="#{hrd.UpdateDatatable}" />
</p:dialog>
</h:form>
This method will be called onclose of the dialog .The UpdateDatatable method code is:
listPendingRequests.clear();
listPendingRequests = new ArrayList<PendingRequests>();
PreparedStatement ps = null;
String sql = "";
try {
con = DBConn.getInstance().getConnection("jdbc/hr");
// SQL Statement
ps = con.prepareStatement(sql);
ResultSet result = ps.executeQuery();
while (result.next()) {
PendingRequests pendingList = new PendingRequests();
requestDate = result.getString("REQ_DT");
pendingList.setRequestDate(requestDate);
listPendingRequests.add(pendingList);
RequestContext.getCurrentInstance().update("Requests");
}
} catch (Exception e) {
System.err.print(e);
e.printStackTrace();
}
Dialogs have a special treatment in HTML DOM and JavaScript. You should never be ajax-updating any of the dialog's parents while still in the same view. Otherwise you potentially end up with duplicate dialogs and conflicts in JS. Moreover, the strong recommendation is to give each dialog its own form as in <p:dialog><h:form> to avoid confusion and misuse by starters, but as you'd like to use ajax close event on it, you can't get around to use <h:form><p:dialog> instead. However, you placed other stuff in the very same form and you're even ajax-updating it. This is not right.
Tie the form to the dialog itself and don't put other stuff on it. In other words, split the current form.
<h:form id="requests">
<p:dataTable ...>
...
</p:dataTable>
</h:form>
<h:form>
<p:dialog ...>
<p:ajax event="close" ... update=":requests" />
</p:dialog>
</h:form>
I found a strange behaviour regarding the ajax rendering of JSF and I am not shure what I am missing.
For simplicity I have a page with an h:inputText and and a h:panelGrid with a button inside. When someone clicks the button, the value of the h:inputText should be set with a standard value and the h:panelGrid should disappear. At first I will show the code then I explain it a bit more.
xhtml page:
<h:inputText id="trackingIdValue" value="#{bean.trackingId}" />
<h:panelGrid border="15" id="panel" rendered="#{not empty bean.list}">
<h:commandButton action="#{bean.render}" value="Clear Panel" >
<f:ajax execute="#this" render="panel trackingIdValue" />
</h:commandButton>
</h:panelGrid>
corresponding bean:
private Long trackingId;
private List<String> list;
public Long getTrackingId() {
return trackingId;
}
public List<String> getList() {
return list;
}
public void setList( List<String> list ) {
this.list = list;
}
#PostConstruct
public void init() {
// the list will be filled with some initial values
}
public void render() {
this.trackingId = 954643L;
list.clear();
}
When the page gets loaded the list will be filled with some values in the PostConstruct. This leads to the displaying of the panel because the list is not empty now. But when I click the button in the panel (where I change the trackingId and empty the list) the trackingId changed in the GUI but the panel is still visible. What did I do wrong?
UPDATE 1
As written in the comment I tried the code above in an empty project and there it works. I currently have a qiete huge application so shrinked down my pages and ended the following:
My project is consists of multiple page templates.In my master layout I have a h:head tag which loads many of my stylesheets I need for the application. When I completely remove the h:head tag then it works but then of course my styling is pretty bad. What does this has to do with my ajax loading and the panelgrid?
UPDATE 2
I have shorten my application to just one tiny page:
<h:head>
<h:outputStylesheet name="masterStyle.css" library="css" />
</h:head>
<h:body>
<h:form>
<h:inputText id="trackingIdValue" value="#{testBean.trackingId}" />
<h:panelGroup border="15" id="panel"
rendered="#{not empty testBean.list}">
<h:commandButton action="#{testBean.render}" value="Clear Panel">
<f:ajax execute="#this" render="panel trackingIdValue" />
</h:commandButton>
</h:panelGroup>
</h:form>
</h:body>
</html>
When I remove the header tag the ajax request works fine with both the inputtext and the panel. But when I add my stylesheets in the header like above ajax only works with the inputtext.
As per the existing behaviour, on click of command button, controller is redirected to different page with processed results. Instead of redirecting to a different page, I would like all the result to be opened in a pop up window.
Below is the existing code in Facelets file.
<h:commandLink id="pp" styleClass="submitbutton" onclick="return isChecked();">
<h:outputText value="My Report" style="color: white;"/>
<f:param name="IdNumber" value="#{IdNumber}"/>
<f:ajax render="allOtherPages" listener="#{someController.showAllDetails}" execute="#form" onevent="showProgressBar()"/>
</h:commandLink>
Below is code in controller
public void showAllDetails(AjaxBehaviorEvent event){
HttpServletRequest request = getHttpRequest();
request.setAttribute("IdNumber", request.getParameter("IdNumber"));
somePageController.setContentPage("new.xhtml");
}
How can I change the code to achieve the above or share some link with similar example?
well first ill explain what im tryng to do, i have a index.xhtml page where i include menu.xhtml with a menubar of primefaces, in menu.xhtml in have a panel id=contenido where i want to update depending of the menuitem clicked, i already get update that panel but the problem is when i update to another page for example in default is home.xhtml and i update to enviarsol.xhtml then the command button from enviarsol.xhtml is not working, im new at this and i already tried some different ways of updating the panel, im thinking that the problem is that the bean of enviarsol.xhtml is not managed or something like that,also im doing this way because i want to refresh only that panel and not all the page, someone help me please.
index.xhtml:
<h:form>
<img src="resources/homeheader.jpg" width="300" height="113" alt="homeheader"/>
<div style="background-color: white">
<img src="resources/Logos.jpg" width="1024" height="166" alt="homeheader"/>
</div>
<p:panel id="centerpage" >
<ui:include src="WEB-INF/menu.xhtml"/>
</p:panel>
</h:form>`
menu.xhtml:
<p:menuitem value="Contactos" icon="ui-icon-arrowreturnthick-1-w" actionListener="#{bnmenu.btnEditarContacto(e)}" update="contenido"/>
<p:panel id="contenido" >
<ui:include src="#{bnmenu.url}"/>
</p:panel>
bnmenu.java:
private String url;
public bnmenu() {
url="home.xhtml";
}
public void btnEditarContacto(ActionEvent e)
{
url="enviarsol.xhtml";
}
home.xhtml:
<p:panelGrid columns="2" style="border-width: 0px">
<p:commandButton value="Consultar" actionListener="#{bnhome.btnlogin(e)}" update="txt1"/>
<p:inputText id="txt1" value="#{bnhome.txtUsuario}"/>
</p:panelGrid>
enviarsol.xhtml:
<p:panelGrid columns="2" style="border-width: 0px">
<p:outputLabel for="txtcorreo" value="Correo: "/>
<p:inputText id="txtcorreo" value="#{bnSolicitud.correo}"/>
<p:outputLabel for="txtmensaje" value="Mensaje: "/>
<p:inputText id="txtmensaje" value="#{bnSolicitud.mensaje}"/>
<p:commandButton value="Enviar" actionListener="#{bnSolicitud.btnSolicitar(e)}" update="messages"/>
</p:panelGrid>`
i included this:
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
and now it is working but i dont know what more effects will this cause
well now it works but only once when i click in commandbutton from enviarsol.xhtml
Finally it appears working fine, i changed #RequestScoped by #SessionScoped in bnmenu
Are you sure that you really want ajax navigation? It is very frustrating for a user not being able to use the browsers urlfield or navigation buttons, and it will be harder for you to code aswell. Consider transforming index.xhtml into a template file as described at http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example and using normal navigation.
I have basically two problems.
When I press the button in Form1, it is working fine, but I can't see the messages from FacesContext.
Another problem is in Form2. When I press the button only once, it goes to the server but nothing happens, no submit. But when I press it on second time, it is working fine. There is of course the same problem like in form one, that I can't see the messages from FacesContext. Could you please help and tell me what is causing that or is there another solution for having multiple forms inside one page?
<p:tabView>
<p:tab title="Form1">
<h:form id="form1">
<p:inputText id="txtInput" value="#{controller.selected.defaultLayout}" />
<h:commandButton value="Submit other form" action="#{controller.createMenu()}">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
</h:form>
</p:tab>
<p:tab title="Form2">
<h:form id="form2">
<p:inputText id="txtInput2" value="#{controller.selected.defaultTheme}" />
<h:commandButton value="Submit other form" action="#{controller.createMenu2()}">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
</h:form>
</p:tab>
</p:tabView>
Controller:
public String createMenu() {
Menu menu = current.getMenuMenuId();
try {
//current.getMenuMenuId().setMenuCreated(true);
//getFacade().edit(current);
JsfUtil.addSuccessMessage(ResourceBundle.getBundle("resources/Bundle").getString("MenuCreated"));-----> never visible!
return "";
} catch (Exception e) {
JsfUtil.addErrorMessage(e, ResourceBundle.getBundle("resources/Bundle").getString("PersistenceErrorOccured"));
return null;
}
}
EDIT: I took the outer -tags off and then the page is not working anymore, then I get the error message:
javax.faces.FacesException: <f:ajax> contains an unknown id ':form2' - cannot locate it in the context of the component j_idt77
at com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.getResolvedId(AjaxBehaviorRenderer.java:285)
at com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.appendIds(AjaxBehaviorRenderer.java:272)
at com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.buildAjaxCommand(AjaxBehaviorRenderer.java:214)
at com.sun.faces.renderkit.html_basic.AjaxBehaviorRenderer.getScript(AjaxBehaviorRenderer.java:86)
at javax.faces.component.behavior.ClientBehaviorBase.getScript(ClientBehaviorBase.java:103)
Thank you!
Sami
Nesting forms is not valid html. This will cause unexpected behavior. Remove the outer form and see which of your issues persist.
UPDATE:
Primefaces tabview works without form as well. However if you have input elements and command buttons inside your tabs you need a form. But this is a html requirement and not PF specific. You should remove the outer form only and not the inner forms. Please update your question with your current version.