Trying to update a page through Ajax. Click a button and print out a counter on the page.
The following code works when deployed with JSF 2.0 mojarra on a Tomcat 7. It does not work when deployed from JDeveloper 11g to the built in Weblogic server. The count variable does get incremented, but the page is reloaded each time when using ADF.
Backing Bean:
import javax.faces.bean.*;
import javax.faces.event.ActionEvent;
#ManagedBean(name="countBean")
#SessionScoped
public class CountBean {
Integer count=1;
public void incrementCount(ActionEvent event) {
++count;
}
public Integer getCount() { return count;}
public void setCount(Integer count) { this.count = count; }
}
JSF-page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head><title>Ajax commandButton test</title></h:head>
<h:body>
<h3>Ajax count</h3>
<h:form>
<h:commandButton id="cb" value="Increment count"
actionListener="#{countBean.incrementCount}">
<f:ajax event="click" execute="cb" render="ot" />
</h:commandButton>
<br/><br/>
Counter = <h:outputText id="ot" value="#{countBean.count}"/>
</h:form>
</h:body>
</html>
I found the answer myself:
<af:commandButton text="increment count" id="cb1" actionListener="#{countBean.incrementCount}" partialSubmit="true"/>
Counter = <af:outputText id="ot" value="#{countBean.count}" partialTriggers="cb1"/>
Related
I try to AJAXify a simple commandButton in order to send AJAX request without refreshing the whole page. My xhtml file includes the following code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test</title>
</h:head>
<h:body>
<h:form id="form">
<h:inputText id="name" value="#{test.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
<h2>
<h:outputText id="output" value="#{test.sayWelcome}" />
</h2>
</h:form>
</h:body>
</html>
My backing bean is the following:
import java.io.Serializable;
import javax.faces.bean.ViewScoped;
import javax.inject.Named;
#ViewScoped
#Named("test")
public class TestBackingBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSayWelcome() {
// check if null?
if ("".equals(name) || name == null) {
return "";
} else {
return "Ajax message : Welcome " + name;
}
}
}
However, when I click on commandButton the form is submitted and the whole page is refreshed.
I would like to avoid using additional JSF frameworks.
Thank you in advance.
Can you tried the execute and render properties:
<h:form id="form">
<h:inputText id="name" value="#{test.name}"></h:inputText>
<h:commandButton value="Welcome Me" action=#{test.sayWelcome()}>
<f:ajax execute="name" render="output" />
</h:commandButton>
</h:form>
<h2> <!-- Outside the Form! -->
<h:outputText id="output" value="#{test.message}" />
</h2>
Bean:
public class TestBackingBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private String message;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMessage() {
return message;
}
public void setMessage(String value) {
this.message = value;
}
public void sayWelcome() {
// check if null?
if ("".equals(name) || name == null) {
message = "";
} else {
message = "Ajax message : Welcome " + name;
}
}
}
The problem here is that you're using the wrong #ViewScoped. It's a mess that's a long time in the making, so condolences I guess.
The version of #ViewScoped you have there wasn't meant to be used with CDI's #Named. As a result, you really don't have a viewscoped bean there - the bean is in the implicit CDI #Dependent scope which will behave a little like the #RequestScoped scope.
In short: use the javax.faces.view.ViewScoped annotation instead and your bean will behave properly.
I have been plagued with an issue for the past few days that I cannot solve. I am using Mojarra 2.2.12 on Wildfly 10.
My problem is that when I use an f:ajax tag inside of an h:inputFile tag and attempt to re-render any component, using either the component's ID, #form, #all, or anything else, nothing is re-rendered. Ever. However, it works absolutely fine within an h:commandButton or other components.
Here is a simple example.
I have an xhtml file called index.xhtml. This file contains an h:message, h:inputFile, and h:commandButton.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="test" enctype="multipart/form-data">
<h:message for="test" />
<br />
<h:inputFile value="#{uploadController.uploadedFile}">
<f:ajax render=":test" />
</h:inputFile>
<h:commandButton value="Push me!"
action="#{uploadController.buttonPushed}">
<f:ajax render=":test" />
</h:commandButton>
</h:form>
</h:body>
</html>
I also have a ManagedBean class called UploadController, which logs messages upon an action taking place, and is supposed to display a message inside of the h:message tag once the form is re-rendered.
#ManagedBean
#ViewScoped
public class UploadController {
private Part uploadedFile;
public Part getUploadedFile() {
return uploadedFile;
}
public void setUploadedFile(Part uploadedFile) {
this.uploadedFile = uploadedFile;
System.out.println("File Uploaded!");
FacesContext.getCurrentInstance().addMessage("test", new FacesMessage("File Uploaded!"));
}
public void buttonPushed()
{
System.out.println("Button pushed!");
FacesContext.getCurrentInstance().addMessage("test", new FacesMessage("Button Pushed!"));
}
}
The expected result is that when you select a file, it will "upload" the file and then display "File Uploaded!" in the h:message once the ajax re-renders the page. Then if you push the button, it will display "Button Pushed!" in that same h:message.
The actual result is that, yes, "File Uploaded." is printed to the console, but the page never re-renders and the message never appears. The button, on the other hand, works perfectly, and the message appears just like it should.
I have absolutely no idea what to do from here. I'm a beginner to JSF. Why does the ajax not re-render inside the h:inputFile, but it works perfectly fine in the h:commandButton? Is this a bug? How can I achieve the desired results without refreshing the page?
I am trying to make ajax call inside jsf dataTable on checkobx value change.
But the corresponding backing bean is not getting fired.
When I tried the same thing outside dataTable, the ajax call is getting invoked and SOP's are getting printed.
Following is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
>
<h:body>
<h:head></h:head>
<section class="box">
<h:form>
<f:event type="preRenderView" listener="#{adminAccounts.getAppInfoNew()}" />
<div class="row-fluid">
<div class="span7" style="">
<span class="heading">Manage Accounts</span>
</div>
</div>
<!-- outside dataTable ajax call is working -->
<h:selectBooleanCheckbox checked="checked"
value="#{adminAccounts.testValue}">
<f:ajax listener="#{adminAccounts.changingTabVisiblity}"></f:ajax>
</h:selectBooleanCheckbox>
<h:dataTable id="diagnosis_list_2"
value="#{adminAccounts.appsList}" var="apps">
<h:column>
<f:facet name="header">Position</f:facet>
#{apps.appname}
</h:column>
<h:column>
<f:facet name="header">Campaign Management</f:facet>
<!-- inside dataTable ajax call is not working -->
<h:selectBooleanCheckbox checked="checked"
value="#{adminAccounts.testValue}">
<f:ajax listener="#{adminAccounts.changingTabVisiblity}"></f:ajax>
</h:selectBooleanCheckbox>
</h:column>
</h:dataTable>
</h:form>
</section>
</h:body>
</html>
Also following is the bean class
#ManagedBean(name = "adminAccounts")
#RequestScoped
public class AdminAccounts {
private List<AppDummyList> appsList = new ArrayList<AppDummyList>();
public boolean testValue;
public boolean testValue1;
public boolean isTestValue1() {
return testValue1;
}
public void setTestValue1(boolean testValue1) {
this.testValue1 = testValue1;
}
public boolean isTestValue() {
return testValue;
}
public void setTestValue(boolean testValue) {
this.testValue = testValue;
}
public List<AppDummyList> getAppsList() {
return appsList;
}
public void setAppsList(List<AppDummyList> appsList) {
this.appsList = appsList;
}
public void getAppInfoNew() {
System.out.println("get info called");
appsList.add(new AppDummyList("amazon"));
appsList.add(new AppDummyList("bookmyshow"));
appsList.add(new AppDummyList("flipkart"));
appsList.add(new AppDummyList("foodpanda"));
}
public void changingTabVisiblity() {
System.out.println("value=" + testValue);
System.out.println("value1=" + testValue1);
}
}
Need help on why the ajax call not working inside dataTable.
I am having trouble when trying to update my datatable using Ajax. I have an update attribute in my commandButton in which I select the table, but when I click the button the ajax does not work and the page is refreshed.
Here is the xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<head></head>
<body>
<h:form id="search">
<p:inputText id="searchInput" value="#{matchBean.searchInput}"
required="true" requiredMessage="Please enter match id"
pt:placeholder="Enter player id"></p:inputText>
<p:commandButton ajax="true" value="Search" update=":#
{p:component('resultsTable')}"
actionListener="#{matchBean.searchForMatches()}">
</p:commandButton>
</h:form>
<h:form id="results">
<p:dataTable var="match" value="#{matchBean.matches}" id="resultsTable">
<p:column headerText="Id" id="idHeader">
<h:outputText id="idText" value="#{match.match_id}">
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
</body>
</html>
And the backing bean:
#ManagedBean
#RequestScoped
public class MatchBean {
private Match match;
private List<MatchResponseDetails> matches;
private String searchInput;
public void searchForMatch() {
setMatch(new MatchRetriever().getMatchDetails(searchInput));
}
public void searchForMatches() {
setMatches(new MatchRetriever().getLightMatchData(searchInput));
}
public Match getMatch() {
return match;
}
public void setMatch(Match match) {
this.match = match;
}
public List<MatchResponseDetails> getMatches() {
return matches;
}
public void setMatches(List<MatchResponseDetails> matches) {
this.matches = matches;
}
public String getSearchInput() {
return searchInput;
}
public void setSearchInput(String searchInput) {
this.searchInput = searchInput;
System.out.println(searchInput);
}
I want to generate second selecOneMenu content when the user triggers an event on the first selecOneMenu, but it doesn't work.
Here is the navigation rule in face-config.xml
<navigation-rule>
<from-view-id>/index.xhtml</from-view-id>
<navigation-case>
<from-action>#{contact_.inscription_fournisseur}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>xhtml/Inscription_user.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
here is my index page : whene i click on S'inscrire it initiates the first list and redirects me to Inscription_user.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<!-- <link href="${request.contextPath}/css/style.css" rel="stylesheet" type="text/css"/>-->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/ao.js" />
<h:head>
<title><h:outputText value="#{En_Fr.titre_page_index_fr}"/></title>
</h:head>
<body class="box_center" >
<div style="border:0px #888 solid; margin-top:40px; margin-left:10%; margin-right:10%">
<div class="box_fournisser">
<div class="titre_site" style="text-align:right">Accs fournisseur</div>
<div class="pwd_oublie font-label" style="text-align:right; color: #666;"> <label>Mot de passe oublié</label></div><div class="pwd_oublie font-label" style="text-align:right; text-decoration: underline;">
<label><h:form>
<h:commandLink action="#{contact_.inscription_fournisseur}" styleClass="pwd_oublie font-label" style="text-align:left; margin-left: 15px; text-decoration: underline;" >
S'inscrire
</h:commandLink>
</h:form>
</label>
</div></div>
<div class="statistic_ background_site_unselected " ><label class="nombre_statistic">1236</label><label class="label_statistic">appel d'offre</label></div>
<div class="statistic_ background_site_unselected " style="top:10%" ><label class="nombre_statistic">15985</label><label class="label_statistic">demande de devis</label></div>
<div class="statistic_ background_site_unselected " style="top:15%" ><label class="nombre_statistic">4859</label><label class="label_statistic">visite par moi</label></div></div>
</body>
</html>
my Inscription_user.xml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<link href="../css/inscription.css" rel="stylesheet" type="text/css"/>
<h:head>
<title><h:outputText value="#{En_Fr.titre_page_index_fr}"/></title>
</h:head>
<body>
<div></div>
<f:view>
<h:form>
<h:messages>d :</h:messages>
<div class="ligne_inscription" >
<div class="label_inscription">Direction</div>
<div>
<p:selectOneMenu effect="fade" value="#{contact_.organisme.selectedDirection}" style="width:110;">
<f:selectItem itemLabel="Select One" itemValue="0"/>
<f:selectItems value="#{contact_.organisme.directions}" var="direction" itemLabel="#{direction.direction}" itemValue="#{direction.idDirection}"/>
<p:ajax update="lstfonct" listener="#{contact_.organisme.initFonction}" />
</p:selectOneMenu>
</div></div>
<div class="ligne_inscription" >
<div class="label_inscription">Fonction</div><div>
<p:selectOneMenu effect="fade" value="#{contact_.organisme.selectedFonction}" id="lstfonct">
<f:selectItem itemLabel="Select One" itemValue="0"/>
<f:selectItems value="#{contact_.organisme.fonctions}" var="fonction" itemLabel="#{fonction.fonction}" itemValue="#{fonction.idEmploi}"/>
</p:selectOneMenu>
</div></div>
<h:commandButton type="submit" value="Valider" action="#{contact_.inscription_choix_alerte()}" />
</h:form>
</f:view>
</body>
</html>
here is my bean Contact_
package beans;
// Generated 23 oct. 2012 21:51:42 by Hibernate Tools 3.2.1.GA
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import Dao.Emploi_dao;
/**
* Contact generated by hbm2java
*/
#ManagedBean(name="contact_")
#RequestScoped
public class Contact_ implements java.io.Serializable {
/**
*
*/
private static final long serialVersionUID = 493917875769565440L;
#ManagedProperty(value="#{organisme_}")
private Organisme_ organisme;
public Organisme_ getOrganisme() {
return organisme;
}
public void setOrganisme(Organisme_ organisme) {
this.organisme = organisme;
}
public String inscription_fournisseur() {
organisme.setDirections(Emploi_dao.List_direction());
return "success";
}
}
my bean organisation_
package beans;
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
import Dao.Activite_dao;
import Dao.Emploi_dao;
import Dao.Organisme_dao;
import hibernate.Activite;
import hibernate.Adresse;
import hibernate.Emploi;
import hibernate.Organisme;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.event.AjaxBehaviorEvent;
/**
*
*
*/
#ManagedBean (name="organisme_")
#RequestScoped
public class Organisme_ implements java.io.Serializable {
/**
*
*/
private static final long serialVersionUID = 4579411552477526993L;
private List<Emploi> directions = new ArrayList <Emploi>(0);
private List<Emploi> fonctions = new ArrayList <Emploi>(0);
private String SelectedDirection;
private String SelectedFonction;
public List<Emploi> getDirections() {
return directions;
}
public void setDirections(List<Emploi> directions) {
this.directions = directions;
}
public List<Emploi> getFonctions() {
return fonctions;
}
public void setFonctions(List<Emploi> fonctions) {
this.fonctions = fonctions;
}
public String getSelectedDirection() {
return SelectedDirection;
}
public void setSelectedDirection(String selectedDirection) {
SelectedDirection = selectedDirection;
}
public String getSelectedFonction() {
return SelectedFonction;
}
public void setSelectedFonction(String selectedFonction) {
SelectedFonction = selectedFonction;
}
public void initFonction()
{
System.out.println("------------debut-----------");
fonctions=Emploi_dao.List_fonction(SelectedDirection);
}
}
there is one solution by removing the initialization on the directions list from the method inscription_fournisseur() on the contact_ bean class, and make it in the default constructor of the organisation_ bean class, in this case it works, but I don't prefer this solution, I prefer the first scenario, please help me.
youre using the wrong namespace <f:ajax> should be <p:ajax>
Instead u should change update to update what you want and set the selected value in a method defined by the listener to change your other selectMenu's data
see the showcase example