pe:ckEditor does not fire change event on paste - primefaces

When I try to paste something to pe:ckEditor, it is not recognizing. My code is recognizing typed text but not pasted text. If I paste some text, the listener is also not getting invoked and report.conclusion value is null.
Simply, the pasted text is not being bound to #{report.conclusion}.
<pe:ckEditor id="editor" width="100%" value="#{report.conclusion}"
toolbar="[['Bold', 'Italic', 'Strike'], ['TextColor'], ['Outdent', 'Indent'], ['NumberedList', 'BulletedList'], ['Center'], ['Table']]">
<p:ajax event="change" update="btnSaveChanges" />
</pe:ckEditor>

Related

Conditionally render template text as bold

For my inbox page, in this page user will be able to see messages, message will have 2 types of state ( Not yet started, In_progress)..
dataTable where user will be able to see all messages will have 3 columns:
Data, title, actions
State of messages comes from services. My task is, to add BOLDED word "NEW" to the title of every message that user hadn't opened yet.
After opening, state will change to "in_progress" and bolded word "NEW" should disapear.
Or there is idea insted of NEW to use some kind of icon.
What I have done so far is :
<p:column headerText="#{msg.title}">
<h:outputText value="#{task.properties.bpm_status=='Not Yet Started'?'New ':''}" />
<h:outputText value="#{task.properties.bpm_description}" />
</p:column>
Problem is, I can't correctly add <b></b> to bold it or to add icon instead.
I've tried to add <b></b> arround 'New' but I get error in that case.
try to use the following style in "style="font-weight:bold"" in h:outputText Tag
<h:outputText value="#{task.properties.bpm_status=='Not Yet Started'?'New ':''}" style="font-weight:bold" />
I tried it and it`s work for me
You can use <ui:fragment> to conditionally render template text.
<ui:fragment rendered="#{task.properties.bpm_status eq 'Not Yet Started'}">
<b>New</b>
</ui:fragment>
Alternatively, apply a style class.
<h:outputText value="New" styleClass="new" rendered="#{task.properties.bpm_status eq 'Not Yet Started'}" />
.new {
font-weight: bold;
}
Using inline styles via style attribute is poor practice as it isn't abstract/reusable.

Primefaces removing uploaded file

I am using the following code to remove the file uploaded using primefaces.
<p:column width="35" headerText="Delete" style="text-align:center">
<h:commandLink ajax="true" update="#form" title="Delete Document"
process="#form" action="#{learningGuaranteeBean.deleteDocument()}"
disabled="#{(learningGuaranteeBean.activeEntry.statusCode ne 3) and (learningGuaranteeBean.activeEntry.statusCode ne null)}">
<f:setPropertyActionListener
target="#{learningGuaranteeBean.selectedDocument}"
value="#{doc}"></f:setPropertyActionListener>
<h:graphicImage value="../images/icons/delete.gif"></h:graphicImage>
</h:commandLink>
</p:column>
But what happens is, when I delete a attached file, the entire jsf page is reloaded, so the data which are entered in the input fields disappear when I remove the attached file. Could anyone assist me to prevent this please?
You seem to be using h:commandLink instead of p:commandLink by mistake. Since h:commandLink doesn't even have the process, update, ajax attributes, this results in a non-AJAX submit, hence the page reload.
Use p:commandLink.
If you need h:commandLink for some reason, then substitute the erroneous attributes for a proper f:ajax tag.

PF - chart selectItem -> dialog

I'm playing with interactive chart by this topic:
enter link description here
Problem is, that I'm not able to show nothing else than Growl component.
The p:dialog hasn't been displayed:
<p:dialog id="dlg" header="TEST"/>
<p:chart type="bar" model="#{chartView.barModel}" widgetVar="chart">
<p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="dlg" />
</p:chart>
I've also tried (instead of update attribute):
onComplete="PF('dlg').show();"
onComplete="PF('#form\\:dlg').show();"
onclick="PF('dlg').show();"
onclick="PF('#form\\:dlg').show();"
How can I show for example dialog box with som sub-chart related to selected item?
To display the dialog box use something like this.
<p:dialog id="basicDialog" widgetVar="dlg" header="TEST" />
then call display the dialog as.
oncomplete="PF('dlg').show();"
No need to update the dialog tag.

Primefaces autocomplete: How to set focus on autocomplete after clicking on commandlink

Scenario: I used component and infront of autcomplete I used one command link with search image.
My purpose is to display cursor in autocomplete after clicking on commandlink.
My code is as follows:
Autocomplete:
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo"
value="#{customerReviewLazyDataModel.customerReviewVO.senderVO}"
completeMethod="#{customerReviewLazyDataModel.searchOrganizations}"
var="senderVO"
itemValue="#{senderVO}" converter="organizationConverterForCustomerReview"
size="60">
commandlink
<p:commandLink oncomplete="setFocus()" ajax="true">
<p:graphicImage value="/app-resources/themes/yob/images/search.png" style="margin-bottom: -4px;"></p:graphicImage>
</p:commandLink>
js function
function setFocus(){
document.getElementById("senderAutocomplete").focus();
}
Is there any solution for this problem?
The ID you are using to get the DOM-element for the input to focus is wrong. First of all you have to consider the id of the form. Additionally the id of the input of a p:autoComplete has a suffix _input. So use this:
document.getElementById("formId:senderAutocomplete_input").focus();
You should also set process="#this" on the commandButton, as you are just using it to focus the autoComplete.
I solved this problem adding a css style class and using jquery (which is included on Primefaces) to set the focus.
<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo" ...
*styleClass="focusme"*
/>
And the commandlink would be like this:
<p:commandLink *oncomplete="$('.focusme').focus()"* ajax="true">

conditionally show Primefaces dialog box

In reference to the query that I have posted
Primefaces Dialog box - show it conditionally. javascript code not working
The problem is that when
<p:outputPanel id="dialogPanel"
rendered="#{not reqSearchHandler.accStatusFlag}">
is not rendered as rendered turns out to be FALSE , then when I click on the commandbutton , its keep on clocking and I am not able to go the next page , it seems that ajax request is never getting completed as oncomplete="dlg3.show()" needs dialog box in the page.As rendered turns out to be false , it never finds dlg3.
<p:commandLink id="addRequest" immediate="true" value="addreq"
oncomplete="dlg3.show()" update="dialogPanel">
<f:setPropertyActionListener
value="#{searchHandler.selectedAccIns}"
target="#{reqSearchHandler.checkAccStatus}" />
</p:commandLink>
Can somebody please help me how to avoid opening dialog box when a particular condition is false. Any Idea?
Is the dlg3 inside of dialogPanel? Why don't you post the complete code?
If so, then just before calling dlg3.show)(), change the rendered condition to true (e.g. by adding action listener) or just move the dialog outside the panel.