AJAX not rendering in JSF - ajax

Sorry for my english.
Method delete from TestMB:
public String delete(Post post) {
getDao().delete(post);
return "success";
}
test.xhtml :
<h:form id="form1">
<ui:repeat value="#{TestMB.entityList}" var="entityList">
<p>
#{entityList.name}
<h:commandLink action="#{TestMB.delete(entityList)}">
del
<f:ajax render=":form1"/>
</h:commandLink>
</p>
</ui:repeat>
</h:form>
Page does not refresh when I clicked the link "del". If I click again, the page will refresh. Why?
if I use new method delete from TestMB:
private String txt1="test";
public String delete() {
try{
Thread.sleep(Long.valueOf("10000"));
}catch(Exception ex){}
txt1="";
return "";
}
And new test.xhtml:
<h:form id="form1">
#{testMB.txt1}
<h:commandLink action="#{testMB.delete}">
del
<f:ajax render=":form1"/>
</h:commandLink>
</h:form>
I click the link "del" and the page refresh in 10 seconds.
Why not work in the first case?

I found the problem.
public List<Entity> getEntityList() {
//if(entityList == null){
entityList=getDao().findAll(getPageRequest());
//}
return entityList;
}

Related

Change value of checkbox using ajax in JSF

I try to solve the following problem: i have a group of h:selectBooleanCheckbox that generates using ui:repeat:
<h:form>
<ui:repeat value="#{uiCheckboxList.list}" var="boxElement" varStatus="i">
<h:selectBooleanCheckbox id="a">
<f:attribute name="value" value="#{boxElement.enabled}"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="#{boxElement.val}" for="a"/>
</ui:repeat>
</h:form>
Values and label's text stored in array list and controls by servlet:
#ManagedBean(name="uiCheckboxList")
#ApplicationScoped
public class CheckBoxListBean implements Serializable {
private ArrayList<BoxTuple> list;
// BoxTyple is class with 2 fields - val (double) and enabled (boolean)
public CheckBoxListBean() {
list = new ArrayList<>();
for(double i = -2.0; i <= 2.0; i += 0.5) {
list.add(new BoxTuple(i, false));
}
// Set first element to true
list.get(0).setEnabled(true);
}
public ArrayList<BoxTuple> getList() {
return list;
}
public void setList(ArrayList<BoxTuple> list) {
this.list = list;
}
And my problem is this: when you click on one of the h:selectBooleanCheckbox server asynchronously sent request with information about the changed box, and then change the values of the another boxes without reloading page. In other words, I need to get the behavior of radio boxes. Maybe it sounds silly, but I need to solve this problem. How can i implement this?
You can do something like this:
<h:form id="form">
<ui:repeat value="#{uiCheckboxList.list}" var="boxElement"
varStatus="i">
<h:selectBooleanCheckbox id="a">
<f:attribute name="value" value="#{boxElement.enabled}" />
<f:ajax render="form"
listener="#{uiCheckboxList.listen(boxElement)}" />
</h:selectBooleanCheckbox>
<h:outputLabel value="#{boxElement.val}" for="a" />
</ui:repeat>
</h:form>
(get rid of the varStatus if you don't use it)
public void listen(BoxTuple tuple) {
if (tuple.enabled)
for (BoxTuple t : list)
if (!t.equals(tuple))
t.setEnabled(false);
}

How can I clear h:messages in an ace:dialog after an ajax event?

I have a button (Make Popup Visible) which makes a pop-up visible. When the form is submitted (Submit The Form), an error message can sometimes appear in the h:messages field, which is expected.
My problem is that, when I close the pop-up (Make Popup Invisible) and then re-open it (Make Popup Visible) the h:messages field is still populated with the old error message.
Is there a way I can clear the messages when the (Make Popup Visible) is pushed? I don't want to do a full page submit to do this.
Button visibility:
<h:form id="mainForm">
<h:commandButton value="Make Popup Visible">
<f:ajax listener="#{controller.prepareDelete(item)}" render=":deleteItemPopup"/>
</h:commandButton>
</h:form>
Pop-up:
<ace:dialog id="deleteItemPopup" visible="#{controller.deleting}">
<h:panelGroup rendered="#{controller.deleting}" layout="block">
<h:messages for="deleteItemPopupForm"/>
<h:form id="deleteItemPopupForm">
<ui:insert name="content">
This contains a form which, when submitted, can cause
an error message to be created and populate the h:messages
field
</ui:insert>
<h:commandButton value="Submit The Form" action="#{controller.delete}"/>
<h:commandButton value="Make Popup Invisible">
<f:ajax listener="#{controller.cancel}" render=":deleteItemPopup"/>
</h:commandButton>
</h:form>
</h:panelGroup>
</ace:dialog>
Commands:
public void prepareDelete(Item item) {
deleting = true;
}
public void cancel() {
deleting = false;
}
public void delete() {
.
.
.
} catch (MyException ex) {
FacesUtils.sendMessage("deleteItemPopupForm", ex);
}
}
Looks like ICEfaces does some special stuff with messages:
http://www.icesoft.org/JForum/posts/list/19753.page#71521
I added this to my web.xml file and the messages now go away:
<context-param>
<param-name>org.icefaces.messagePersistence</param-name>
<param-value>false</param-value>
</context-param>

JSF submitButton that renders on datatable

This is my JSF(2.2) page :
<h:form>
<p>
Hiker-name
</p>
<p>
<h:selectOneMenu id="smenu">
<f:ajax render="hikerActivities"/>
<c:forEach items="#{hikerPresenter.hikers}" var="hiker">
<f:selectItem itemValue="#{hiker.hikerId}" itemLabel="#{hiker.hikerName}"/>
</c:forEach>
</h:selectOneMenu>
<h:commandButton id="submitHiker" value="Submit" action="#{hikerPresenter.getHikerActivities(hiker.hikerId)}">
<f:ajax execute="smenu" render="hikerActivities"/>
</h:commandButton>
</p>
<p>
<h:dataTable id="hikerActivities" var="hikerActivity" border="1">
<h:column>
<f:facet name="header" >Trip-date</f:facet>
#{hikerActivity.tripDate}
</h:column>
<h:column>
<f:facet name="header">Trip-fare</f:facet>
#{hikerActivity.tripFare}
</h:column>
<h:column>
<f:facet name="header">Trip-duration</f:facet>
#{hikerActivity.tripDuration}
</h:column>
</h:dataTable>
</p>
I want that with a click on the command button, my MBean's method get called with the hikerId from the selected item and gets render on the datatable.
this is my MBean :
#ManagedBean
#RequestScoped
public class HikerPresenter {
#EJB
private HikerControllerLocal hikerController;
public HikerPresenter() {
}
public List<HikerAccessDTO> getHikers(){
return hikerController.getHikers();
}
public List<HikerActivityDTO> getHikerActivities(long hikerId){
System.out.println("Get Hiker Activities Called");
List<HikerActivityDTO> l = new ArrayList();
l.add(new HikerActivityDTO(new Date(1417150800000L), "Montréal", "Valleyfield", "Amine", 22, 45));
l.add(new HikerActivityDTO(new Date(1417160800000L), "Montréal", "Québec", "Farida", 33, 44));
l.add(new HikerActivityDTO(new Date(1417170800000L), "Montréal", "Alloha", "dsdsd", 12, 2332));
return l;
}
}
I suppose that I call the MBean method getHikerActivities on the wrong place because it doesn't even System.out.
What am-I doing wrong?
1:
use f:selectItems instead of f:selectItem
2:
your table missed the value attribute like value="hikerPresenter.hikers"
3:
You must set the value attribute of h:selectOneMenu to set hikerId into the bean, so its not necessary to send it as parameter in the method getHikerActivities

JSF Primefaces and ajax listener, button not shown when rendered

I am using JSF and Primefaces to develop a JavaEE application. Each time I press a button(Authenticate), a BUTTON (Button) and a message(Message) must be shown.
The problem is that the message is shown, but not the button. What could I do to show the button?
Here is my code:
ManagedBean IdCertificateManagedBean.java
String m_strRoute;
String m_strMessageRegister;
boolean m_bRegistrationCorrect;
//Getters and Setters
//Constructor
public IdCertificateManagedBean()
{
m_strMessageRegister = "";
m_strRoute = "";
m_bRegistrationCorrect = false;
}
public void authenticateUser()
{
try
{
int a=5;
if (a ==5)
{
m_strMessageRegister = "hello";
m_bRegistrationCorrect = true;
m_strRoute = "/admin/menuadmin";
}
else
{
m_strMessageRegister = "ERROR";
}
}
catch ( Exception e)
{
m_strMessageRegister = "Error";
}
}
}
Facelet
<p:commandButton value="Authenticate">
<p:ajax listener="#{IdCertificateManagedBean.authenticateUser()}" update="Message, Button" />
</p:commandButton>
<h:outputText id="Message" value="#{IdCertificateManagedBean.MessageRegister}" />
<p:commandButton id="Button" value="Go" action="#{IdCertificateManagedBean.route}" rendered=" {IdCertificateManagedBean.registrationCorrect}" />
You must wrap your <h:commandButton /> inside a container as <h:panelGroup /> and then refresh the container.
The problem is that on first page load your button is not rendered so it is not inserted inside the DOM of the page. On page refresh you're trying to refresh it but you can't do it because the button isn't on the page.
A solution could be this
<h:panelGroup layout="block" id="buttonDiv">
<h:commandButton ... />
</h:panelGroup>
and then in your ajax you have to refresh buttonDiv

