I have a dataTable with a column named DELETE (it is a link) which has an listener . When I click it the first time (click 1) it deletes the row (as expected), but when I try it with another row after that nothing happened (click 2). In fact wherever I click next nothing happen. I should click another time (click 3) to get it work. I don't want that.
Attention: The "delete()" method in my_user is not reached after "click 2".
Here is the code for the column:
<h:column>
<f:facet name="header">#{lng.del}</f:facet>
<h:form>
<h:commandLink action="#">
<f:ajax event="click" listener="#{my_user.delete}" render="#all" />
<h:graphicImage name="delete.png" library="images" styleClass="tableIcon" />
</h:commandLink>
</h:form>
</h:column>
You've multiple forms inside the table. When you re-render another form from inside a form by ajax, then its view state will get lost and hence the 1st click will fail. This click however takes care that the form gets the view state back, so the 2nd click works.
Technically you need to re-render only the content of the other form, but this isn't possible in this particular use case. Better put the <h:form> outside the <h:dataTable> so that you have a single form with a shared view state.
<h:form>
<h:dataTable>
...
</h:dataTable>
</h:form>
If your page contains another forms as well, I'd suggest to render only the current form instead of all, otherwise any actions on those forms will fail as well.
<f:ajax event="click" listener="#{my_user.delete}" render="#form" />
Related
I am using jsf 2. One part of my code is this:
<h:panelGrid id="jobDetail" columns="3" cellpadding="7">
<p:outputLabel value="#{msg['content.jobList.JobName']}" />
<p:inputText id="jobName" styleClass="BIC_search_textbox" value="#{timerConfigurationBean.selectedTimerConfigurationJob.jobName}" required="true" requiredMessage="#{msg['content.jobNew.requiredfield.errormsg']}"/>
<p:message for="jobName" styleClass="error"/>
</h:panelGrid>
<p:commandButton id="update" value="Update_Button" action="#{timerConfigurationBean.updateExportJob}" styleClass="bottomButtonsAfterFirst" update="jobDetail" oncomplete="PF('updatejobpopup').show()"/>
This is only a section of the code. What happens is that when I click on the command button "Update_Button" one of the following two things happen:
1) I enter a value in inputText "jobName" and click the command button. First the function in action="#{timerConfigurationBean.updateExportJob}" runs and then the oncomplete="PF('updatejobpopup').show()" runs. This is how it was intended to be so that is okay.
2) I don't enter anything in inputtext (it is a required field), then click on the commandbutton. I see an error message on the webpage next to the Inputtext field (this happens because I have update="jobDetail" in my commandButton) and action="#{timerConfigurationBean.updateExportJob}" is not run however the oncomplete="PF('updatejobpopup').show()" still runs. This is a problem.
I want the oncomplete to only run when there are no errors on the page just like the function in action="#{timerConfigurationBean.updateExportJob}".
Can someone please help.
You can use the callback of primefaces to give a feedback to the view.
So, in your action method yo can do:
context.addCallbackParam("ok", true);
And in the onComplete:
oncomplete ="if ( args.ok ) { PF('updatejobpopup').show(); }"
I have a JSF 2 application that has two pages, one to list students and one to show details of a given student. The listing page has a link to the details page in each row of the students table, that opens a new tab in browser to show those details, when clicked.
Now the requirements changed to no more show details in a new tab, but in a modal dialog in the listing page.
My idea is to simply embed the details page content in the modal dialog so the listing page will not get too big and hard to maintain. Here start my doubts. After some research I changed the link in each row of the listing to the following button:
<p:commandButton value="Details" type="button"
onclick="PF('dialog-details').show()">
</p:commandButton>
The dialog is declared as follows:
<p:dialog widgetVar="dialog-details" header="Details" modal="true" width="95%">
<ui:include src="student_details.xhtml">
<ui:param name="id" value="#{student.id}"/>
</ui:include>
</p:dialog>
Finally, the details page was changed to be something like this:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:metadata>
<f:viewParam name="id" value="#{studentBean.id}" />
</f:metadata>
<h1 class="title ui-widget-header ui-corner-all">Details of #{studentBean.bean.name} / #{studentBean.bean.number}</h1>
</ui:composition>
When I click the button, the dialog really shows and the content is the details page. I see the following content in the dialog:
Details of /
No errors at all, but the data that should be shown, isn't. A breakpoint was set in StudentBean.setId() (this method loads a property named bean with the Student instance corresponding to the passed id) but it is never hit.
After some time thinking about it, I came to understand why it does not work. The parameter passed to the details page is student.id, but student is the name used as the var in the <p:datatable/> that show all the students, so student is not valid in <p:dialog/> which is outside the <p:datatable/>.
So, what I need is a way to show the dialog using the id of the corresponding student in a given row. Ideally, I would like an ajax call here, so the details would loaded only when neded.
Any ideas?
The button should be an ajax button which sets the currently iterated entity in the bean, and then updates the dialog's content, and finally shows it. The dialog should just reference that entity in the bean and update the list and table on save. It's very important that dialog is placed outside the main form and that it has its own form.
Here's a kickoff example:
<h:form id="master">
<p:dataTable value="#{bean.entities}" var="entity">
<p:column>#{entity.property1}</p:column>
<p:column>#{entity.property2}</p:column>
<p:column>#{entity.property3}</p:column>
...
<p:column>
<p:commandButton value="View" action="#{bean.setEntity(entity)}"
update=":detail" oncomplete="PF('detail').show()" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="detail" widgetVar="detail">
<h:form>
<p:inputText value="#{bean.entity.property1}" />
<p:inputText value="#{bean.entity.property2}" />
<p:inputText value="#{bean.entity.property3}" />
...
<p:button value="Close" onclick="PF('detail').hide(); return false" />
<p:commandButton value="Save" action="#{bean.save}"
update=":master" oncomplete="if(!args.validationFailed) PF('detail').hide()" />
</h:form>
</p:dialog>
With this inside a #ViewScoped bean:
private List<Entity> entities; // +getter
private Entity entity; // +getter+setter
#EJB
private EntityService entityService;
#PostConstruct
public void load() {
entities = entityService.list();
entity = null;
}
public void save() {
entityService.save(entity);
load();
}
See also:
Creating master-detail pages for entities, how to link them and which bean scope to choose
Creating master-detail table and dialog, how to reuse same dialog for create and edit
Keep p:dialog open when a validation error occurs after submit
Difference between rendered and visible attributes of <p:dialog>
How to display dialog only on complete of a successful form submit
How to avoid the call to onRowClick on the datatable on the column that has the outputlink (target to a new window)?
<rich:dataTable id="dt" value="#{bean.cars} var="_car">
<a:support event="onRowClick" action="#{action.navigateToCarDetails(_car.id)}"/>
<rich:column>
<f:facet name="header">Select</f:facet>
<a:commandLink onclick="Event.stop(event)" action="#{bean.toggleSelectedCar(_car.id)}" reRender="dt" ajaxSingle="true" limitToList="true">
<h:graphicImage value="/img/icon_checkbox_#{bean.isCarSelected(_car.id) ? 'active' : 'inactive'}.gif"/>
</a:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">Brand</f:facet>
<h:outputLink value="#{_car.link}" target="_blank">
<h:outputText value="#{_car.brand}"/>
</h:outputLink>
</rich:column>
<rich:column>
<f:facet name="header">Year</f:facet>
<h:outputText value="#{_car.year}"/>
</rich:column>
<rich:column>
<f:facet name="header">Color</f:facet>
<h:outputText value="#{_car.color}"/>
</rich:column>
</rich:dataTable>
So with the sample above, when I click on the row, it will navigate to a page with the detail of the Car.
And when clicked on the Select column's row, it will update the selected car, and update the checkbox icon accordingly, but without navigate to the car detail page, because I have the onclick="Event.stop(event)".
But when I click on the outputLink box, other than opening a new window and show the manufacturer web page, it also update the original page to the car details. How do I prevent this from happening? (I tried adding the onclick event stop just like the select column, but other than stopping the onrowclick event, it also block the link to the manufacturer web page)
Basically what Event.stop(event) does is the following:
\\ stops the event from bubbling up the event chain
event.stopPropagation();
\\ prevents the default action the browser makes on that event
event.preventDefault();
In your case you want just to prevent bubbling, so a way to go:
onclick="event.stopPropagation()"
You should be able to do something like this:
<rich:dataTable
onRowClick="if (event.target.id.endsWith('columnId')) return false;" …>
the onRowClick function is executed before the a4j:support so if you return false the action won't be called.
I have a problem with a h:inputText and i don't know how to solve it.
I'm working on a xhtml page using JSF and RichFaces which contains fields as Calendar, SelectOneMenu, InputTextArea, Input. At the end of my form, there are two buttons Print and Save.
If one of the fields is modified (text, date, etc), i have to disable the Print button. In every field, i have add ajax event.
For example :
<rich:calendar datePattern="dd/MM/yyyy" timeZone="#{timeZone.timeZone}" value="#{myBean.date}">
<f:ajax event="change" listener="#{myBean.verifyModification}" render="myForm"/>
</rich:calendar>
If my date is changed, i call a method stored in my bean and it's ok.
But, i have a problem with my inputText and inputTextArea.
<h:inputText value="#{myBean.name}" maxlength="50">
<a4j:ajax event="keydown" render="myForm" listener="#{myBean.verifyName}" />
</h:inputText>
If i write fastly, for example i stay on the letter a to write aaaaaaaa in my field. The field will contain aaaaaaaa then aaaa. Is it because the ajax event is too slow? The problem doesn't come from my bean method because i only test a value.
Because of that, i can't test this field. I have tried the others events like blur, change. If i use these events, i have to click out of my field then my button is refresh.
Could you help me, please?
Thank you.
The problem is most likely that you render your complete form, not only the part of it that needs updating. JSF will then replace your form with the values you submitted on the first ajax request. Try:
<h:inputText value="#{bean.name}">
<f:ajax event="keydown" render="myButtonP" listener="#{bean.verifyName}" />
</h:inputText>
<h:panelGroup id="myButtonP">
<h:commandButton id="printBtn" value="Print" action="#{bean.printMe}"
disabled="#{bean.canPrint}" />
<h:commandButton id="saveBtn" value="Save" action="#{bean.save}" />
</h:panelGroup>
If you use disabled instead of rendered on the button, you can even reference printBtn directly in the render attribute.
I have a form above which captures Contract records and displays them in a datatable which has a commandlink "Edit" tag. When I click “Edit” I would like the form populated with this contract data but with the Contract No field disabled. I’m trying to do this disabling in an Ajax onEvent tag and it is working (ie the disabling). However, the fields are not being populated/displayed in the form when the ajax is being used. If I remove it, everything is fine only that the Contract No will b editable.
These are my edit tags.
<h:commandLink id="editLink" value="#{bundle.ListUnitEditLink}" >
<f:ajax onevent="disablePK" listener="#{contractManager.updateContract}" />
</h:commandLink>
This is my backing bean.
public String updateContract() {
System.out.println("Now in UPDATECONTRACT method and serious debugging");
current = (Contract) items.getRowData();
this.newContractId=current.getContractid();
this.newContractDesc=current.getContractdesc();
this.newContractDt=current.getContractdt();
this.newContractAmt=current.getContractamt();
this.newContractStrtDt=current.getContractstrtdt();
this.newExpDuration=current.getExpduration();
this.newCtdBy=current.getCtdby();
this.newCtdOn=current.getCtdon();
this.lstUpdBy=current.getLstupdby();
this.lstUpdOn=current.getLstupdon();
return "contracts";
}
The properties in the bean are being given correct values but they are not appearing in the form to be edited.
I sorted out my problem by adding render=#all in the ajax tag
<h:commandLink id="editLink" value="#{bundle.ListUnitEditLink}"
actionListener="#{contractManager.updateContract}">
<f:ajax onevent="disablePK" render="#all" />
</h:commandLink>