How to make Primefaces editor (p:editor) to notice when user has changed the text content? - ajax

I would like to make it so that once user edits the value content of p:editor, a save-button next to the editor would be enabled. It is disabled when there's no change on the editor value. It doesn't even need to compare the content on every keystroke to the old content, just editing ANYTHING on it would be enough in my case.
I noticed I can't put <p:ajax event="onchange" /> on it, because p:editor doesn't allow ajax-events. How could I do this?

Related

How to just update "rendered" property in JSF

I've got a list of documents and I need to update all at once.
I did something like this:
<ui:repeat id="r_list" value="#{tareaController.controlador.documentosIndexar}" var="documentos" >
where documentosIndexar is the list of documents. It displays all the documents and its properties fine.
I have two panelGrids, one with the viewer of the document and another one with its information.
At the bottom of the information there's the list of documents.
I need to fill the document's information then select another one without losing the previous one.
I'm trying to update the whole ui:repeat and it renders the next document and its information ok but the information of the previous one is lost.
I also tried doing:
<ui:repeat id="r_list">
<p:panelGrid id="pg_document" rendered="#{tareaController.controlador.documentoSeleccionado.id eq documentos.id}">
<---- Document components here ---->
<p:ajax event="rowSelect" update=":f_tarea:r_list:pg_document" listener="#{tareaController.controlador.reemplazarLista(tareaController.documentoSeleccionado)}"/>
</p:panelGrid>
</ui:repeat>
All my components, and well, my page is inside a form called f_tarea, which is from its template.
When I do the above I update that panelGrid from the list, but just that one, and the variable in the rendered condition changed, so all the panelGrid dissapear.
Basically, what I want to do is update JUST the rendered condition on all the panelGrids inside the ui:repeat, so one hides and another one is shown without losing the previous one's information.
Ok. Excuse me I'm a completly stupid.
I tried doing something I haven't done before: downloading the PrimeFaces manual. On the AjaxBehavior section there's the "process" one which process a component in partial request.
I fixed it just by doing:
<p:ajax event="rowSelect" process=":f_tarea:r_list:pg_documento" update=":f_tarea:pg_doc" listener="#{tareaController.controlador.reemplazarLista(tareaController.documentoSeleccionado)}"/>
I won't delete the question in case that it helps someone in the future.

setting process for command button inside a dialogue gives blank value

Setting process="#this" inside a <p:dialog> will hit the method in managedBean but the submitted values are empty. Setting process="#form" does not hit a method. Setting process="#all" gives null values. Setting a nested form, introducing a form in a dialogue is not advisable. What do I have to specify in the process attribute?
<p:commandButton id="serachInsideDialogue" value="#{msg.AddSystem_searchLabel}" action="#{testBean.edit}" update="growl" process="#this">
<f:setPropertyActionListener target="#{testBean.searchUserId}" value="#{testBean1.searchId}" />
</p:commandButton>
You can try with some functions like that
function null() { document.getElementById("serachInsideDialogue").style.display= ""; }
and then to customize them as you want for every event.
And them to call them in your process when you want like events.
Introducing a form in a dialogue is not advisable
You have been misinformed.
The dialog must not be placed inside any form. Instead, it must be placed outside any form and in turn have its own form. You obviously don't want to process all other inputs inside the same form outside the dialog when intending to submit the inputs in the dialog.
Once you fix that, you can just use process="#form" which is already the default value and can thus safely be omitted altogether.

JSF Validation Error from Component that is not Rendered

I have a form that has a field that needs to be rendered as a read-only value when in edit mode and as a drop-down select list when in create mode.
The read-only field (used in edit mode) is rendered as plain text using <h:outputText>. In create mode, the field is rendered <h:selectOneListbox> that has a required attribute of "true".
It seems to work as I expect most of the time, but occasionally I get a validation error when in edit mode (the select list box is not rendered) .
Here is the code snippet that has both fields defined with their rendered attributes set using the same boolean value (just one field negates the boolean to toggle).
<h:outputLabel id="lblBusinessArea" value="Business Area:" />
<h:panelGroup id="baGroup">
<h:selectOneListbox id="businessAreaList" size="1"
rendered="#{shiftDetailsController.canEditBusinessArea}"
converter="businessAreaConverter"
value="#{shiftDetailsController.selectedBusinessArea}"
label="Business Area"
required="true">
<f:selectItems id="businessAreaListItems" value="#{shiftDetailsController.businessAreas}" />
<a4j:support id="businessAreaA4j" event="onchange"
ajaxSingle="true" reRender="deploymentGroupList, positionPayGroupList, sapPremCodeList" />
</h:selectOneListbox>
<h:outputText id="businessAreaRO"
rendered="#{!shiftDetailsController.canEditBusinessArea}"
value="#{shiftDetailsController.selectedBusinessArea.busAreaDesc}" />
</h:panelGroup>
Below is a screen clipping showing the field (in edit mode) rendered as read only. The "save" button was clicked and I get a validation error message that the field is required.
The value should be there in the backing bean because the value displayed is from the same object (shiftDetailsController.selectedBusinessArea). The output text uses the description field on the business area ojbect and the select field uses the whole object where the SelectItem has the description in the label.
Any idea how this could be occurring? I could set the required attribute using the same boolean value that determines the rendered state...so that it is only required when it is rendered...but since this problem is intermittent...I don't know that will really help.
I also verified that no other components on the page inadvertently have a label value of "Business Area" (which is being used in the validation message) to mislead me in which component truly has a null value; this is the only one that has the label of "Business Area".
I figured out what was happening with this issue.
Prior to submitting the form and receiving the validation error. I was making a change that caused the flag controlling the two components' visibility to be reversed.
rendered="#{shiftDetailsController.canEditBusinessArea}"
In other words, what I was doing on the form was causing the canEditBusinessArea to change values. But, I was not re-rendering the panel group ("baGroup") to cause the UI to reflect the update.
Thus, when my form was submitted the component during the validation phase was seen as being required...triggering the validation to happen. As soon as I added "baGroup" to the reRender of the action that was flipping the edit business area flag, the UI began reflecting the update and the submitted form had the value.

