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.
Related
I'm trying to POST some object fields to a RestController using thymeleaf.
But the result of the post returns what looks like a parsing error :
There was an unexpected error (type=Unsupported Media Type, status=415). Content type
'application/x-www-form-urlencoded;charset=UTF-8' not supported
The index page sends two attributes to the controller which then calls the business service that builds the new object.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/index/vendor/bootstrap/css/bootstrap.min.css}"
rel="stylesheet">
<!-- Custom styles for this template -->
<link th:href="#{/index/css/simple-sidebar.css}" rel="stylesheet">
</head>
<body>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<form action="#" th:action="#{/accounts}" th:object="${account}" method="post" enctype="application/json">
<div class="form-row">
<div class="form-group col-md-4 ">
<label for="inputState">Departement</label>
<input type="text" th:field="*{owner}" class="form-control" placeholder="Type in the department ..." />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4 ">
<label for="inputState">Budget</label>
<input type="number" step="0.01" th:field="*{budget}" class="form-control" placeholder="Type in Budget ..." />
</div>
</div>
<button class="btn btn-primary" type="submit">Enregistrer</button>
</form>
</div>
</div>
<!-- /#page-content-wrapper -->
</body>
</html>
This is the Rest Controller :
#RestController
public class AccountController {
#Autowired
private AccountService accountService;
#RequestMapping(value="/accounts", method=RequestMethod.POST)
public void addAccount(#RequestBody Account account ) {
accountService.addAccount(account);
}
}
Account is a simple POJO :
public class Account {
private String id;
private String owner;
private double budget;
private double budgetInvest;
private double budgetFonction;
public Account() {
}
public Account(String id,String owner, double budget, double budgetInvest, double budgetFonction
) {
super();
this.id = id;
this.owner=owner;
this.budget = budget;
this.budgetInvest = budgetInvest;
this.budgetFonction = budgetFonction;
}
public Account (String owner, double budget) {
this.owner = owner;
this.budget=budget;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public double getBudget() {
return budget;
}
public void setBudget(double budget) {
this.budget = budget;
}
public double getBudgetInvest() {
return budgetInvest;
}
public void setBudgetInvest(double budgetInvest) {
this.budgetInvest = budgetInvest;
}
public double getBudgetFonction() {
return budgetFonction;
}
public void setBudgetFonction(double budgetFonction) {
this.budgetFonction = budgetFonction;
}
public String getOwner() {
return owner;
}
public void setOwner(String owner) {
this.owner = owner;
}
}
And the add method simply adds the object to a list of objects.
What am i doing wrong here ?
I think problem in you controller. First it won't be #RestController. It will be #Controller. Second it won't be #RequestBody. It will be #ModelAttribute.So write your controller like
#Controller
public class AccountController {
#Autowired
private AccountService accountService;
#RequestMapping(value="/accounts", method=RequestMethod.POST)
public void addAccount(#ModelAttribute("account") Account account ) {
System.out.ptintln("Checking");
accountService.addAccount(account);
}
The most relevant to the discussion of REST, the #RestController annota- tion tells Spring that all handler methods in the controller should have their return value written directly to the body of the response, rather than being carried in the model to a view for rendering. This line from book spring in action. So here you should use #Controller annotation.
You can use restcontroller but u must using ajax post for run "/account"
Cmiiw
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
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"/>