I'm implementing some kind of frontend editor in my web page, using rich:editor. When clicking a link, the editor should open, and after saving editor's content, the editor should close again. I'm having trouble with onsave event for closing the editor. Here is my code.
This is the link that opens the editor, due to setting the property bean.show to true. It works ok:
<h:commandLink>
...
<f:setPropertyActionListener value="true" target="#{bean.show}" />
</h:commandLink>
This is the editor itself, only rendered when show evaluates to true:
<h:form>
<rich:editor value="..." onsave="showEditor(false)" rendered="#{bean.show}" />
</h:form>
The onsave event should close the editor by setting the show property to false again, but the editor stays open, because showEditor() is not called:
<a4j:jsFunction name="showEditor">
<a4j:param name="param1" assignTo="#{bean.show}" />
</a4j:jsFunction>
Am I doing something completely wrong? Or do you have any other ideas how to realize this? Any help is appreciated.
just double-checked: in version richfaces 4.x, there is no onsave attribute at all, but
oninit
onblur
onfocus
ondirty
onchange
like pointed out in the org.richfaces.component.UIEditor class. The same is true, if you want to use f:ajax to ajaxify the editor.
Right now, the "save"-icon in the editor just sends a form.submit() or something. So either try to add your jsFunction on that event or to introduce an own save-button.
Edit: Richfaces 4 uses the javascript based CKEditor, so if you want to overwrite their "save"-button, this forum entry regarding CKEditor's save implementation might be of your help.
Also a valueChangeListener might be a possibility solution to trigger your Bean.setShow(boolean show) property.
xhtml:
<rich:editor value="#{bean.editorValue}"
valueChangeListener="#{bean.valueChanged}" />
method in managed bean:
public void valueChanged(ValueChangeEvent e) {
// do the code to close the window here
}
The valueChangeListener also works in Richfaces 4.3, but maybe starting within the javascript of the CKEditor is the better choice.
Hope, that helps... L.
Related
I got a simple login form. I am using <p:ajax> to invoke a <p:blockUI> (see this question).
<h:commandButton id="anmeldung_button"
action="#{benutzerAnmeldung.anmelden}" value="Anmelden"
styleClass="btn btn-info btn-sm">
<p:ajax process="#form" update="#form"/>
</h:commandButton>
<p:blockUI id="block" block=":anmeldung" trigger="anmeldung_button" />
I am using <o:highlight /> to highlight invalid inputs. This works fine.
It is working with a <f:ajax> perfectly, too.
Apperently, it is not working with <p:ajax>.
How can I achieve this?
This is caused by <p:ajax> trying to refocus the active element after executing the oncomplete scripts via doEval() (as can be seen in handleReFocus() function in core.ajax.js script. However, when you submit the form by clicking the command button instead of pressing Enter while inside the input, then that active element becomes the command button itself, not the input text. You can confirm this by just using Enter key to submit the form. You'll see that the focus is done right.
There are in your particular case 2 ways to workaround this:
Make use of PrimeFaces' own autofocus facility via <p:focus> which is placed inside the form as below:
<h:form id="anmeldung">
<p:focus context="anmeldung" />
...
</h:form>
It also automatically takes into account invalidated input fields.
Set PrimeFaces.customFocus to true in JavaScript, so that handleReFocus() function won't do its job.
<script>PrimeFaces.customFocus = true;</script>
I am using Primefaces 5.1 and I have a dashboard where I can drop components onto it.
But, when I drop a component on I want a different component to be rendered.
Here is my dashboard, and the panel component that is cloned and dropped onto the dashboard.
<p:dashboard id="board" model="#{dashboardBean.model}" binding="#{dashboardBean.dashboard}">
<p:ajax event="reorder" listener="#{dashboardBean.handleReorder}" update="msgs" />
</p:dashboard>
<p:panel id="draggable">
<h:outputLabel value="Drag Panel Into Dashboard"></h:outputLabel>
</p:panel>
<p:draggable for="draggable" helper="clone" dashboard="board"/>
Now I can trigger a capture the 'reorder' event and change the 'model' to replace it with the correct component on the java side. But the Dashboard does not get re-rendered at this point.
I can add a command button to trigger the re-render...
<h:commandButton value="Refresh" action="#{dashboardManagedBean.refreshChart}"/>
But I want this to happen automatically.
Can anyone offer some advice please.
(comment promoted to answer)
What if you referesh the component from handleReorder() using this RequestContext.getCurrentInstance().update("foo:bar")?
In doc it doesn't have a property render and i did a smoke test by having other components wrapping around p:ajax (Exception: but event attribute is unavailable) am i missing something here?
<p:ajax event="rowSelectCheckbox" listerner="somemethod()" update="someId"/>
Just omit the event totally:
<p:ajax listener="..." update="..."/>
It defaults to event="valueChange" and process="#this", which is often what one want.
If it does'nt work as expected check the Primefaces user guide, find your component and look for "Ajax behavior events" or look for attributes beginning with "on...".
About h:outputLink: its not a Primefaces tag so it should have been f:ajax for this one. However it does'nt work because of this.
Read more in this answer.
rowSelectCheckbox will be use with SelectEvent.
xhtml
<p:ajax event="rowSelectCheckbox" listerner="#{bean.selectCheckbox}" update="someId"/>
managedbean
public void selectCheckbox(SelectEvent event){
}
I have this piece of code for render a popup, using f:ajax:
<h:commandButton id ="botonAcceso"
value="#{msg['login.enter']}"
styleClass="botonPeque"
action="#{usuarioAuditoriaLogBean.entraAplicacion}">
<f:ajax disabled="true"
render=":login:errorAcceso"/>
</h:commandButton>
<h:panelGroup rendered="#{usuarioAuditoriaLogBean.popup}" id="errorAcceso">
<ui:fragment>
<script>window.open('#{usuarioAuditoriaLogBean.url}');</script>
</ui:fragment>
</h:panelGroup>
I want the person, who is trying to log, must first close the popup if the logging process fails, to try to log again. How can I do that?
Many thanks.
INMO you should not use widnow.open in this scenario... cause you have no control over it after its being opened , instead
1) You can use a third party JSF Components Library like Primefaces , they got Modal Dialog
2)You can use jQuery Modal Dialog , here an example
I have a form inside a dialog which I close by clicking on commandbutton with ajax ,
like this
<h:commandButton value="Add" action="#{myBean.addSomething(false)}"
id="add_something_id" >
<f:ajax render="#form someTable" execute="#form"
onevent="closeAddNewSomethingDialogIfSucceeded"></f:ajax>
</h:commandButton>
and here is the js code for closing the dialog
function closeAddNewSomethingDialogIfSucceeded(data) {
if(data.status === 'success') {
$("#dialog_id").dialog("close");
}
}
No problems till here...
Now I changed some of the dialog form fields into required="true" and now I want to prevent the closing of the dialog of i got validation errors...
But the ajax data.status still reaches its success state , and I can't figure out what indication of validation failure I can hook on...
any ideas?
Thanks to BalusC answer I did the following:
in JSF , added :
<h:panelGroup id="global_flag_validation_failed_render">
<h:outputText id="global_flag_validation_failed" value="true"
rendered="#{facesContext.validationFailed}"/>
</h:panelGroup>
the f:ajax was changed into
<f:ajax render="#form someTable global_flag_validation_failed_render"
and in js added the following check
if(data.status === 'success') {
if($("#global_flag_validation_failed").length === 0){
$("#dialog_id").dialog("close");
}
}
Not specifically for required="true", but you can check by #{facesContext.validationFailed} if validation has failed in general. If you combine this with checking if the button in question is pressed by #{not empty param[buttonClientId]}, then you can put it together in the rendered attribute of the <h:outputScript> as follows:
<h:commandButton id="add_something_id" binding="#{add}" value="Add" action="#{myBean.addSomething(false)}">
<f:ajax execute="#form" render="#form someTable" />
</h:commandButton>
<h:outputScript rendered="#{not empty param[add.clientId] and not facesContext.validationFailed}">
$("#dialog_id").dialog("close");
</h:outputScript>
(note that you need to make sure that the script is also re-rendered by f:ajax)
A bit hacky, but it's not possible to handle it in the onevent function as the standard JSF implementation doesn't provide any information about the validation status in the ajax response.
If you happen to use RichFaces, then you could just use EL in the oncomplete attribute of the <a4j:xxx> command button/link. They are namely evaluated on a per-request basis instead of on a per-view basis as in standard JSF and PrimeFaces:
<a4j:commandButton ... oncomplete="if (#{!facesContext.validationFailed}) $('#dialog_id').dialog('close')" />
Or if you happen to use PrimeFaces, then you could take advantage of the fact that PrimeFaces extends the ajax response with an additional args.validationFailed attribute which is injected straight in the JavaScript scope of the oncomplete attribute:
<p:commandButton ... oncomplete="if (args && !args.validationFailed) $('#dialog_id').dialog('close')" />
(note that & is been used instead of &, because & is a special character in XML/XHTML)
Or you could use the PrimeFaces' RequestContext API in the bean's action method to programmatically execute JavaScript in the rendered view.
RequestContext.getCurrentInstance().execute("$('#dialog_id').dialog('close')");
No conditional checks are necessary as the bean's action method won't be invoked anyway when the validation has failed.
Two things
1) Checking for an error in the 'onevent' function
Surely you have a message tag for the mandatory field?
<h:message id="m-my-field-id" for="my-field-id" errorClass="error-class"/>
So you can check for the error-class something like
var message = $('#m-my-field-id');
if(message.hasClass('error-class'){
//do this
}
else{
//do that
}
2) The DOM isn't up to date on success
Yes, I can see the message on the page in Firefox, yet jQuery tells me it is not there.
I have found that using the smallest possible timeout is sufficient to fix this
setTimeout(
function(){
setErrorStyle(source.attr('id'));
},
1
);
I think you should take a look at PrimeFaces' RequestContext. This would help you trigger client-side code on the server side.
#BalusC
in your example code the clientId of the button is not set as a param because it is a AJAX request. So
not empty param[add.clientId] is always false.
But this works:
param['javax.faces.source'] eq add.clientId
(tested with jsf-impl-2.2.12.redhat-1)
regards