I need to do a double click on a p:inputText inside a p:dataTable so that it will bring me to another page and launch the details. Is it possible to call backing bean method from Primefaces p:inputText ondblclick?
p:inputText is a normal input in the end, you can use jQuery to register ondblclick on it, then you can call a p:remoteCommand to reach your bean.
I assume you would have multiple inpuText since you have a dataTable.
xhtml
<p:dataTable var="car" value="#{bean.cars}">
<p:column headerText="Model">
<p:inputText value="#{car.model}" styleClass="dbClickInput" />
</p:column>
</p:dataTable>
<p:remoteCommand name="callDetailsCommand"
actionListener="#{bean.callDetails()}" />
<script>
$(document).ready(function() {
$('.dbClickInput').dblclick(
function() {
callDetailsCommand([{name: 'carModelValue', value: $(this).val()}]);
}
);
});
</script>
Bean
public void callDetails() {
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
String carModelValue = (String) map.get("carModelValue");
}
Hope this helps.
Related
I want to show or hide a primefaces datatables by clicking on their command button, I have a java bean and I can call the java function dashboardView.displayOrHide(). I don't know how to make this happen.
I want to show or hide the datatable, maybe collapse it or not by clicking a button, and save the state of the datatable in the java bean
My version of Primefaces is 6.0.15.
My JSF/xhtml code :
<p:commandButton value="Show Or Hide" id="ajax" action="#{dashboardView.displayOrHide}" style="margin-right:20px;" styleClass="ui-priority-primary" />
<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}">
<p:column headerText="Famille">
<h:outputText value="#{synopticIdBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticIdBean.brNumber}"/>
</p:column>
</p:dataTable>
My Java code, but I don't know what to do here :
public void buttonAction() {
System.out.println("test ash retor ana");
}
For the moment I use a javascript function with a button
And hide or show my datatable with the displayTabInformation js function :
function displayTabInformation(id,dataTableId){
var divDisplay = dataTableId.style.display;
if(divDisplay === ''){
dataTableId.style.setProperty('display', 'none');
}else if(divDisplay === 'none'){
dataTableId.style.setProperty('display', 'block');
}else{
if(divDisplay === 'visible'){
dataTableId.style.setProperty('display', 'none');
}else{
if(divDisplay === 'block'){
dataTableId.style.setProperty('display', 'none');
}
}
}
}
I would like to make the same function with the java bean for saving which database is show or hide.
I have added a command button that call a function from a java managed bean. I have a boolean flag that is used in the "rendered" of the datatable which is set to true or false in the showOrHideLocation function.
I don't know how to refresh my JSF page from my Java managed bean
<p:commandButton value="#{synopticLocationBean.name}" update="item_#{synopticLocationBean.id}" action="#{dashboardView.dashboardService.showOrHideLocation(synopticLocationBean.id)}" styleClass="ui-priority-primary" ajax="true" />
<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}"
sortBy="#{synopticIdBean.longEnteredTime}" sortOrder="ascending"
rowStyleClass="#{synopticIdBean.alarm eq true ? 'old' : null}"
rendered="#{synopticLocationBean.collapseDataTable eq true}">
<p:column headerText="Famille">
<h:outputText value="#{synopticIdBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticIdBean.brNumber}"/>
</p:column>
My Java showOrHideLocation function :
public void showOrHideLocation(String id) {
SynopticLocationBean synopticLocationBean = getLocation(id);
boolean isCollapsed = synopticLocationBean .getCollapseDataTable();
location.setCollapseDataTable(!isCollapsed);
//TODO How can i refresh my JSF page with my java bean ?
}
I show a Primefaces Dialog using the dialog framework, in this way:
RequestContext.getCurrentInstance().openDialog("myDialog", options, params);
In the page myDialog.xhtml I have a message and two buttons: YES or NO.
I would like to close the Pf dialog with the event "onclick", is there a way the to do this?
I cannot statically define the dialog using p:dialog and than close it using PF('widgetVarName').hide();
Generally, you may want something like this:
<p:commandButton action="#{someBean.closeDialog('yes')}" process="#form" update="#form"
icon="#{icons.yes}" value="#{bundle.yes}" />
<p:commandButton action="#{someBean.closeDialog('no')}" process="#form" update="#form"
icon="#{icons.no}" value="#{bundle.no}" />
public void closeDialog(String choice)
{
RequestContext requestContext = RequestContext.getCurrentInstance();
Object someData = executeChoice(choice);
requestContext.closeDialog(someData);
}
Otherwise, if you really need to close the dialog on onclick (sounds a little strange...) you may use:
<p:remoteCommand name="closeDialog" action="#{someBean.closeDialog}" process="#this" />
<p:commandButton type="button" onclick="closeDialog()" icon="#{icons.close}"
value="#{bundle.close}" />
public void closeDialog()
{
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.closeDialog(null);
}
Finally, if you need a pure javascript solution, you may want:
<p:commandButton type="button"
onclick="PrimeFaces.closeDialog({pfdlgcid:'#{param.pfdlgcid}'})"
icon="#{icons.close}" value="#{bundle.close}" />
I have a xhtml page with several dialogs declared within it
<ui:include src="/pages/dialogs/dialog1.xhtml"></ui:include>
<ui:include src="/pages/dialogs/dialog2.xhtml"></ui:include>
...
Dialogs are dynamic="true" and each dialog has ajaxExceptionHandler
<p:ajaxExceptionHandler update="exceptionDialog" onexception="PF('exceptionDialog').show();" />
<p:dialog widgetVar="exceptionDialog" id="exceptionDialog">...</p:dialog>
When some dialog opens and exception occures after some action nothing happens. ExceptionDialog is not shown.
The problem is that <p:ajaxExceptionHandler> created after dialog is included <ui:include> in the page and it is too early. You need it to be created when dialog shows up so you nead to create it dinamicly in managed bean.
In each dialog do this
Delete <p:ajaxExceptionHandler> tag.
And add
...
<h:panelGroup id="ajaxExceptionHandlerPlaceholder">
</h:panelGroup>
<p:outputLabel id="exceptionMessage" value="#{pfExceptionHandler.message}" style="color: red" />
<script>
createAjaxExceptionHandlerCommand();
</script>
</p:dialog>
In managed bean add this method
public void createAjaxExceptionHandler() {
AjaxExceptionHandler aeh = new AjaxExceptionHandler();
aeh.setType( null );
aeh.setUpdate( "exceptionMessage" );
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot root = context.getViewRoot();
final UIComponent[] found = new UIComponent[1];
root.visitTree( new FullVisitContext( context ), new VisitCallback() {
#Override
public VisitResult visit( VisitContext context, UIComponent component ) {
if ( component.getId().equals( "ajaxExceptionHandlerPlaceholder" ) ) {
found[0] = component;
return VisitResult.COMPLETE;
}
return VisitResult.ACCEPT;
}
} );
found[0].getChildren().add( aeh );
}
I have some problem to pass a entire bean in a dialog.
I would like to open a dialog with Dialog Framework in Primefaces, and pass the method and attributes content in bean.
I tried to make this code, but it don't work.How should I do?
<p:commandButton value="open dialog" ajax="true"
actionListener="#{processController.openSelectFieldDialog}"
update="tableResult , :notificationForm:info-messages">
<f:attribute name="controller" value="#{processController}" />
</p:commandButton>
This is the code inside openSelectFieldDialog method:
public void openSelectFieldDialog(){
RequestContext.getCurrentInstance().openDialog("genericSelectFieldDialog");
}
And this is the code inside the dialog controller:
public void onload() {
Object somethingBean= FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("controller");
}
I understand that i pass parameters on openDialog method, but i don't find any example on primefaces site. Can you help me?
Thanks
I want to get the value of the input Textarea and show it in the same page by clicking on the command button "compiler "
however i don't get any result ! and the contnet is only shown when I update with the browser updater
Sh How do I upate the page and the managed beans to show the content of a primefaces textarea in the same page
this is the code:
<p:layoutUnit position="west" size="520" header="Code à executer" resizable="true" >
<h:form id="moncode">
<p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" />
<p:commandButton value="compiler" id="btn3" action="guest.xhtml" styleClass="myButtonClass" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="550" header="Resultat d'execution" resizable="true" >
<h:outputText value="#{fichier.code}" />
</p:layoutUnit>
<p:layoutUnit position="south" >
my application is about compiling a given code: I write a code and then I executed with the button "compiler" so a file will be created however the file is always created with "null" and I think because the var "code" is not yet set in the managed bean that why I want to update the page so the managed bean ill be set here is compile:
`
private String code;
private String error;
public String getCode() {
return code;
}
public String getError() {
return error;
}
public void setCode(String code) {
this.code = code;
}
public void compile() throws IOException {
File file = new File("C:\\Users\\Rad1\\test.c");
PrintWriter ecrivain;
ecrivain = new PrintWriter(new BufferedWriter (new FileWriter(file)));
ecrivain.println(code);
ecrivain.close();
`
There are two ways to achieve what you want: either by using a synchronous submit of a form with a subsequesnt postback, or by sending an AJAX request to partially update necessary parts of the page.
Synchronous submit
<p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" />
<p:commandButton value="compiler" id="btn3" action="#{fichier.action}" styleClass="myButtonClass" ajax="false" />
<h:outputText id="upd" value="#{fichier.code}" />
with action method
public String action() {
//do business job
return null;
}
This way a fields will be refreshed by making a postback. Don't forget that the bean Fichier must be view scoped. Note the ajax="false" attribute of <p:commandButton>.
AJAX call
<p:inputTextarea id="mycode" value="#{fichier.code}" rows="17" cols="50" />
<p:commandButton value="compiler" id="btn3" action="#{fichier.action}" styleClass="myButtonClass" update="upd" />
<h:outputText id="upd" value="#{fichier.code}" />
with the same action method
public String action() {
//do business job
return null;
}
This way only the contents of <h:outputText> will be updated after AJAX call is finished. Don't forget that the bean Fichier should also be view scoped. Note that id attribute of <h:outputText> must be specified.
Actually, you don't call the action itself. Your action forwards to a certain page. There is no race condition or syncronization problems in a JSF action betwwen setting the properties and the action itself. I recommend you to read JSF life cycles tutorial by BalusC Aplly request values phase run before the action.
Try to call action on command Button.
<p:commandButton value="compiler" id="btn3" action="#{fichier.compile}" update="outputCode" styleClass="myButtonClass" />
Add an id attribute to your output panel and specify it in the action button.
<p:layoutUnit id="outputCode" position="east" size="550" header="Resultat d'execution" resizable="true" >
<h:outputText value="#{fichier.code}" />
</p:layoutUnit>
P.S. It is also good to read this BalusC answer for better understanding of actions, Ajax/non Ajax request etc.