I have encounter a problem on First toggle inputTextarea editable with Ajax, how to submit typed in value after toggle The UI build on JSF 2 and RichFaces, the backing bean is #ManagedBean /#RequestScoped for now, contain all necessary properties(indicator/reason) and corresponding get/set methods. The app is running on IBM websphere. I was first taken example from here and here.
The myPage.xhtml related section is
<h:form id="myPage">
<td>
<h:selectOneMenu value="#{myPage.indicator}">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
<f:ajax render="reason" />
</h:selectOneMenu>
</td>
<td><h:inputTextarea id="reason" value="#{myPage.reason}" disabled="#{fn:toLowerCase(myPage.indicator) != 'y'}">
</h:inputTextarea>
</td>
<td>
<h:commandButton value="Update" id="update"
action="#{myPage.update}">
</h:commandButton>
</td>
</h:form>
The function here is using selectItem "indicator" to toggle whether inputTextarea "reason" is editable or not. I use <f:ajax> to render, the effect can be seen directly when I toggle on GUI.
When I set "indicator" as Yes, "reason" becomes editable, then I type in some words and click "upload" button(which is a normal post method contain logic to commit form value to database), but the words in "reason" not commit to database.
What I suppose is <f:ajax> set render attribute point to inputTextarea "reason", which means a request already generated when I toggle the selectItem "indicator", but this request hold nothing, because the sequence here is first toggle then available to type in words, the "reason" contain no words at toggle time. And as this inputTextarea "reason" set as ajax render, the normal submit form way trigger by "upload" button also cannot commit its value even I click after type in words. Is this a right guess ?
If this is the right guess, how to solve this issue(e.g how to collect this inputTextarea "reason" value after its become available by ajax toggle) ? Create backing bean listener method with <f:ajax render="reason" listener="...">(and if yes, please show some detail actions I should add for this listener) ? OR any other way(e.g should I go with JavaScript or JQuery to solve) ? If what I did wrong way, please help me to figure out(initial goal is to toggle inputTextarea to editable like ajax effect and then submit the value later typed in).
Maybe this question is a little fuzzy, I want to re-declare it here as: There is an indicator control a related inputTextarea editable or not, but if I just use Ajax render attribute to control this, I cannot use Ajax to retrieve the later typed in words in this inputTextarea, as ajax is acutally a request send from client to server side, when i toggle the indicator to make inputTextarea editable, the request already send out, but no words contained in request at this time, so I stuck here, can not find way to use Ajax to toggle and send later typed in words.
Still welcome if anyone come to an idea with JSF Ajax way.
I fix the issue with using javascript instead of Ajax, the fixed way is a little interesting, as to simulate Ajax effect, need to trigger javascript function in different cases(a combination usage of same javascript function):
1. First, the javascript to toggle "reason" inputTextarea based on indicator, retrieve these DOM elements based on 'formname:element_id', in my question, already show "indicator" as h:selectOneMenu, and "reason" as h:inputTextarea.
<script type="text/javascript">
function handleDisabledOrNot() {
var currVal = document.getElementById('myPage:indicator').value;
if(currVal == "N") {
document.getElementById('myPage:reason').disabled = true;
} else {
document.getElementById('myPage:reason').disabled = false;
}
}</script>
2. Then call this function on indicator with onclick event
<td align="left"><!-- Use onclick event to control whether reason disabled or not -->
<h:selectOneMenu id="indicator" value="#{myPage.indicator}" onclick="handleDisabledOrNot()">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
</h:selectOneMenu></td>
3. Finally check the status when load page or work in the page on reason with onblur / onfocus event, to make sure full-scale detect indicator status in the view, otherwise, it will miss status checking in either way. E.g, when first time load the page, if missing check status with onfocus event, if you move mouse into reason inputTextarea, no matter what indicator is Y or N, it is editable initially, to avoid such case, should use onfocus event to check, and vice versa to use onblur event.
<!-- Use both onblur and onfocus event to detect indicator status full-scale on view -->
<h:inputTextarea id="reason" value="#{myPage.reason}" onblur="handleDisabledOrNot()" onfocus="handleDisabledOrNot()">
</h:inputTextarea></td>
Finally, it shows the same effect as Ajax render way. As the link i quote in my question, I know in JSF, the best solution is using Ajax to work with backing bean, but as I don't know how to implement after Ajax toggle, how to collect data in inputTextArea later typed in, I can not come with solution on Ajax way now. So, still welcome some idea based on Ajax, if not, just show purely javascript way here.
Primefaces (5.2, Mojarra 2.2.13) inside Dialog Framework is not opening a <p:confirm>-MessageBox.
I have delete icons in a datatable as a <p:commandLink> per row inside a Dialog.
I want to have a user confirmation to delete every row.
Following code works as expected in a <p:dialog> but not using Dialog Framework. Dialog Framework blocks the click on the delete icon or in other words: shows the confirm box invisible and answers NO.
<p:dataTable id="idTblMfc" value="#{bnMfcs.rows}" var="ORow" editable="true" ...>
... Columns ...
<p:column>
<p:commandLink styleClass="ui-icon ui-icon-trash" title="#{msg.TXT_DELETE}" actionListener="#{bnMfcs.doDelete(ORow)}" update="idTblMfc">
<p:confirm header="#{msg.TXT_DELETE}" message="#{msg.PRM_DEL_CONT_MARKED}" icon="ui-icon-alert" />
</p:commandLink>
</p:column>
I tried the same with <p:confirmDialog> instead of <p:confirm> with the same result. OK, I found the tiny difference that <p:confirmDialog> doesn't block the delete icon click but also does not appear.
The rest of the dialog and the datatable works as expected even with message boxen shown with showMessageInDialog(...).
Any ideas?
As you can see in the showcase (http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml), you need both p:confirm (where you need confirmation) and p:confirmDialog (which defines how the dialog looks like).
Also make sure that you are in a h:form tag.
Solution found!
The documentation makes not clear that <p:confirmDialog> is mandatory. I had one on my main page and the page using Dialog Framework had not.
I have a simple button,
<h:panelGroup>
<p:commandButton rendered="#{myBean.checkboxSelected}" value="Action" />
</h:panelGroup>
which is set to false and has getters and setters in the bean, that I want to toggle its rendered attribute (or hide/show it) based on whether ANY checkbox inside my p:dataTable is selected. Conversely, if I check one box and uncheck it, I want to be able to hide button as no checkboxes are selected.
My p:dataTable is set up like this.
<p:dataTable id="someID"
selection="#{myBean.mySelectList}"
rowKey="#{myBean.id}">
<p:column selectionMode="multiple" style="text-align:center"/>
....
</p:dataTable>
Any help is appreciated
Short answer: update it when there is more than one item selected.
Longer answer: On each selection, update the number of items server side (or just count the list) and use that value in a 'rendered' attribute of the button (check if > 0, or do that server side and use a boolean) and update the panelgroup on each ajax call or do that from the server as well.
All plain 'logic' when using JSF, nothing special, nothing fancy
I have the following scenario :
Page.xhtml (p:selectCheckBoxMenu id=sb1)
From page.xhtml I call genericDialog.xhtml
genericDialog.xhtml (Composite implementation with p:dialog,etc...)
From genericDialog.xhtml how can I process and update via p:ajax the sb1 component.
Error : javax.faces.FacesException: Cannot find component with identifier "formPessoa:tipoMercado" referenced from "j_idt440:myForm:confirm"
From the left side of image in green color I have my composite p:dialog (genericDialog.xhtml)
From the right side of image I have in red the selectCheckBoxMenu id=sb1 which I need to reload after saving new data from dialog.
thanks a lot stack members.
After a lot of time to me.... I figured out the issue:
<p:commandButton id="confirm" value="#{cc.attrs.labelbotao1}"
oncomplete="#{cc.attrs.oncompletebotao1}" update="myForm:divmessage"
actionListener="#{cc.attrs.actionbeanbotao1}" **ajax="true"**>
<p:ajax update="#{cc.attrs.ajaxupdate1}" process="#{cc.attrs.ajaxprocess1}"
listener="#{cc.attrs.listener1}" />
</p:commandButton>
Two problems:
First I need to reference in the composition genericDialog.xhtml the full path to update the component e.g. myform: sb1
Second the AJAX on p: commandButton has to be false. This way it does not cancel the p: AJAX update and process.
I'd like to hear some other opinions or fixes, etc.
I have a String in my Bean which actually holds a post form. I display this page using outputText:
<h:outputText escape="false" value="#{myBean.stringHtml}" />
The html is being displayed correctly. This page contains a post form, where I want to save some data in by bean where the submit button is pressed.
I want somehow a listener to this button that is contained within the String. Is this possible?
Thank you!