I have a list element detail form opening inside a p:dialog. This p:dialog in turn shows another list. From this list, I can open any of its element's details inside a nested p:dialog.
The problem is: every time I open a dialog, a new set of ids for the elements in the nested dialog is generated, with the same value.
What I end up with in my DOM when I try to select a particular id from the nested dialog, such as $('#manageIssue\\:newEventComment');, is an array of elements with the same id.
I have determined there is one copy per each time I open a dialog, plus another one which is there from the beginning.
The nested dialog DOM nodes are not being destroyed when the nested dialog is closed, and a fresh set with overlapping ids is being generated every time a dialog is opened.
This question is related to primefaces update attribute not working on modal dialog opened from modal dialog.
(I solved the original problem by removing the prependId attribute from the form, but this one remained.)
Because this problem is a little difficult to reproduce, I have built a MCVE. All the stuff (backing beans, views, pom.xml, etc.) adds up to ~500 lines of code, so I have shared it on a github repo: https://github.com/elcodedocle/testt
The question here boils down to:
How can I make this MCVE work (i.e. add events with comments to an issue from a list of issues of a commission from a list of commissions), without this line:
https://github.com/elcodedocle/testt/blob/fbfeb7fca474c66c202c92e469ca185c6bf569c2/src/main/webapp/views/widgets/issue_detail_edit.xhtml#L21
?
This problem is caused by nested <p:dialog>.
<p:dialog id="commissionDetail">
...
<p:dialog id="issueDetail">
...
</p:dialog>
</p:dialog>
This is not allowed. The technical reason is, the HTML DOM element representing the dialog is by JavaScript relocated to the very end of <body> in order to ensure best cross browser compatibility as to calculating the z-index and offset. Then, when you ajax-update the dialog, the existing dialog couldn't be found in its original parent element in the DOM, so simply a new one is added to DOM (which then get relocated to end of body again, etc).
You really need to restructure your templates so you ultimately end up like
<p:dialog id="commissionDetail">
...
</p:dialog>
<p:dialog id="issueDetail">
...
</p:dialog>
Related
I am new in JSF, facing a problem while executing GET AJAX request.
I have a icon with a counter (number), once I will do mouse over to the icon it shows a kind of small popup with small list (3 items), kind of same behavior as we have in Social networking sites (Notification icon). Till here All good. Now in my pop up at bottom side, I added a text says "Show more". This should get 3 more items/ notification from the DB via Ajax call and add the response in the popup (without closing the popup), then in total there should be 6 items.
I am not sure how exactly I can achieve this, Please help.
Using <h:outputText value="show more}"> in my xhtml.
In my bean I have a method to getMoreNotification().
Recently I tried with <p:remoteCommand>, but not sure how I can add responce/ data in popup.
Thanks in advance.
Not that difficult
Create a list which is initially populated with 3 items
Create a <p:overlay> with IN that <p:overlay> e.g. a <p:dataList> that shows these list mentioned in 1. Give this component an id, e.g. 'notifications'
When clicking on the 'show more' commandLink, execute the getMoreNotification() via an actionListener and IN that method update the list mentioned in 1. Also make sure you have an update attribute that contains the value of the <p:dataList>.
When I use a normal p:tree like
<p:dialog>
<p:form>
<p:tree value="aGetterMethod" selection="getAndSetMethods"/>
</p:form>
</p:dialog>
And I select a parent node (so all children are also selected), and submit the form so save the changes to the backing bean, everything is fine (all selections are saved)
But when I reopen the dialog and try to unselect one child, it removes every selection made previously in this root. I figured out that the implicit set selections fur the children are not recognized as"selected" and therefore it tries to remove a nonnexistant selection which results in no selection.
Does anyone else fight with this issue?
I just want to get and set the selected nodes correctly when getting and selecting them.
I have a performance issue with my JSF page and can not find an solution. I'm using JSF 2.0.
I click on an element to render another element :
<f:ajax event="click" listener="#{row.select}" render=":dataWrapper"/>
After click the data panel will be rendered. My problem is when I click on the element again. The data panel will be rendered too, but it will takes more time. If I click the third time the rendering needs again more time. And so on ...
What can be the reason for this?
I checked the request with the Firefox debugger and everything looks fine, except the reponse time.
The response time will grow up every request.
Referencing this question because the problem is identical to mine, but I don't think the solution is usable in my situation.
continuation of pressing button twice
I have a workflow with a series of forms that need to be filled out and submitted, and I would like to display a modal overlay after the user clicks the "next" button. In order to show this overlay, I need to make the command button use ajax. This leads to the undesired behavior as described in the linked issue.
The solution for the linked issue seemed to be "don't use Ajax for navigation", but I think in my case I may have to in order to show this waiting dialogue. Is there any other way to guarantee that the view state on the following page will be updated correctly, so that when I continue navigating I do not need to hit the button twice?
I am using Primefaces 3.3.1.
<p:commandButton id="nextCommand" value="Next"
action="#{backingBean.processInputAndDetermineOutcome}"
onclick="waiter.show();" oncomplete="waiter.hide();">
<f:param name="validate" value="true" />
</p:commandButton>
The "validate" param is a flag I am using in a custom BeanValidator so that my "Back" button can submit the form and update the model without processing any of the valdations. I don't think that should have any impact on this question, but I thought I should mention what other pieces are involved in this commandButton.
Your best bet is to navigate with a redirect.
public String processInputAndDetermineOutcome() {
// ...
return outcome + "?faces-redirect=true";
}
Otherwise, for sure if you're actually observing the problem in IE browser only and not in other, more sane, browsers, then you may want to try the PrimeFaces-specific JavaScript fix as proposed here: JSF Language switcher and ajax update.
Or, if you're actually observing the problem in <f:ajax> and not in <p:ajax>, then try the JSF-specific JavaScript fix as proposed here: h:commandButton/h:commandLink does not work on first click, works only on second click.
I want to enable a pair of cascading dropdown lists within a form in an ASP.NET MVC3 / Razor2 application. Ideally the solution will meet the following goals:
Child list populated simply by changing the selection of the parent list
Both dropdown lists contained within the form as they need to post information on submit
Uses Ajax to avoid whole page round-trip
Uses Ajax Html helper for easy integration
Works even if javascript is not enabled
So, from a user point of view, when an item in the parent dropdown is selected, the contents of the child dropdown is refreshed to display items related to it.
Can anyone please suggest the best way to do this?
EDIT.
No takers ... suggests to me that there may be conflicting requirements in the above list of goals. The closest I got to the above was this article, which met all the goals except that it doesn't work nested within an Html form.
So, I will restate the problem in a different way: how can I make an AJAX call from a dropdown list within an Html form so that I can populated another dropdown list with related items?
Took some time to find a reasonable solution to this, although so far I still don't have a no-jquery fallback. This article shows you how to use AjaxHelper extensions to create your own Ajax-enabled controls. Works a treat, and very reusable.