In my app, when a user clicks on some item, I use <p:tabView> inside <p:dialog> to show the details of that item. Based on the item type, some will have extra tabs. It is similar to the following:
<p:dataTable value="#{mrBean.items}" var="item" >
<p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}" update="itemDetails" oncomplete="eventDialog.show();" />
...
</p:schedule>
<p:dialog id="detailsDlg" onHide="detailsTab.select(0);">
<p:tabView effect="fade" widgetVar="detailsTab" id="itemDetails">
<tab title="General details">
...
</tab>
<tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
...
</tab>
</p:tabView>
</p:dialog>
Consider the situation when I click a Book and navigate to the Author tab to view the Author's details. Now, if I close the dialog without switching back to the General details tab and I click some items other than Book (which means they don't have Author tab), my dialog appeared to be still on the invisible Author tab. Even if I try to click on the General tab, it will not render anymore.
UPDATE:
I tried to use the client-side API of <p:tabView> and <p:dialog> and make a call to detailsTab.select(0) in the onHide attribute of <p:dialog>. The situation is a bit better. However, the 1st item, which is not a Book, that I click after I click a Book will experience the same situation as above. From the 2nd item onward, everything is OK again. Are there any ways to make it work right away?
I'd be very grateful if you could show me how I can solve this problem.
I finally found the solution. In the <p:tabView> tag, I tried to have some effect by setting effect="fade". I think the effect might have caused some lag in code execution and thus, I couldn't see the result of the tab switching until the next request.
After I turned off the effect and put detailsTab.select(0); in the oncomplete attribute of my <p:ajax> event, it's working now.
<p:dataTable value="#{mrBean.items}" var="item" >
<p:ajax event="rowSelect" listener="#{mrBean.showItemDetails}"
update="itemDetails" oncomplete="eventDialog.show();detailsTab.select(0);" />
...
</p:schedule>
<p:dialog>
<p:tabView widgetVar="detailsTab" id="itemDetails">
<tab title="General details">
...
</tab>
<tab rendered="#{mrBean.item.type == 'Book'}" title="Author">
...
</tab>
</p:tabView>
</p:dialog>
One thing to note is that when I turned off the effect without putting detailsTab.select(0); in the oncomplete attribute of my <p:ajax> event, this problem still occurred. In other words, the dialog still ended up showing the invisible tab. However, when I clicked on the General tab, the content of this tab was rendered perfectly. The problem obviously happened only when I was using effect. This may be a bug of <p:tabView>.
I think my solution is not very elegant because I had to turn off the effect :P. If you could provide any solutions which can works with effect, I'd be very happy to accept your answer :).
Related
I have a weird problem, which is probably a bug in IE8, but I am seeking for a workaround.
Description of the UI:
I have a form that displays many rows. When the user enter a value in one of the row, it will perform some basic validation and then it will add a "delete" link next to it. (the goal is to delete the entered row).
Description of the problem:
User enter some data
User switch window (go in any other IE tab or even switch to another software, like notepad)
come back to IE, and enter another row
--> The "onchange" event is not fired when the user clicks elsewhere.
This works fine with Chrome or other browsers (the event is fired normally even if we switch window).
Workaround
- before switching to another software, if the user just press tab or click in another cell, the "onchange" event works as expected.
Anybody got a similar problem, or know another method that would do simiar behavior and work in all browsers?
Here is the code:
<rich:column>
<h:inputText id="batchSaid" value="#{currentBatch.batchSaid}" onkeypress="enableValidateitemsButton(this);"
onblur="validateCase(this,'MYVALUE');enableValidateitemsButton(this);">
<a4j:support event="onchange" process="batchAdd" action="#{itemsPageFormImpl.enableValidateBtnDisableActivateBtn(currentBatch, tRowId)}"
reRender="deleteBatchLink, deleteBatchLinkId" ajaxSingle="true"/>
</h:inputText>
</rich:column>
<rich:column id="deleteBatchLinkId">
<div align="right">
<a4j:commandLink id="deleteBatchLink" style="font-weight:bold;" value="Delete" action="#{itemsPageFormImpl.deletBatch}" reRender="batchdataTable"
rendered="#{currentBatch.showBatchRowDelBtn}" ajaxSingle="true">
<f:setPropertyActionListener target="#{itemsPageFormImpl.deleteBatchId}" value="#{currentBatch.batchId}" />
</a4j:commandLink>
</div>
</rich:column>
The problem is with the deleteBatchLink not being displayed.
We finally never found a solution to this. The users uses the workaround.
I have a an a4j:outputPanel that is rendered based on some boolean condition:
<a4j:outputPanel id="someDisplayRegion" rendered="#{doc.ready && someClass.someBooleanMethod}">
// bunch of stuff //
</a4j:outputPanel>
Then on the same .xhtml page, I have a drop-down menu and selecting one of its options should reRender the above region:
<rich:dropDownMenu>
<f:facet name="label">
<a4j:commandLink styleClass="btn-pulldown">
<span><h:outputText value="Export"></h:outputText></span>
<span class="opener"></span>
</a4j:commandLink>
</f:facet>
<rich:menuItem submitMode="none">
<s:link
rendered="#{someOtherBooleanMethod}"
value="#exportDoc"
action="#{runSomething.exportDoc()}"
reRender="someDisplayRegion"
target="downloadfile"
><s:conversationId /></s:link>
</rich:menuItem>
</rich:dropDownMenu>
However, when I click on the menu item from the drop-down menu, it does not go into someClass.someBooleanMethod and thus, does not re-render someDisplayRegion. Am I doing something wrong?
Consider this point of the RichFaces documentation:
As with most Ajax frameworks, you should not attempt to append or
delete elements on a page using RichFaces Ajax, but should instead
replace them. As such, elements that are rendered conditionally should
not be targeted in the render attributes for Ajax controls. For
successful updates, an element with the same identifier as in the
response must exist on the page. If it is necessary to append code to
a page, include a placeholder for it (an empty element).
So add a wrapper around your outputPanel and target the wrapper in the reRender attribute.
<a4j:outputPanel id="wrapper">
<a4j:outputPanel id="someDisplayRegion" rendered="#{doc.ready && someClass.someBooleanMethod}">
// bunch of stuff //
</a4j:outputPanel>
</a4j:outputPanel>
<s:link reRender="wrapper" [...] />
s:link doesn't have reRender attribute, it's only available on RichFaces components.
rich:menuItem and s:link aren't the best of friends. (especially not in earlier version of RichFaces).
Is there a specific reason why you want to use s:link here ?
Putting the action and the reRender on the menuItem itself should work fine.
I don't understand why you think clicking on the menu item should go into someClass.someBooleanMethod and not into runSomething.exportDoc(). At what point are doc.ready and someClass.someBooleanMethod being set to true? You might put a debugging statement in your code that verifies these are being set to true. If they are set to true and your a4j:outputPanel is still not rendering then you have a problem. I use the s:link as you do here and it works, but I remember having to fiddle with it. Make sure the action fired in the s:link returns a String. "actions" have to return strings that can be used for navigation though in my case the page navigates to itself (like yours).
I need you to recommend me a JSF component that can help in the following scenario(I will first paste an image that will help me explain):
This page that you see in the image is a registration page, each of the panels have different fields and gadgets, when the register button is clicked, a new user is saved into the database.
The problem i have is in the show buttons. The buttons on top of each panel when clicked should display one panel and hide the other, but they must not trigger the field validation.
I use field validation by the attribute "validator"(in combination with a backing bean method) that most of JSF input fields have.
Currently everything that you see there is inside one h:form.
-what should i do to display a panel and hide the other without triggering the validation of the panel that is hiding?
-Is there another alternative to the h:commandLink or h:commandButton(they trigger the validation)?
-Putting each panel in a different h:form can do the trick?(Is that permited?)
-What do you think would be the best approach?
Use p:tabView Of primefaces, then put your contents(registration panels) in separate tab, use separate form for both of the tab, it will solve your problem....
e.g.
<p:tabView>
<p:tab title="panel1">
<h:form id="form1" prependId="false">
<h:inputText label="Sample Label"/>
<p:commandButton value="register"/>
</h:form>
</p:tab>
<p:tab title="panel2">
<h:form id="form2" prependId="false">
<h:inputText label="Sample Label"/>
<p:commandButton value="register"/>
</h:form>
</p:tab>
</p:tabView>
-what should i do to display a panel and hide the other without triggering the validation of the panel that is hiding?
Use two h:form
s there another alternative to the h:commandLink or h:commandButton(they trigger the validation)?
to make POST you must only use them
I would have used rich:modalpanel for this purpose
For the panel's toggle, Why don't you use JavaScript?
<h:commandButton value="Show panel 1" onclick="$('#panel1').hide();$('#panel2').show();return false;"/>
The return false will restrict the page from submitting, hence page won't refresh and since no data is posted back to server, validation phase will never execute.
Bottom line : IMHO this can be handled at client side itself.
You are aware of the immediate attribute, allowing to refresh without changing data.
Unfortunately it doesn't remember changes entered, so you might end up in the validation explicitly being done in your action instead of by JSF itself.
Found strange problem, possibly bug.
I have 2 identical web-pages with Richfaces:suggestionbox.
On the first one my suggestionBox is doing well, everything works fine, but on another one i have some problems. SuggestionBox doesn't show my suggestions. In logs i have something like this:
WARNING: No component found to process as 'ajaxSingle' for clientId remains-form:konta-suggest
2010.1.9 12:02:29 org.ajax4jsf.component.AjaxViewRoot processPhase
Any conclusions?
UPD:
<h:inputText value="#{repobean.kont}" id="kont" label="Payer" style="width:230px;"/>
<rich:suggestionbox onobjectchange="printObjectsSelected(#{rich:element('konta-id')}, #{rich:component('konta-suggest')}, 'id');" usingSuggestObjects="true" width="230" var="result" fetchValue="#{result.kont}" suggestionAction="#{kontabean.suggest}" id="konta-suggest" for="kont">
<h:column>
<h:outputText value="#{result.kont}"/>
</h:column>
<h:column>
<h:outputText value="#{result.kontName}"/>
</h:column>
</rich:suggestionbox>
<h:inputHidden id="konta-id" value="#{repobean.kontId}" />
Javascript inside onobjectchange is a function which prints id into konta-id.
The code of jsp on the second page is copy-pasted from the first page.
I know, the question is 5 years old, but we had this same error (with different components)
In our case we have changed the outer ui:repeat to an a4j:repeat.
After that, our components worked as expected.
What you can do, when you encounter Ajax problems, is to add the <a4j:log> component:
<a4j:log popup="false"/>
This will create a box in your page with all the Ajax logs from Richfaces. Eventually, you can set popup="true" and then display the popup by Ctrl + Shift + L
There are many logs in this panel, but generally the important things to look at is the WARN or ERROR messages.
Other concern about your error message: it is talking about some ajaxSingle processing. In your JSF code, you have no ajaxSingle attribute defined. When does this error happens? When you start typing some characters in your inputText component?
Isn't there any conditional rendering (rendered="#{some expression}") around this input and suggestion components? Or an iteration?
Does .suggest() action get invoked before this error?
Situations like you've described happen when an action-related (causing) component is within a conditional render (or an iteration) which does not allow a component to be created on RestoreView phase. Then action is not called at all and component-id is not found in the component tree.
Example: if you have something like this:
<h:panelGroup rendered="#{not empty myBean.valueSetInActionHandler}">
<h:commandLink id="action1" action="#{myBean.callOtherAction" value="appears after action"/>
</h:panelGroup>
<h:commandLink id="action2" action="#{myBean.setValueInActionHandler}" value="display button above"/>
First render - only one, second button is rendered. If setValueInActionHandler sets some value and displays the same page - first button ("appears after action") will get rendered too. But clicking it won't fire a callOtherAction - because on second request, during RestorePhase valueInActionHandler is empty again, so action1 will not be available...
Hope I managed to make myself clear :)
I think a4j taglib is missing on the page.
I'm looking for a way to show/hide an arbitrary RichFaces component. In this case, I have a <rich:dataTable> that contains several rows. Each row needs to have it's own, independent Show/Hide link, such that when you click "Show details", two things happen:
The "Show details" link is re-rendered as "Hide details"
The associated detailsColumns should become visible (starting from a state of rendered="true" but style="display: none;").
I don't want to write my own JavaScript functions if it's not absolutely necessary. I also don't want to have a server-side bean keep track of which detailColumns are being displayed, and subsequently re-render everything over AJAX: this should be purely client-side behavior. I'm not sure how to accomplish that.
The following pseudo-code (hopefully) illustrates my goal:
<rich:column>
Show details
Hide details
</rich:column>
<rich:column>
<h:outputText value="#{thisRow.someData}" />
</rich:column>
<rich:column id="detailsColumn" colspan="2" breakBefore="true">
<h:outputText value="#{thisRow.someMoreData}" />
</rich:column>
To the point, you need to grab the generated HTML element from the DOM in JavaScript and then toggle its CSS display property between block and none. As far as I know, RichFaces doesn't provide out-of-the-box scripts/facilities for this, but it is basically not that hard:
function toggleDetails(link, show) {
var elementId = determineItSomehowBasedOnGenerated(link.id);
document.getElementById(elementId).style.display = (show ? 'block' : 'none');
}
with
<h:outputLink onclick="toggleDetails(this, true); return false;">show</h:outputLink>
<h:outputLink onclick="toggleDetails(this, false); return false;">hide</h:outputLink>