JSF input file tag + ajax

I lost whole day on this issue and got nothing. I know that the question was asked but it was never answered. BalusC said that this issue is fixed in JSF 2.2.5 but either it is not or i do something wrong.
I use h:inputFile tag with ajax to render choosen image in preview div after chosing one from disk. However it's rendered only once and i have to reload page to see next chosen image. It causes more errors. For example when I use SUBMIT button to send chosen image to DB, ajax from commandLink is not executed (image is saved and rendered after page after refresh).
It looks to me like ajax is broken after chosing an image from disk and followed ajax actions are not executed, even they dont belong to h:inputfile.
This is my JSF form (one of its versions because i tried so many tricks)
<h:panelGroup class="photo-update" rendered="#{profileBean.page eq 'photo'}">
Dodaj lub zmień swoje zdjęcie profilowe[...]
<h:form enctype="multipart/form-data">
<h:panelGroup id="form-content">
<h:panelGroup id="current-image" class="current-image">
<p:graphicImage value="#{imageBean.getUserImage()}"/>
</h:panelGroup>
<h:panelGroup id="accept-container-ajax">
<h:panelGroup id="accept-container" class="accept-container"
rendered="true">
<div class="arrow">
<img src="resources/images/arrow.png"/>
<div class="change-text">Zamień na</div>
</div>
<h:panelGroup id="new-image" class="new-image">
<p:graphicImage value="#{profileBean.getConvertedImage()}"/>
</h:panelGroup>
<h:commandLink class="btn btn-default ok-button" value="zatwierdź"
action="#{profileBean.uploadPhoto}">
<f:ajax render="accept-container-ajax current-image"
execute="#form"/>
</h:commandLink>
</h:panelGroup>
</h:panelGroup>
<div class="btn btn-default change-image-container">
Zmień zdjęcie
<h:inputFile immediate="true" id="change-image"
class="change-image" value="#{profileBean.image}">
<f:ajax render="accept-container-ajax" execute="#form"/>
</h:inputFile>
</div>
</h:panelGroup>
</h:form>
</h:panelGroup>
This is fragment of the bean:
public StreamedContent getConvertedImage() throws IOException {
return userBo.convertPartToStream(image);
}
public void uploadPhoto() {
this.renderChangeContainer = false;
if (userBo.addImage(this)) {
FacesContext.getCurrentInstance().addMessage(
null, new FacesMessage(
FacesMessage.SEVERITY_INFO, "...", null));
} else {
FacesContext.getCurrentInstance().addMessage(
null, new FacesMessage(
FacesMessage.SEVERITY_ERROR, "...", null));
}
}
injected BO methods are OK.
Please give me a clue what is going on.
EDIT:
I also see ugly iframe with some response content i guess.

Resources