I have popup window that is used in few tabs and popup uses some params from tabs such as dialogContainerId and dialogId.
I have "select item" menu and "refresh items" button near it. So when user click button i want to get new item list for select menu. Select menu works as expected, but "refresh" button is not. I'm sure that listener on refresh button works well and can see updated item list if new items appear in database. But select menu doesn't update. It seems like render attribute on f:ajax doesn't work or there is id mismatch. I checked page and found nothing. Ids look well. I tried constant ids, and tried to move id to parent tag, but always have got same result - select menu is not re-rendered.
Does any one have ideas or suggestions? Thanks in advance.
Here is source page:
<ui:composition>
<h:panelGroup id="#{dialogContainerId}">
<rich:popupPanel id="#{dialogId}" autosized="true" modal="true" domElementAttachment="parent">
<h:panelGrid id="#{dialogId}commonControls" columns="3">
<!-- more input tags -->
<h:outputLabel value="Create dialog" />
<h:panelGroup>
<rich:select id="#{dialogId}expenseItem" value="#{expenseItemInstanceBean.selectedExpenseItemId}"
selectFirst="true" required="true" requiredMessage="Required">
<f:selectItems value="#{expenseItemInstanceBean.expenseItemsAsList}"
var="item" itemValue="#{item.id}" itemLabel="#{item.name}" />
</rich:select>
<h:graphicImage library="icons" name="refresh_16x16.gif" title="Refresh">
<f:ajax event="click" execute="#this" render="#{dialogId}expenseItem"
listener="#{expenseItemInstanceBean.refreshExpenseItems()}" />
</h:graphicImage>
</h:panelGroup>
<h:messages for="#{dialogId}expenseItem" />
<!-- more input tags -->
</h:panelGrid>
<!-- button tags tags -->
</rich:popupPanel>
</h:panelGroup>
</ui:composition>
And part of rendered html page:
<td>
<div class="rf-sel" id="idForm:wrkSchedDialogexpenseItem">
<!-- here is my list and additional autogenerated jsf tags -->
</div>
<img id="idForm:j_idt42" src="/logistics-web/javax.faces.resource refresh_16x16.gif.xhtml?ln=icons"
alt="" style="vertical-align: bottom" title="Refresh"
onclick="mojarra.ab(this,event,'click','#this','idForm:wrkSchedDialogexpenseItem');return false"
class="linkLikeCursor" name="idForm:j_idt42"/>ev
</td>
Related
I want to switch between two views and report two lists outputs on each view.
Toggle between views uses a <h:commandLink> with an <f:ajax> element.
Each view generates the output of the lists with <ui:repeat>
The output works fine, if the <h:outputText> within the <ui:repeat> does not specify the escape attribute.
After adding escape="true" to the <h:outputText> the following happens:
After clicking the <commandLink> the <commandLink> the browser does not update the rendered output.
After clicking the myController.toggleView changes listData.showFirst (boolean)
After clicking the <commandLink> the source code of the website changes to what should be there.
Summary: Clicking the <commandLink> updates the outputed source code, but the browser does not update the output, when the <h:outputText> in the <ui:repeat> uses the attribute escape="true".
Here the code:
<h:form prependId="false">
<h:commandLink actionListener="#{ myController.toggleView }" value="Click">
<f:ajax render="#form" />
</h:commandLink>
<h:panelGroup rendered="#{ listData.showFirst }" id="firstView">
<ui:repeat var="house" value="#{ listData.houses }">
<h:outputText value="#{ house.description }" escape="false" />
</ui:repeat>
</h:panelGroup>
<h:panelGroup rendered="#{ !listData.showFirst }" id="secondView">
<ui:repeat var="street" value="#{ listData.streets }">
<h:outputText value="#{ street.description }" escape="false" />
</ui:repeat>
</h:panelGroup>
</h:form>
Any ideas?
I've stumbled upon a strage behavior of richfaces. Some background about my view structure:
It's mainly a <rich:extendedDataTable> where a click on a row displays info about it on a <a4j:outputPanel>
Also, each row has a context menu with items like "Create", "Edit", etc... that pops a <rich:popupPanel>
The component structure is this:
<h:panelGrid columns="2">
<h:column>
<rich:dataScroller for="testTable" maxPages="7"/>
<rich:extendedDataTable id="testTable" value="#{testController.items}" rendered="#{testController.items.rowCount != 0}"
selection="#{testController.selectedRow}" noDataLabel="No results to show" var="test" rows="20"
style="width: 790px" selectionMode="single">
<a4j:ajax execute="#form"
event="selectionchange"
listener="#{testController.selectionListener}"
render=":res"/>
{columns to display}
</rich:extendedDataTable>
</h:column>
<a4j:outputPanel id="res">
<rich:panel header="Selected Rows:" rendered="#{not empty testController.selectedRows}">
<rich:list type="unordered" value="#{testController.selectedRows}" var="t">
<h:outputText value="#{t.name}"/>
<br/>
<h:outputText value="#{t.details}" converter="#{testConverter}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
</h:panelGrid>
<rich:contextMenu target="testTable" mode="ajax" id="contextMenu">
<rich:menuItem label="Edit" render="popupEdit" oncomplete="#{rich:component('popupEdit')}.show();" mode="ajax"/>
</rich:contextMenu>
<rich:popupPanel id="popupEdit" modal="true" autosized="true" resizeable="false" moveable="false" domElementAttachment="form">
<rich:hotKey key="esc" onkeyup="#{rich:component('popupEdit')}.hide(); return false;"/>
<f:facet name="header">
<h:outputText value="Edit Test"/>
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popupEditar')}.hide(); return false;">
<h:graphicImage value="/resources/css/images/fechar_janela.png" width="20" height="20"/>
</h:outputLink>
</f:facet>
<h:panelGrid id="popupEditContent" columns="2">
... {display of info}
<a4j:commandButton value="Salvar" actionListener="#{testeController.update()}" render="tabelaTestes, contextMenu"/>
<h:panelGroup id="messagePanel" layout="block">
<rich:messages ajaxRendered="true" />
</h:panelGroup>
</h:panelGrid>
</rich:popupPanel>
And now the strange behaviour (using NetBeans):
Deploy the app from NetBeans;
Open the URL of the deployed project on browser (Firefox) . The <a4j:ajax> inlined in the table doesn't work, I know this because the 'testController.selectionListener' is not called and the details are not displayed (it sets the attribute current in the backing bean). The contextMenu works but the popupPanel shows null or empty properties in all fields (the current attribute is not set);
Go back to the IDE, remove all the <rich:popupPanel> section and save the file;
Back in the browser, hit F5 and click a row. Now the <a4j:ajax> works and calls testController.selectionListener, showing the details in <a4j:outputPanel>. The context menu works but (obviously) the panel does not pop;
In the IDE, put back the <rich:popupPanel> section and save the file;
Now refresh the page again, and everything works, details are shown and the Edit pop up shows the right info of the selected row.
I have tried deploying it without the <rich:popupPanel> section and the selecionListener gets called. I think that the problem is deploying the page with both <a4j:ajax> and <rich:popupPanel> sections, hence the "conflict".
I took the structure from the richfaces showcase and made changes. I noticed that in the showcase, the <rich:popupPanel> is placed outside the <h:form> tag, wich in my project is placed in the template.xhtml (so a topmenu page works). Is it possible that the error is caused by this placement?
Could this be considered a bug to file in the richfaces project or am I missing something there?
Is there a workaround or solution?
Thank you very much!
I think I have solved it. I set the id attribute to "form" in the <h:form> tag, in template.xhtml, so now it looks like this:
<h:body>
<h:form id="form">
<div id="top" class="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:form>
</h:body>
It was the only change I made and now all the components work at first post-deploy.
Edit: Found the solution when searching for another problem: JSF action call on secon click
I have a ajaxstatus and dialog which is used for searching
<h:body>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<p:dialog id="loading" modal="true" widgetVar="statusDialog" header="" draggable="false" closable="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
Dialog Part
<p:dialog id="showDial" header="Search" widgetVar="srch" resizable="false" >
<h:panelGrid id="searchGrid" columns="2" cellpadding="10" >
<h:outputLabel id="srchIdLbl" value="Employee ID:" />
<p:inputText id="srchIdTxt" value="#{employee.employeeId}" />
<p:commandButton id="search1" value="Search" type="submit" action ="#{employee.search()}"
update="patientTbl"/>
<p:commandButton id="reset1" value="Reset" type="reset" />
</h:panelGrid>
</p:dialog>
the above code works fine, it displays the loading dialog. But once the search is completed the dialog will remain in the screen.
I added the below code in the commandButton id="search1" to close the dialog
onComplete="showDialog.hide()"
*Problem:*If i add the above line the AjaxStatus is not shown. I want to know why its not displaying.
I also tried adding the below code to the commandButton id="search1"
onclick="statusDialog.show()" onselect="statusDialog.show()" onmousedown="statusDialog.show()" onComplete="showDialog.hide() statusDialog.hide()"
Problem In the above code the background to dialog is disabled until the ManagedBeans code is completed and the dialog also closes but when i click the search button it loads with the previously entered search parameter even on clicking the reset button the data doesn't go.
How do i overcome the above problem of the previously entered data not going or how can i do the Ajaxstatus in a better way to avoid the above problems.
I have a JSF 2.0 web app with ajaxified tabs.
To switch tabs I show one and hide the others (Either with a conditional render="#{x==y}" or with with display:none/block through conditional styleClass`ing.
In either case I get the tabs to show or hide correctly.
The problem is that the values entered in the input boxes are not retained throw a hide/show of a tab (In other words, if you enter some values in tab 1, go to tab 2 and back to tab 1, the values are not retained).
I use this <f:ajax> tag on tab selection (ignited by a hash change event)
<h:form id="processFragment" prependId="false" class="hide">
<h:inputText id="fragment" value="#{fbean.fragment}">
<f:ajax event="change" execute="contentSection" listener="#{fbean.processFragment}"
render="contentSection" />
</h:inputText>
</h:form>
<div>
<h:form id="contentSection">
<ui:insert name="content" />
</h:form>
</div>
Thanks!
The code the display the tab bar and the tab contents:
<ui:define name="content">
<f:view>
<h:panelGroup styleClass="navBar">
<ul>
<ui:repeat value="#{hello.tabList}" var="tab">
<li onclick="window.location='\##{tab.tabHash}'"><h:panelGroup
styleClass="#{hello.chose == tab.tabHash?'activeTab':''}">
<h:outputText value="#{tab.tabName}" />
</h:panelGroup>
</li>
</ui:repeat>
</ul>
</h:panelGroup>
<h:panelGroup id="contentPanels" styleClass="tabContentBar">
<c:forEach items="#{hello.tabList}" var="tab">
<h:panelGroup rendered="#{hello.chose == tab.tabHash}">
<!-- <h:panelGroup styleClass="#{hello.chose == tab.tabHash?'shownTabContents':'hiddenTabContents'}"> -->
<ui:include src="#{tab.tabFile}" />
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</f:view>
</ui:define>
Finally, the contents of the specific tab:
<h:outputText value="TESTING 1" />
<h:panelGroup styleClass="formField">
<h:outputText value="Enter Value:" />
<h:inputText value="#{general.name}" />
</h:panelGroup>
UPDATE
Just noticed that even if I don't hide the tabs and press a button, the value is reset. Investigating...
The values will only be retained if you use a view scoped bean and the desired form is been submitted to the server side during (or right before) tab navigation.
As an alternative, you could render all tabs at once and use only JS/CSS to show/hide tab contents. CSS-hidden inputs will still be submitted to the server side.
When the Save button in the popup(pp1) clicked the projects list gets updated.
But when press the update button in the projects list, the render ID :form1:pp1 is not there error comes when its being rendered. If do render="#all" it works, but its not good.
( error : <f:ajax> contains an unknown id ':form1:pp1')
<h:form id="form1" prependid=false>
<h:panelGroup id="projects">
<ui:repeat var="action" value="#{dadadada}" varStatus="status">
<h:commandButton value="Save">
//gives id not found error
<f:ajax event="click" execute="#form" render=":form1:pp1" listener="#{fsfsfsfsfs}" />
</h:commandButton>
</ui:repeat>
</h:panelGroup> // project panel group
//popup
<h:panelGroup id="pp1">
<div id="popup2" class="popup_block">
//save button in the popup
<div class="popupBody_save2">
<h:commandButton image="resources/images/saveBtn.gif" value="Save">
<f:ajax event="click" execute="#form" render="projects" listener="#{dfsfssfs}" />
</h:commandButton>
</div>
</div>
</h:panelGroup>
</h:form>
The :form1:pp1 won't work since you have prependId="false" on the form. The pp1 won't work since it's then looking for the component in the same scope as <ui:repeat> which is by itself an UINamingContainer component.
Open the JSF page in webbrowser, rightclick and View Source to get the generated HTML. Locate the HTML element which is generated by <h:panelGroup id="pp1">. It should look something like this
<span id="foo:bar:pp1">
You need to use exactly this ID prefixed with : in the render attribute.
<f:ajax render=":foo:bar:pp1">
If there's an autogenerated ID part such as j_id0, then you need to give the parent component in question an fixed ID.
If you use prependId=false your panelGroup's id is pp1 instead of form1:pp1. (Assume there is a typo in your attribute "prependID" instead of "prependid")