I have a Primefaces editor on my page and I want to submit the content to the server when the user focuses on a different component on the page.
<p:editor value="#{}">
<p:ajax />
</p:editor>
This works find for example with p:inputText, but with the editor I get this error:
Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
I also tried adding the onchange attribute to the p:editor and calling a remoteCommand to submit the content, like this:
<p:editor widgetVar="documentation" onchange="submitDocumentation" />
<p:remoteCommand name="submitDocumentation" process="#parent" update="#none" />
That works, but on every single keystroke. I only want to submit the content of the editor when the focus is lost.
Is it possible to use Ajax to submit the content of a Primefaces Editor when focus is lost?
Using Tomcat 7, Mojarra and Primefaces 4.0
You can do it in the next way.
$(document).ready(function() {
//documentation is the editor widgetVar
PF('documentation').jq.find("iframe").contents().find('body').blur(function(){
submitDocumentation();//remoteCommand
});
});
Related
Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...
I am having a problem with my JSF project, where I am using PrimeFaces Mobile. This page has several pm:views
I have a list of radio buttons, which looks like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter"
onchange="submit()"
valueChangeListener="#{bean.elementChanged}">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
</p:selectOneRadio>
My valueChangeListener looks like this:
public void elementChanged(ValueChangeEvent e) {
currentElement = (Element) e.getNewValue();
System.out.println(getCurrentElement().getElementName());
}
The problem is, whenever I click on a radio button element, my page completely reloads to the start view, which has to do with the onchange="submit()". I have also tried f:ajax elements, but this doesn't seems to be working with my radio buttons, because I can't click them when I use this.
Is there a possiblty to just submit my current form or pm:view (without the f:ajax)?
PS: I have also tried exactly this on a single PrimeFaces Mobile page, which completely worked, since the application just consisted of one page.
When using PrimeFaces components, you should be using <p:ajax> instead of <f:ajax>. Just get rid of the onchange="submit()". This indeed invokes a synchronous (non-ajax) form submit which totally explains the page reload. You also need to replace valueChangeListener by <p:ajax listener>. The valueChangeListener is the wrong tool for the job whereby you're merely interested in invoking a JSF action method when the newly selected value is being set.
All in all, the rewrite should look like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
<p:ajax listener="#{bean.elementChanged}" />
</p:selectOneRadio>
Don't forget to remove the ValueChangeEvent argument from the elementChanged() method. In order to access the selected value, just access the currentElement property directly.
See also:
When to use valueChangeListener or f:ajax listener?
I am using JSF 1.2 and Richfaces 3.3.3 , I've tried
<a4j:region>
<t:selectOneMenu id="comp1" value="#{bB.selectedTeam}" style="width: 200px">
<t:selectItems value="#{bB.teams}" var="team" itemLabel="#{team.desc}" itemValue="#{team.code}"/>
<a4j:support event="onchange" reRender="comp2"/>
</t:selectOneMenu>
but didn't work.
comp1 is a Dojo combobox component and it doesn't do anything when onchange event happens.
JSF doesn't keep track of plain HTML. If you want to be able to rerender something it has to be wrapped in a component, like <a4j:outputPanel> and then you have to rerender that component.
it turned out the html object rendered by <t:selectItems> was transformed to a dijit component when page loads, that conversion to dojo in javascript side does that the user won't interact with the object we indicated to do ajax call in the event onchange through
<a4j:support event="onchange" reRender="comp2"/>
so the solution was to use in order to attach the event to the dojo component in javascript browser side.
I need to open a JSF page in a new window by POST on click of a <h:commandButton>. I know I can acheive this using the JavaScript. But I would like to achive this using JSF and not JavaScript.
How can I achieve this? I'm using JSF 2.0.
The only non-JS way is to set target="_blank" in the parent <h:form>.
<h:form target="_blank">
...
<h:commandButton value="Open in new Window" />
</h:form>
This however affects all non-ajax(!) actions which are performed in the very same form. So if you're smart, make the action which shouldn't open in a new window an ajax action. However, ajax is also JavaScript and you mentioned that you don't want to use JS (I hope you don't get shocked once you discover that PrimeFaces is actually full of JavaScript).
If you absolutely need to restrict it to a single action, then you really can't go around asking little help to JavaScript.
<h:form>
...
<h:commandButton value="Open in new Window" onclick="this.form.target='_blank'" />
</h:form>
When you restrict the target only to a single action, maybe you want to get the form in its initial state.
With the oncklick action you set the target of the form to a _blan page.
After the click, the page is opened in a new tab/page (triggers the action event).
At last, the onblur action is triggered and set the form again to its initial state (the rest of the buttons will open in the _self page)
With this code, you can restrict to only a h:commandbutton to open in a new page.
The rest of the buttons will be opened in the self page:
<h:commandButton
onclick="this.form.target='_blank'"
onblur="this.form.target='_self'"
id="listadoRebuts"
action="#{giaquaBusquedaCorte.abrirListadoRebuts}"
value="#{msg.seqVisorbtnRecibos}">
</h:commandButton>
Hi I have a graphicalImage and I want a method in the backingBean to be fired up on clicking on the image.Below is the code snippet that i am using but it is not working. Please help.
<h:graphicImage value="../resources/images/delete_button.png"
onclick="editBean.deleteStudyPlan"
style="float:center;height: 18px; width:20px;"
title="Delete the studyplan"/>
You need to wrap it in a <h:commandLink> or <p:commandLink> and specify the action there.
<h:commandLink action="#{editBean.deleteStudyPlan}">
<h:graphicImage ... />
</h:commandLink>
Alternatively, you can just specify the image as a CSS background image of the command link or button.
The onclick surely isn't a method expression to a JSF backing bean action method. It's a JavaScript function handler. JavaScript is an entirely different language which runs in the webbrowser, working on the HTML code produced by JSF.