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.
Related
I'm trying to display String value from a managed bean, but I think that the xhtml page doesn't see the bean at all as the value in the UI always empty.
Here's the code for the bean, trying to display the returned value of getMod()
#ManagedBean(name="user")
#SessionScoped
public class WebTest implements Serializable{
#PostConstruct
public void init() {
}
ScheduleModel model = new ScheduleModel();
public String mod = model.getName();
public String getMod() {
return mod;
}
public void setMod(String mod) {
this.mod = mod;
}
}
And this is the xhtml div
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:th="http://www.thymeleaf.org"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<ui:include src="header.xhtml"/>
<body class="skin-blue">
<div class="wrapper">
<div class="form-group">
<label>value="#{user.getMod}" </label>
<br/>
<input type="text" class="form-control" placeholder="Name" />
</div>
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 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
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"/>