h:commandButton action not worked in modalPanel.
I am using t:inputFileUpload component for upload file. In my richModalPanel have one h:commandButton
My requirement : After browse the file, and click upload commandButton, then i want to show the selected file name in inside ModalPanel.
My problem is :
When i click commandbutton in modalPanel, not called commandButton action in bean, and automattically close the modalPanel.
In that action method starting...just i put System.out.println("Uploading process to be start..."); Even this output not print in my tomcat log.
<body>
<h:form id="UploadForm" binding="#{FileUpload.intiForm}">
<a4j:outputPanel id="uploadOutputPanel">
<a4j:commandButton value="ShowModalPanel"
action="#{FileUpload.showUploadPanelAction}"
oncomplete="#{rich:component('uploadImagePanel')}.show()"
reRender="uploadImagePanel,uploadOutputPanel"/>
</a4j:outputPanel>
</h:form>
<rich:modalPanel id="uploadImagePanel" moveable="true" top="150" width="400" autosized="true">
<h:form id="uploadForm" enctype="multipart/form-data" >
<h:panelGrid id="uploadPanelGridId" columns="2">
<t:inputFileUpload id="uploadFile"
value="#{FileUpload.logoImageFile}"
size="54"/>
<h:commandButton id="UploadButton"
value="Upload"
action="#{FileUpload.uploadFileAction}"/>
<h:outputText value="Uploaded File Name : #{FileUpload.fileName}"/>
</h:panelGrid>
</h:form> </rich:modalPanel> </body>
faces-config.xml
<managed-bean>
<managed-bean-name>FileUpload</managed-bean-name>
<managed-bean-class>com.jsf.fileupload.FileUpload</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
FileUpload .java
import javax.faces.component.html.HtmlForm;
import org.apache.myfaces.custom.fileupload.UploadedFile;
public class FileUpload
{
private HtmlForm intiForm;
private String fileName;
private UploadedFile logoImageFile;
public String showUploadPanelAction()
{
System.out.println("Show Upload Panel Action ....."); //This line showing in tomcat log, when i click "ShowModalPanel" button --> a4j:commandButton
return "";
}
public String uploadFileAction()
{
System.out.println("Uploading process to be start...."); //But this line NOT show in my tomcat log, when i click "UploadButton" --> h:commandButton
System.out.println("logoImageFile : " + logoImageFile);
if(logoImageFile != null)
{
fileName = logoImageFile.getName();
}
return "";
}
public HtmlForm getIntiForm(){
System.out.println("Page initializing......"); //This line showing in tomcat log, when the page loading time
return intiForm;
}
public void setIntiForm(HtmlForm intiForm) {
this.intiForm = intiForm;
}
public UploadedFile getLogoImageFile(){
return logoImageFile;
}
public void setLogoImageFile(UploadedFile logoImageFile){
this.logoImageFile = logoImageFile;
}
public String getFileName(){
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
}
Please help me..
Thanks in advance.
Use domElementAttachment="form" to the modal panel
<rich:modalPanel id="uploadImagePanel" moveable="true" top="150" width="400" autosized="true" domElementAttachment="form"> </rich:modalPanel>
Do the other prints show up in your log ?
Have you annotated your FileUpload.java with #Named or #ManagedBean ? And its #{fileUpload.xxx}, not #{FileUpload.xxx}.
And i would also change
<h:commandButton id="UploadButton"
value="Upload"
action="#{FileUpload.uploadFileAction}"/>
with an
<a4j:commandButton id="UploadButton"
value="Upload"
action="#{FileUpload.uploadFileAction}"
reRender="uploadImagePanel,uploadOutputPanel">
I'm not sure if they are related but i'm facing a similar issue when using and h:commandLink inside a form with enctype="multipart/form-data". If I remove this property from the form it works.
Related
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.
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 the following Java code:
#Named
#SessionScoped
public class TestClass implements Serializable {
private String stringValue;
#PostConstruct
private void init() {
initStringValueDefault();
}
public void initStringValue1() {
stringValue = "ABCD";
}
public void initStringValue2() {
stringValue = "EFGH" + '\u001c';
}
public void initStringValueDefault() {
stringValue = "LABEL TEXT";
}
public String getStringValue() {
return stringValue;
}
}
and .xhtml
<h:form id="testForm" prependId="true">
<h:outputText id="stringValueLabel" value="#{testClass.stringValue}" escape="false"/>
<br/>
<h:commandButton value="Set ABCD" actionListener="#{testClass.initStringValue1()}">
<f:ajax execute="#form" render="stringValueLabel"/>
</h:commandButton>
<span style="margin-left: 10px"/>
<h:commandButton value="Set EFGH + \u001c" actionListener="#{testClass.initStringValue2()}">
<f:ajax execute="#form" render="stringValueLabel"/>
</h:commandButton>
<span style="margin-left: 10px"/>
<h:commandButton value="Set default" actionListener="#{testClass.initStringValueDefault()}">
<f:ajax execute="#form" render="stringValueLabel"/>
</h:commandButton>
</h:form>
When I click on the 'Set ABCD' button, update works successfully. But after click on the 'Set EFGH + \u001c' I get errors:
Chrome: 'The page at localhost:8080 says: emptyResponse: An empty response was received from the server.'
Firefox: 'malformedXML: XML Parsing Error: not well-formed'
and the label haven't been updated. And after page reload the label updates to 'EFGH'.
Anybody knows, why due to adding '\u001c' to the variable, update doesn't work after button click?
With escape="true" everything works fine, but I need escape="false".
The problem was solved by treating the variable with method escapeXml11(String input) of org.apache.commons.lang3.StringEscapeUtils:
import static org.apache.commons.lang3.StringEscapeUtils.escapeXml11;
...
public void initStringValue2() {
stringValue = "EFGH" + '\u001c';
stringValue = escapeXml11(stringValue);
}
...
Primefaces 5.0, JSF 2.2, Wildfly 8.1
The following use case:
Click a command button in a view (with some parameters)
The bean method looks something up in the database - if necessary dialog1 is shown. In dialog1 there is a form and a command button.
The command button in dialog1 is clicked, the bean method looks something up in the database.
Dialog1 is closed and dialog2, depending on the result of the bean method, is shown.
bean1.java:
public void buttonClicked() {
Map<String, Object> options = new HashMap<>();
options.put("modal", true);
options.put("widgetVar", "dialog1");
options.put("id", "dlg1");
if(somethingTrue()) {
RequestContext.getCurrentInstance().openDialog("dialog1.xhtml", options, null);
}
}
Everything fine. Dialog1 shows up.
dialog1.xhtml:
<h:body>
<h:form>
<p:commandButton value="Button" actionListener="#{bean2.dialog1ButtonClicked}" />
</h:form>
</h:body>
bean2.java:
public void dialog1ButtonClicked() {
Map<String, Object> options = new HashMap<>();
options.put("modal", true);
options.put("widgetVar", "dialog2");
options.put("id", "dlg2");
if(somethingTrue()) {
RequestContext.getCurrentInstance().openDialog("dialog2.xhtml", options, null);
}
}
dialog2.xhtml:
<h:body>
The operation was successful.
</h:body>
Dialog2 shows up within dialog1!
How can I close dialog1 and show dialog2 NOT within dialog1?
I tried closing dialog1 with Primefaces Dialog Framework before opening dialog2:
RequestContext.getCurrentInstance().closeDialog(null);
RequestContext.getCurrentInstance().openDialog("dialog2.xhtml", options, null);
Dialog2 doesn't show up.
I tried opening dialog2 after the AJAX callback <p:ajax event="dialogReturn" listener="#{bean1.dialogClosed}"/>
Dialog2 doesn't show.
I tried the client side Java Script call: onclick="PF('dialog1').hide()"
Dialog2 still shows up nested into dialog1.
using onHide you can open another dialog like this.
<p:dialog class="userRegisterDialog" header="#{bean.dailogHeader}" modal="true" resizable="false" draggable="false" onHide="PF('dialog2').show();>
</p:dialog>
It also work when close dialog using escape key.
Solution:
Open just one dialog:
RequestContext.getCurrentInstance().openDialog("dialog1.xhtml", options, null);
The dialog flow is controlled by an ajax update of the main panel, where the rendered attribute is bound to a bean property and therefore completely controlled by the bean.
dialog1.xhtml:
<p:dialog class="userRegisterDialog" header="#{bean.dailogHeader}"
modal="true" resizable="false" draggable="false">
<p:ajax event="close" listener="#{bean2.closeRegistration}" update=":update"/>
<p:panel id="update">
<p:panel id="step1" rendered="#{bean.showStep1}">
<h:form>
<p:commandButton class="continueButton" value="Button1" actionListener="#{bean.doStep1}" update=":update"/>
</h:form>
</p:panel>
<p:panel id="step2" rendered="#{bean.showStep2}">
<h:form>
<p:commandButton class="closeButton" value="Button2" actionListener="#{bean.doStep2}" update=":update"/>
</h:form>
</p:panel>
</p:panel>
</p:dialog>
The dialog bean:
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
#ManagedBean
#ViewScoped
public class Bean implements Serializable
{
private boolean showStep1 = true;
private boolean showStep2 = false;
public void doStep1(ActionEvent actionEvent) {
if(doSomething())
{
setShowStep1(false);
setShowStep2(true);
}
}
public void doStep2(ActionEvent actionEvent) {
if(doSomething2())
{
RequestContext.getCurrentInstance().closeDialog(null);
}
}
// Getter and setter ...
}
Another bean for the dialog closing:
#ManagedBean
#RequestScoped
public class Bean2 implements Serializable {
public void closeRegistration() {
FacesContext.getCurrentInstance().getViewRoot().getViewMap().remove("bean");
}
}
The method closeRegistration removes the viewscoped bean. Therefore another call of the the dialog within the same page will start the dialog flow from the beginning.
we can close on dialog in onsuccess or onerror or oncomplete also. Check the image for your reference
I have a page with two text fields and a commandButton, in one of the text field onBlur i'm calling onBlur() method in the bean and in the commandButton i'm calling onClick() method in the bean, every thing works fine except when i click the commandButton if the focus is on the text box with onBlur then only the onBlur method been called not both. I've attached the xhtml file and bean.
XHTML Code
<h:inputText id="service" value="#{onBlurTestBean.service}">
<a4j:support status="test" event="onblur"
action="#{onBlurTestBean.onBlur}" reRender="category" />
</h:inputText>
<a4j:htmlCommandLink id="submit" action="#{onBlurTestBean.onClick}"
ajaxSingle="true" value="Click!" />
Bean
public class OnBlurTestBean {
private String service;
private String category;
public void initialize(){
}
public void onBlur(){
log("onBlur");
try{
Thread.sleep(1000);
}catch(Exception e){
}
}
public void onClick(){
log("OnClick");
}
public void log(String msg){
System.out.println(msg);
}
}
The specified example in question works OK (both methods are invoked onBlur and onClick).
In you case it seems you have a4j:status component which blocks user clicks (for example covers the layout with invisible div).
To verify my assumption, try the following (status attribute removed, a4j:region added):
<a4j:region>
<h:inputText id="service" value="#{onBlurTestBean.service}">
<a4j:support event="onblur"
action="#{onBlurTestBean.onBlur}" reRender="category" />
</h:inputText>
</a4j:region>
<a4j:htmlCommandLink id="submit" action="#{onBlurTestBean.onClick}"
ajaxSingle="true" value="Click!" />