Can you disable multiline on Telerik RadEditor?

Is it possible to make a Telerik RadEditor single-line entry only?
For example, in an ASP TextBox there is the Multiline attribute
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" />
Ah, just figured it out...
It's a bit weird, but there is an attribute for NewLineBr in the RadEditor.
<telerik:RadEditor NewLineBr="false">
Single line editing not possible with the RadEditor. It always uses an iframe element for the content area where the asp:textbox uses a textarea/input. Even if you make the height of the iframe be a single line, when the user presses Enter, they will get a new line. If you need a single line input from Telerik, then you can try using the RadInput control.

RichFaces: Displaying a notification "popup" when AJAX operation succeeded

We are currently developing a B2B web shop based on Java EE 5, JSF, Facelets and RichFaces. The technology has really worked very well so far, but now I am facing a small problem I just can't figure out how to solve:
Products are listed as tables, where every item can be added to the shopping basket by clicking on a small icon at the end of the row. Adding the product is done via AJAX to avoid the full reload of the page. This works without any problems just by using a h:dataTable and an a4j:commandLink to call an action-method which adds the selected product to the basket. Even the re-rendering of the basket total always visible in the side-bar is working properly.
Due to the nature of AJAX, there is no visible indication (except the changing total at the side) that the operation was successful or has been completed at least. Now I want to add a little "popup" box, which is made visible next to the add-icon when the AJAX-operation is completed, stating that the item was added to the basket. This box should automatically go away after a few seconds.
This is what I think should work (the popup_message and popup_content css-classes make the box float above the position where its markup is):
<h:dataTable ....>
...
<h:column>
<a4j:commandLink action="...">
<rich:effect event="oncomplete" targetId="addedMessage"
type="Appear" />
<rich:effect event="oncomplete" targetId="addedMessage"
type="Appear" params="{delay:3.0, duration:1.0}" />
</a4j:commandLink>
<a4j:outputPanel id="addedMessage" styleClass="popup_message"
style="display: none">
<a4j:outputPanel layout="block" styleClass="popup_content">
<h:outputText value="Item added!" />
</a4j:outputPanel>
</a4j:outputPanel>
</h:column>
</h:dataTable>
Unfortunately, it doesn't display the box at all. If I change the event of the "Appear" effect to onclick it works almost as expected. It is immediately shown when the icon is clicked and it dissapears 3 seconds after the AJAX operation was completed. But I don't want it to appear immediately after the click, because it would be wrong to indicate that the item was added to the basket, when in fact the operation hasn't even started yet. This becomes even more important, when I want to indicate some error or want to include some item specific information into the box, which is only available after the item was added.
So any ideas how to do this? And why adding two effects for the same event does not work?
(I've already looked at the effect-example from the RichFaces live demo. The examples do almost work the same, execept that they add the second effect with explicitly stating the for attribute. But even this does not work for me.)
Update: I've tried using the rich:toolTip for this purpose, which actually seems to be quite flexible. But no matter what I do, I can't attach anything to the "oncomplete" (I've also tried just "complete") event of the a4j:commandLink, except one effect... seems there is some bug/undocumented behaviour regarding that event. I've just found this bug report: RF-3427
you can try rich:notify for this
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=notify&skin=blueSky
Have you tried rich:status ? I will not post a piece of code. I think the docs will do just fine.
http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf
Your defining targetId outside the parameters. What you want to do is:
<rich:effect event="oncomplete" type="Appear" params="targetId:'addedMessage',delay:3.0, duration:1.0" />
Try that, and I think it will work.

Resources