I'm new to jsf.
I'm trying to send value to java bean from commandButton to change src in ui:include and render it with ajax so I when clicked commandButton I could refresh part from the page without load the whole page
and below is my code
\\\\\\\ The Bean File
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
#Named("urls")
#RequestScoped
public class URLPagesBean
{
private String urlSRC = "";
public String getUrlSRC() {
return urlSRC;
}
public void setUrlSRC(String urlSRC) {
this.urlSRC = urlSRC;
}
public String getURL()
{
String url = "";
if(urlSRC == "page1" || urlSRC == "" || urlSRC == null)
{
url = "page1.xhtml";
}
else if (urlSRC == "page2")
{
url = "page2.xhtml";
}
return url;
}
}
/////////////
The Index file
\\\\\\\\\\\\\\\\\\\\\\
<h:body >
<h:panelGroup layout="block" styleClass="mainContentBox">
<h:panelGroup layout="block" styleClass="mainTopBox">
<h:panelGroup layout="block" styleClass="logoBox"></h:panelGroup>
</h:panelGroup>
<h:form id="subMenuForm">
<h:panelGroup layout="block" styleClass="mainLiftBox">
<h:panelGroup id="msgBoard" layout="block" styleClass="mainMenuButtons">Message Board
<h:panelGroup layout="block" styleClass="subMenuBox">
<h:commandButton id="showMsgBoard" styleClass="subMenuButtonCommand" value="Page1"/>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="mainMenuButtons">Registrations Book
<h:panelGroup layout="block" styleClass="subMenuBox">
<h:commandButton id="registrInternalApprov" styleClass="subMenuButtonCommand" value="Page2">
<f:ajax render="mainCenterBox" />
</h:commandButton>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="mainCenterBox" styleClass="mainCenterBox" layout="block">
<ui:include id="centerView" src="#{urls.URL}"/>
</h:panelGroup>
</h:form>
</h:panelGroup>
</h:body>
///////////////////////////////////////
page1.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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Page 1</title>
</h:head>
<h:body>
<ui:fragment>
Page 1
</ui:fragment>
</h:body>
</html>
///////////////////////////
page2.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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Page 2</title>
</h:head>
<h:body>
<ui:fragment>
Page 2
</ui:fragment>
</h:body>
</html>
///////////////////////////
Use action attribute of h:commandButton like
<h:commandButton value="Submit"
action="#{registrationAction.submitRegistration}" />
Related
I have seen many questions around the same topic but none of them helped. In fact I am beginning learning primefaces.
Here is my xhtml page (template):
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<f:view contentType="text/html" locale="en">
<h:head>
<title><ui:insert name="title">Master Data</ui:insert></title>
<h:outputStylesheet library="css" name="layout.css"/>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
<h:outputScript library="js" name="jsfcrud.js"/>
</h:head>
<h:body>
<p:growl id="growl" life="3000" />
<h:panelGroup layout="block" styleClass="slogan">
<h:outputText value="Master Data Web module for single line v 1.0"/>
</h:panelGroup>
<h:form id="mainForm" prependId="false">
<h:panelGrid columns="2" columnClasses="chaptersMenuColumn,chaptersContentColumn">
<h:form>
<f:ajax render=":content">
<p:menu>
<p:submenu label="Master Data Sections">
<p:menuitem value="KPI" action="#{KpiBean.setPage('create')}" />
<p:menuitem value="Queues" url=""/>
<p:menuitem value="Causes" url=""/>
<p:menuitem value="SubCauses" url=""/>
</p:submenu>
</p:menu>
</f:ajax>
</h:form>
<h:panelGroup id="content" layout="block">
<ui:include src = "../views/#{KpiBean.page}.xhtml"/>
</h:panelGroup>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
And here my Bean:
#Named
#SessionScoped
public class KpiBean implements Serializable {
private String page= "View";
#PostConstruct
public void init() {
page = "View"; // Default include.
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
When I launch my Glassfish server and deploy the build I get that error:
javax.faces.view.facelets.TagAttributeException: /templates/template.xhtml #47,78 <ui:include src="../views/#{KpiBean.page}.xhtml"> Invalid path : ../views/.xhtml
at com.sun.faces.facelets.tag.ui.IncludeHandler.apply(IncludeHandler.java:129)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:137)
actually your bean is available under the name kpiBean (camelCase naming, first letter in lowercase).
ı do not get any warning or error messages in console. debug mode breakpoints does not work in valueChangeListener method in bean class. another methods work at debug mode in bean class. ı tried also ajax with listener.(ı am using maven) does anbody have idea?
xhtml file:
<?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:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<ui:composition template="/template/template.xhtml">
<ui:define name="menu">
<ui:include src="/template/menu.xhtml">
<ui:param name="menuId" value="4"></ui:param>
</ui:include>
</ui:define>
<ui:define name="content">
<ui:include src="../template/progress.xhtml"></ui:include>
<h:form id="nameForm">
<h:outputScript library="primefaces" name="jquery/jquery.js"
/>
<b:column col-xs="12" col-md="8">
<b:panel style="width:80%">
<b:panelGrid colSpans="4,8">
<p:tabView id="tabView" style="min-width:450px;" >
<p:tab title="..." >
<b:panelGrid colSpans="3,9" columns="2"
cellpadding="10">
<p:selectOneMenu value="#{beanController.a}"
id="AId"
valueChangeListener="#{beanController.aSelected}" onchange="submit()">
<p:ajax event="change"/>
<f:selectItems
value="#{beanController.aList}" />
</p:selectOneMenu>
</b:panelGrid>
</p:tab>
beanController.java:
#ManagedBean(name = "beanController")
#ViewScoped
public class BeanController {
public void aSelected(ValueChangeEvent event){
You can use <f:ajax />, like that :
<f:ajax event="blur" listener="#{beanController.updateDataListener}" update=":#{p:component('tabView')}"/>
#ManagedBean(name = "beanController")
#SessionScoped
public class BeanController implements Serializable{
private String a;
public void updateDataListener(AjaxBehaviorEvent event)
{
......
}
}
I'm trying to apply this answer to rendering a part of my primefaces page but the problem is that I need to click twice before getting the part changed is there a solution ?
this is my code
index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>
<h:body>
<h:panelGroup id="header" layout="block">
<h1>Header</h1>
</h:panelGroup>
<h:panelGroup id="menu" layout="block">
<h:form>
<f:ajax render=":content">
<p:commandButton value="next" action="#{navBean.next}" />
<p:commandButton value="back" action="#{navBean.back}" />
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup id="content" layout="block">
<h:panelGroup rendered="#{navBean.activePage == 'firstAjax'}">
<ui:include src="firstAjax.xhtml" />
</h:panelGroup>
<h:panelGroup rendered="#{navBean.activePage == 'lastAjax'}">
<ui:include src="lastAjax.xhtml" />
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
and this is my managedBean
package com.project.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name = "navBean")
#SessionScoped
public class NavBean {
private String activePage = "firstAjax";
public String getActivePage() {
return activePage;
}
public void setActivePage(String activePage) {
this.activePage = activePage;
}
public void next() {
System.out.println("next in " + activePage);
this.setActivePage("lastAjax");
System.out.println("next out " + activePage);
}
public void back() {
System.out.println("back in " + activePage);
this.setActivePage("firstAjax");
System.out.println("back out " + activePage);
}
}
the firstAjax.xhtml and the lastAjax.xhtml is nearly the same
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:form>
<h2>content first</h2>
</h:form>
</ui:composition>
Your page is not working because PrimeFaces has its own ajax engine. You have to use it when using p:commandButton. You don't need to use p:ajax tag, because p:commandButton has ajax behaviour activated by default, just use the update attribute (equivalent to the render attribute of f:ajax component):
<h:form>
<p:commandButton value="next" action="#{navBean.next}" update=":content"/>
<p:commandButton value="back" action="#{navBean.back}" update=":content"/>
</h:form>
If you want to stick to plain jsf use this instead (it looks much more like the example by BalusC you mentioned):
<h:form>
<f:ajax render=":content" >
<h:commandButton value="next" action="#{navBean.next}" />
<h:commandButton value="back" action="#{navBean.back}" />
</f:ajax>
</h:form>
As a final note, it must be said that p:ajax tag (at least in PrimeFaces 4.0) doesn't support the syntax we are using here, outside the p:commandButton components, because it's not able to determine the event attribute and therefore it throws: <p:ajax> Event attribute could not be determined: null
I am using the RichFaces 4 in my JSF application, but I`d like call a method from my bean when the user press the save button (for example: to save in a file text.txt)
Is there a way to call a java method when the user click on rich:editor save button?
Here is the code i`m using
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</h:head>
<h:body>
<h:form>
<rich:editor id="editor" toolbar="full" value="#{editorBean.value}"
style="margin-bottom: 1em" height="400" >
<a4j:ajax event="change" render="panel" status="panelUpdateStatus" />
<a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">
<a4j:attachQueue requestDelay="1000" />
</a4j:ajax>
</rich:editor>
<rich:panel id="panel">
<f:facet name="header">
Output from Editor
<a4j:status name="panelUpdateStatus">
<f:facet name="start">
(Updating)
</f:facet>
</a4j:status>
</f:facet>
<h:outputText escape="false" value="#{editorBean.value}" />
</rich:panel>
</h:form>
EditorBean
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
#Named
#SessionScoped
public class EditorBean implements Serializable{
/**
*
*/
private static final long serialVersionUID = 5383915229820571701L;
private String value;
/**
* #return the value
*/
public String getValue() {
return value;
}
/**
* #param value the value to set
*/
public void setValue(String value) {
this.value = value;
}
public void save(){
System.out.println(" Saving ");
//Code to save
}
}
<form>
<editor></editor>
<a4j:commandButton value="Ok" type="submit" execute="#form" action="{editorBean.save()}" />
</form>
Bean:
public void save(){
System.out.println(" Saving: " + this.value);
//Code to save
}
This should submit the form, so the editor value gets saved to the bean.
When pressing the button, the editor content should show in your System.out.
I have this JSF tabs with JQuery and AJAX. But there is a bug that I cannot find. This is the JSF page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>DX-57 History Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/mytabs.js"></script>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="greenBand" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_application.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:650px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{ApplicationController.tabs}" var="tab">
<li>#{tab.tabid}</li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{ApplicationController.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{ApplicationController.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq ApplicationController.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</div>
<div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
This is the code of the managed bean:
import java.io.Serializable;
import javax.enterprise.context.SessionScoped;
// or import javax.faces.bean.SessionScoped;
import javax.inject.Named;
/* include SQL Packages */
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.sql.DataSource;
import javax.annotation.Resource;
import javax.faces.context.FacesContext;
import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
// or import javax.faces.bean.ManagedBean;
import org.glassfish.osgicdi.OSGiService;
#Named("ApplicationController")
#SessionScoped
public class Application implements Serializable {
public Application() {
}
/* Call the Oracle JDBC Connection driver */
#Resource(name = "jdbc/Oracle")
private DataSource ds;
#PostConstruct
public void init() {
tabs = new ArrayList<MyTabObject>();
tabs.add(new MyTabObject("ApplicationTabMain.xhtml", "Main"));
tabs.add(new MyTabObject("ApplicationTabModel.xhtml", "Model"));
tabs.add(new MyTabObject("ApplicationTabSettings.xhtml", "Settings"));
}
String selectedTab = "Main";
public String getSelectedTab() {
return selectedTab;
}
public void setSelectedTab(String selectedTab) {
this.selectedTab = selectedTab;
}
public String switchPages(String selTab) {
selectedTab = selTab;
return "Application.xhtml";
}
List<MyTabObject> tabs;
public List<MyTabObject> getTabs() {
return tabs;
}
public void setTabs(List<MyTabObject> tabs) {
this.tabs = tabs;
}
////
public class MyTabObject {
String tabfilename;
String tabid;
public String getTabfilename() {
return tabfilename;
}
public void setTabfilename(String tabfilename) {
this.tabfilename = tabfilename;
}
public String getTabid() {
return tabid;
}
public void setTabid(String tabid) {
this.tabid = tabid;
}
public MyTabObject(String tabfilename, String tabid) {
super();
this.tabfilename = tabfilename;
this.tabid = tabid;
}
}
}
The JSF page has these tabs:
ApplicationTabMain.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form>
Main
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
ApplicationTabModel.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form>
Model
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
ApplicationTabSettings.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form>
Settings
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
For now I have only plain JSF tabs without any Java code. This is the problem:
The content of the tabs is not displayed. In firebug I get this error:
uncaught exception: jQuery UI Tabs: Mismatching fragment identifier.
How I can fix this error?
There are indications you may use incompatible jquery/jqueryui versions according to this: http://forum.jquery.com/topic/uncaught-exception-jquery-ui-tabs-mismatching-fragment-identifier-5-2-2010
Try switching back to jquery 1.3.2 if you are not already.