<h:commandLink action="#{bean.action}" onclick="window.open('../note/note.faces', 'popupWindowName', 'dependent=yes, menubar=no, toolbar=no, height=450, width=700');">
In the above code popup is opened before action is completed when click the link.
is it possible to open after action is completed?
Just move the logic to be executed to the target page of the action.
First remove the onclick:
<h:commandLink action="#{bean.action}">
Then extend your Bean as follows:
private boolean executed;
public String action() {
executed = true;
return "targetpage";
}
public boolean isExecuted() {
return executed;
}
And finally display the JS code conditionally based on #{bean.executed}:
<h:panelGroup rendered="#{bean.executed}">
<script type="text/javascript">
window.open('../note/note.faces', 'popupWindowName', 'dependent=yes, menubar=no, toolbar=no, height=450, width=700');
</script>
</h:panelGroup>
Related
Using PF 10, JSF 2.3
I try to open a url in a new tab when the user clicks on "Download report"
xhtml page:
<script type="text/javascript">
//<![CDATA[
function start() {
PF('statusDialog').show();
}
function stop() {
PF('statusDialog').hide();
}
//]]>
</script>
<h:form>
<p:menubar>
<p:menuitem value="Home" action="#{umigonBean.logout}" icon="pi pi-home"/>
<p:menuitem value="Download report" action="#{umigonBean.getReport}" onclick="PrimeFaces.monitorDownload(start);" icon="pi pi-arrow-down" oncomplete="PrimeFaces.monitorDownload(stop);"/>
</p:menubar>
</h:form>
Backing bean (session scoped, if this matters):
public void getReport(){
// report being generated in the form of a Google Slide...
// when it is generated, a redirect is made to the url of this Google Slide:
FacesContext context = FacesContext.getCurrentInstance();
context.getExternalContext().redirect("http://docs.google.com/etc");
}
The solutions suggested by #BalusC for a commandButton are:
<h:form target="_blank">
(does not apply as my form contains different links, and only this one should open a new tab)
onclick="this.form.target='_blank'"
In my code above this would be:
onclick="this.form.target='_blank';PrimeFaces.monitorDownload(start);"
however when I choose this option, the action is not called (the "waiting" window appears and remains for ever).
This can be solved by the point 3 of the answer posted here:
public void submit() {
// ...
PrimeFaces.current().executeScript("window.open('myUrl');");
}
I am using JSF for my webapp (combined with EJB) and Bootsfaces as JavaScript addition to show modal windows. I am having a list of items that are being shown through a dataTable. And by clicking on a command button inside my list I am opening a modal window, asking the user "wether he is sure he wants to delete". That modal confirm dialog has YES and NO. I can execute the yes execute button inside the modal window. But I cant do #{controller.delete(item)} because the item is only server side available while building the list table. Somehow I have to send the actual selected item to the modal window to set it somehow in that controller call...???
Anyone got an idea?
<!-- looping the jsf list //-->
<h:dataTable value="#{controller.itemlist}" var="item"...
...
<!-- showing modal window //-->
<h:commandButton value="delete" action="" onClick="return false;" p:toggle-data.... />
</h:dataTable>
</h:form>
...
<!-- modal window in panel, with item not set //-->
...
<h:commandButton action="#{controller.delete(item)}" />
</h:form>
</b:panel>
...
You could use ajax to populate your modal's content :
$.ajax({
url : "yourPage.jsf",
type : "POST",
data : {
id: "your object's id"
},
dataType : "html"
}).done(function(html) {
$("#yourModal").html(html);
});
This ajax should be called with onclick event on your <h:commandButton>
And of course, you'd need to create a JSF view for your modal content. This view will contain your text and your two buttons "Yes" and "No". "No" should just dismiss your modal, while "Yes" should call your bean action : <h:commandButton action="#{controller.delete(item)}" />.
Don't forget to populate your controller item with the id parameter to bind data to your view.
EDIT :
I'll try to show you an example.
Main View (view.xhtml) :
<h:form>
<h:dataTable value="#{controller.itemlist}" var="item">
<h:column>
...
</h:column>
<h:column>
<h:commandButton value="delete" onclick="return populateModal(#{item.id}); " />
</h:column>
</h:dataTable>
</h:form>
Script to populate your modal (view.xhtml) :
<script type="text/javascript">
function populateModal(id) {
$.ajax({
url: "view2.jsf",
type: "POST",
data: { id: id },
dataType: "html"
}).done(function(html) {
$("#modal").html(html);
$("#modal").show();
});
return false;
}
</script>
Then you need a view for your modal's content (view2.xhtml) :
<h:form>
Delete #{testBean2.item.name} ?
<h:commandButton value="YES" action="#{testBean2.delete(testBean2.item)}" />
<h:commandButton value="NO" onclick="return closeModal();" />
</h:form>
And a controller for this view (testBean2.java) :
private Item item;
#PostConstruct
public void init() {
// GET id parameter from HTTPRequest
// Populate Local Item
}
public void delete(Item item) {
// Delete your item
}
Using Primefaces I pass to a bean the id of the component that the user just clicked. I want the bean to change the style of this component. The relevant part of the bean:
public void passIdClicked() {
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
String idClicked = (String) map.get("idClicked");
UIComponent tile = FindComponent.doFind(context, idClicked);
Iterator<UIComponent> it = tile.getChildren().iterator();
UIComponent comp = it.next();
if (comp.getId().equals(idClicked)) {
HtmlOutputText labelDone = (HtmlOutputText) comp;
labelDone.setValue("heyyyyyyyyy");
labelDone.setStyleClass("myStyleClass");
}
}
The modifications are not appearing on screen. What am I missing?
[EDIT] UI Code:
(additional components get created in the "tiles" panelGroup dynamically in an initialization phase. The passIdClicked method modifies one of these components - the one clicked by the user.)
<h:head>
</h:head>
<h:body>
<h:form id="form">
<h:commandButton actionListener="#{bean.createNewTile()}" title="new" value="new"/>
<p:remoteCommand name="sendNameClicked" actionListener="#{bean.passIdClicked}"/>
</h:form>
<h:panelGroup layout="block" id="tiles">
</h:panelGroup>
<script type="text/javascript">
$(document).ready(function() {
$('.tile').click(function() {
sendNameClicked([{
name: 'idClicked',
value: $(this).attr('id')
}]);
});
});
</script>
</h:body>
#kocko answer is absolutely correct, but since you are using Primefaces you can also do it programmatically:
RequestContext.getCurrentInstance().update(comp.getClientId());
You will have to refresh the component(s), so that the styleClass change takes place.
You can, either:
Refresh the whole page.
For example:
<f:ajax render="#all" />
Or
Refresh a particular component:
For example:
<p:someComponent id="componentId">
....
</p:someComponent>
...
<f:ajax render="componentId" />
I am trying to understand popup menu in richfaces. I am trying to do the following: I have a textbox and a button. I write some text into the textbox, and if the value of the text written is "popup", i want to call the popup menu. Here is the code:
<h:form>
<h:inputText value="#{popupCall.text}"></h:inputText>
<a4j:commandButton action="#{popupCall.showpopup()}" onclick="if (#{popupCall.showpopup()}) #{rich:component('popup')}.show();">
</a4j:commandButton>
</h:form>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;">
X
</h:outputLink>
</f:facet>
</rich:popupPanel>
and the bean:
#ManagedBean (name="popupCall")
#VievScoped
public class PopupCall {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public PopupCall() {
}
public void checkText(){
if(text.equals("popup")){
//CALL POPUP MENU
}
}
public boolean showpopup(){
if(text!=null && text.equals("popup"))
return true;
else
return false;
}
}
If i don't put "if(#{popupCall.showpopup()})" inside the onclick method it always calls when button is pressed but now even though the showpopup()method returns true no popup is shown. Also, inside the showpopup() method, if i just write return true, the if statement inside onclick works but now it does not.
Can anyone help me with this? Thanks
For your case you want to use oncomplete instead of onclick since you want to show <rich:popupPanel> after executing some business logic. When I changed
onclick="if (#{popupCall.showpopup()}) #{rich:component('popup')}.show();"
to
oncomplete="if (#{popupCall.showpopup()}) #{rich:component('popup')}.show();"
The pop up showed up. Also be careful with
action="#{popupCall.showpopup()}"
Remember that action needs String (or null) for navigation but
showpopup() is returning a boolean so you might want to fix that.
I found these links to be helpful check them out (for the first link, I liked the one with the highest vote).
Primefaces onclick and onsuccess differences
EL expression inside p:commandButton onclick does not update/re-render on ajax request?
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.