I'm loading StreamedContent into the document viewer like this.
xhtml:
<h:body>
<h:form>
<p:commandButton value="Content A" action="#{viewer.selectContentA()}" update="viewerForm" />
<p:commandButton value="Content B" action="#{viewer.selectContentB()}" update="viewerForm" />
</h:form>
<h:form id="viewerForm">
<pe:documentViewer value="#{viewer.content}" download="demo.pdf" height="500"/>
</h:form>
</h:body>
Bean:
public void selectContentA() {
content = contentA;
}
public void selectContentB() {
content = contentB;
}
public StreamedContent getContent() {
return content;
}
Question:
Is there any way to change the document in the viewer without update the whole component?
using:
function refresh() {
document.getElementById('viewerForm:viewer').contentDocument.location.reload();
}
<p:commandButton value="Load document" ... oncomplete="refresh()" />
instead of
<p:commandButton` value="Load document" ... update="viewerForm:viewer" />
works for me.
Related
I am developing a project with Primefaces 5.1.
In my project, I used p:idleMonitor, on my Start button click the p:idleMonitor rendered="true" is working .
On my Stop button click the p:idleMonitor rendered="false" not working and the p:idleMonitor is still processing.
Sample Code:
index.xhtml
<p:panel id="mainPanelId">
<p:commandButton value="Start" update="mainPanelId" action="{Sample.start}"/>
<p:commandButton value="Stop" update="mainPanelId" action="#{Sample.stop}"/>
<p:idleMonitor timeout="5000" rendered="#{Sample.idleRendered}">
<p:ajax event="idle" oncomplete="PF('dialogId').show();"/>
<p:ajax event="active" oncomplete="PF('dialogId').hide();"/>
</p:idleMonitor>
<p:dialog id="dialogId" widgetVar="dialogId" header="Idle">
<p:outputLabel value="Idle Mode Actived!"/>
</p:dialog>
</p:panel>
Sample.java
class Sample
{
private boolean idleRendered;
public String start()
{
idleRendered = true;
return null;
}
public String stop()
{
idleRendered = false;
return null;
}
}
A few things you should do differently.
Use <h:form>
Use actionListener by p:commandButton and void methods of your bean
XHTML
<h:form>
<p:panel id="mainPanelId">
<p:commandButton value="Start" update="mainPanelId"
actionListener="#{Sample.start}" />
<p:commandButton value="Stop" update="mainPanelId"
actionListener="#{Sample.stop}" />
<h:outputText value="#{Sample.idleRendered}" />
<p:idleMonitor timeout="5000" rendered="#{Sample.idleRendered}">
<p:ajax event="idle" oncomplete="PF('dialogId').show();" />
<p:ajax event="active" oncomplete="PF('dialogId').hide();" />
</p:idleMonitor>
<p:dialog id="dialogId" widgetVar="dialogId" header="Idle">
<p:outputLabel value="Idle Mode Actived!" />
</p:dialog>
</p:panel>
</h:form>
Bean
#Named("Sample")
#SessionScoped
public class Sample implements Serializable {
private boolean idleRendered = true;
public void start() {
idleRendered = true;
}
public void stop() {
idleRendered = false;
}
public boolean isIdleRendered() {
return idleRendered;
}
public void setIdleRendered(boolean idleRendered) {
this.idleRendered = idleRendered;
}
}
Update:
Looks like a bug, here is a workaround:
<p:outputPanel rendered="#{Sample.idleRendered}">
<p:idleMonitor timeout="5000">
<p:ajax event="idle" oncomplete="PF('dialogId').show();" />
<p:ajax event="active" oncomplete="PF('dialogId').hide();" />
</p:idleMonitor>
</p:outputPanel>
I'm trying to set a dialog title at runtime (dynamically) but update with #widgetVar expression cannot do the trick. Any ideas?
The first command button renders the dialog with the dynamic title but the second command fail to render the title! Why? Here the example is simplified but the real page is more complex and it is difficult to specify the id of the dialog to render.
<h:form>
<p:commandButton value="Basic" ajax="true" process="#this"
update=":dlg1" oncomplete="PF('widget-dialog').show();"
actionListener="#{dialogView.changeTitle('Dynamic title')}" />
<p:commandButton value="Widget" ajax="true" process="#this"
update="#widgetVar('widget-dialog')"
oncomplete="PF('widget-dialog-1').show();"
actionListener="#{dialogView.changeTitle('Dynamic title')}" />
</h:form>
<p:dialog id="dlg1" header="#{dialogView.title}"
widgetVar="widget-dialog" dynamic="true">
<h:outputText value="Resistance to PrimeFaces is futile!!!" />
</p:dialog>
#ManagedBean(name = "dialogView")
#ViewScoped
public class DialogView {
private String title = null;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public void changeTitle(String title) {
setTitle(title);
}
}
I have a set of p:accordionPanel's that I wish to update in my JSF 2.2 page.
The first one lists items of the list as tabs, in the tab it shows the name of the list item plus a button to delete that item. Clicking delete correctly removes the item and updates the panel via ajax
When all items have been removed it will render a new accordion panel informing the user there are no items and one needs to be added.
This all works fine, however when a new item is added is should once again render the first accordion panel showing the item with the option to remove it.
I believe the following is Minimal, Complete and Verifiable (if not please let me know why not)
The xHTML
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Forms</title>
</h:head>
<h:body>
<h:form id="mainForm">
<p:outputPanel id="panelContainer">
<p:accordionPanel id="formsPanel" value="#{formController.forms}"
var="formInstance" rendered="#{not empty formController.forms}">
<p:tab title="#{formInstance.name}">
<p:panelGrid columns="3" layout="grid">
<h:outputLabel for="name" value="Form name:" />
<h:outputText id="name" value="#{formInstance.name}" />
<p:commandButton
action="#{formController.deleteForm(formInstance.name)}"
value="Delete form" update=":mainForm:panelContainer" />
</p:panelGrid>
</p:tab>
</p:accordionPanel>
<p:accordionPanel id="addFormPanel"
rendered="#{empty formController.forms}">
<p:tab title="No forms added yet, please add some">
<h:form>
<p:panelGrid columns="3" layout="grid">
<h:outputLabel value="Form name:" />
<p:inputText value="#{formController.form.name}" required="true"
label="text" />
<p:commandButton update=":mainForm:panelContainer"
action="#{formController.createForm}" value="Add form" />
</p:panelGrid>
</h:form>
</p:tab>
</p:accordionPanel>
</p:outputPanel>
</h:form>
</h:body>
</html>
The Form
public class Form implements Serializable
{
private String name;
public Form()
{
}
public Form(String name)
{
this.name = name;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
}
And the FormController
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
#Named
#ViewScoped
public class FormController implements Serializable
{
private static List<Form> forms;
{
forms = new ArrayList<>();
forms.add(new Form("Form 1"));
forms.add(new Form("Form 2"));
}
private Form form = new Form();
public void createForm()
{
forms.add(form);
form = new Form();
}
public void deleteForm(String name)
{
for(int i=0; i < forms.size(); i++)
{
Form form = forms.get(i);
if (form.getName().equals(name))
{
forms.remove(i);
}
}
}
public List<Form> getForms()
{
return forms;
}
public Form getForm()
{
return form;
}
}
I am lost. I researched almost every post about setPropertyListener and I do not know what I'm doing wrong. I have this JSF Page:
<ui:define name="content">
<h:form id="itemSearchForm">
<p:commandButton update=":itemForm"
icon="ui-icon ui-icon-search">
<f:setPropertyActionListener target="#{itemDetailManagedBean.itemId}"
value="test"/>
<f:setPropertyActionListener target="#{itemDetailManagedBean.accountType}"
value="test"/>
</p:commandButton>
<p:dataTable id="itemList"
paginator="true"
var="currentItem"
value="#searchItemManagedBean.searchItems}">
.
.
<p:column headerText="Detail">
<p:commandButton update=":itemForm"
oncomplete="PF('itemDetail').show()"
icon="ui-icon ui-icon-search">
<f:setPropertyActionListener target="#{itemDetailManagedBean.itemId}"
value="test"/>
<f:setPropertyActionListener target="#{itemDetailManagedBean.accountType}"
value="test"/>
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
and itemDetailManagedean:
public class ItemDetailManagedBean implements Serializable{
private String itemId,accountType;
public ItemDetailManagedBean() {
}
public SearchForItemBean getSearchBean() {
return searchBean;
}
public String getItemId() {
return itemId;
}
public String getAccountType() {
return accountType;
}
public void setItemId(String itemId) {
this.itemId = itemId;
}
public void setAccountType(String accountType) {
this.accountType = accountType;
}
}
The problem is, that the first commandButton is working as it should(so it set the properties right). But the second commandButton does not work at all. Both button shows dialog, as they should. I have itemForm on the other part of page.
Got the sollution finally. The problem was actually not in the JSF but in ServiceBean, which had changed the data table content during the loading.
I am not able to update both the output panels after the ajax call of a method in the backing bean.
Code looks like below given sample code
abc.xhtml
<p:outputPanel id="criteriaPanel" rendered="#{myBean.showPanel}">
<h:form id="loginForm">
<ui:include src="login.xhtml" />
<p:commandButton action="#{myBean.login}" value="Login" update="criteriaPanel successPanel" />
</h:form>
</p:outputPanel>
<p:outputPanel id="successPanel" rendered="#{!myBean.showPanel}">
<h:form id="successForm">
<ui:include src="success.xhtml" />
</h:form>
</p:outputPanel>
MyBean.java
public class MyBean {
private boolean showPanel = true;
public void login() {
this.setShowPanel(false);
}
public void setShowPanel(boolean showPanel) {
this.showPanel = showPanel;
}
public boolean isShowPanel() {
return showPanel;
}
}