I have a simple JSF example application from Core JavaServer Pages, 3rd Edition (page 122). The example is a simple JavaScript example that I had asked about before, but was unable to post the code for at that time.
This message is a follow up, with the actual code, to see if anyone can see why the html page does not correctly call the JavaScript function (in fact, nothing happens when I click submit).
All the paths are recognized by Intellij IDEA 14. In fact, if I try to change a variable name like outputScript library, Intellij goes "Red".
This code is right out of the Core JavaServer Pages, 3rd Edition where the same source code is freely available.
Thanks in advance.
index.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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>#{msgs.windowTitle}</title>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputScript library="javascript" name="checkPassword.js"/>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2" columnClasses="evenColumns, oddColumns">
#{msgs.namePrompt}
<h:inputText/>
#{msgs.passwordPrompt}
<h:inputSecret id="password"/>
#{msgs.confirmPasswordPrompt}
<h:inputSecret id="passwordConfirm"/>
</h:panelGrid>
<!--Execute JavaScript function on click of the button-->
<h:commandButton type="button" value="Submit Form" onclick="checkPassword(this.form)"/>
</h:form >
</h:body>
</html>
----------
JavaScript Function called by index.xhtml above:
checkPassword.js
function checkPassword(form)
{
alert("inside js");
var password = form[form.id + ":password"].value;
var passwordConfirm = form[form.id + ":passwordConfirm"].value;
if(password == passwordConfirm)
form.submit();
else
alert("Password and password confirm fields don't match");
}
Related
Problem: For the below provided code snippet, the page reloads on click of h:commandButton if f:ajax onevent has function name provided as value, however for the same, if it has the function declaration provided as onevent value, it works as expected.
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"" >
<h:head>
<h:outputStylesheet library="blue" name="style/style.css" />
<h:outputScript library="script" name="jquery-1.8.0.min.js" />
<script>
function jq(myid) {
return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\\\$1" );
}
function confirmDelete(data){
if(data.status == "success") {
$("#confirmDelete").show();
$(jq("licenseForm:buttons")).hide();
}
return false;
}
</script>
</h:head>
<h:body styleClass="bodyForm">
<div class="content">
<h:form id="licenseForm">
<fieldset id="confirmDelete">
<h:panelGroup>
<h:panelGrid columns="2">
<h:selectOneMenu value="#{bean.deleteReason}">
<f:selectItems value="#{metadata.deleteReasons}" />
</h:selectOneMenu>
</h:panelGrid>
</h:panelGroup>
</fieldset>
<h:panelGroup id="buttons" layout="block">
<h:commandButton value="Delete" styleClass="button">
<f:ajax onevent="confirmDelete" />
</h:commandButton>
</h:panelGroup>
</h:form>
</div>
</h:body>
</html>
JSF Version: Mojarra JSF Implementation 2.2.12
Server: Apache Tomcat 8.0.24
This can happen if the webbrowser in question overrides the JavaScript function in some way. Internet Explorer and Chrome are known to put HTML elements with an id by their id in JavaScript global scope. So e.g. <element id="foo"> is available as variable foo in JavaScript global scope.
In your specific case, you have both a function confirmDelete() and a <fieldset id="confirmDelete">. It's however very unexpected that the DOM element would override the JavaScript function altogether. This suggests a bug in the browser used. Your best bet is to rename either the JavaScript function or the element ID to something unique in the global scope.
Unrelated to the concrete problem, your jq() is inefficient. This is better:
function jq(myid) {
return document.getElementById(myid);
}
You perhaps want to rename the function too. For other hints on using jQuery in JSF see also How to select JSF components using jQuery?
I wrote this little JSF page:
<?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">
<h:head>
<title>What's your Name?</title>
</h:head>
<h:body>
<h1>What's your name?</h1>
<h:form>
<p>Name: <h:inputText value="#{nameController.name}" /></p>
<h:commandButton value="Submit" action="#{nameController.process}" />
</h:form>
</h:body>
</html>
The name property in nameController is simple, with a variable (of type String), a getter, and a setter, just how you would expect. nameController.process passes name as a GET parameter to another JSF page.
But, if I type "ëlmer" as the name, for example, I am redirected to this URL:
http://localhost:8080/NameThing/name.jsf?name=ëlmer
instead of
http://localhost:8080/NameThing/name.jsf?name=ëlmer
How is this caused and how can I solve it?
I´ve a JSF web application using SPRING3 + JSF2 (mojarra 2.1.12) and I´m having some problems that I think can be derived of a bad choose of the Scope of one controller in one combo of the JSF2+primefaces interface.
This combo functionality allows the user to choose one of the internal xhtml subpages and a button that automatically redirects you to that page.
The website uses a template technology: there is template (standard.xhtml) with the JSF2 code and using this template there are several pages: a inicio.xhtml that is the home page and a contact page (contacto.xhtml). In both pages the combo is displayed properly.
The following code it is working properly only if you´re navigating at the home page (incio.xhtml) but when you´re in other part of the web (i.e. contacto.xhtml) it displays the combo with all the options, but the button doesn´t work at all.
Here it´s my code in standard.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"
xml:lang="${userContext.locale}" lang="${userContext.locale}"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags">
<f:view contentType="text/html">
<h:head>
//HEAD
</h:head>
<body>
<div id="…">
<div id="…">
//CODE
//CODE to go from one page (inicio.xhtml) to other (contacto.xhtml)
<li><h:commandLink value="${msg.app_menu_contacto}" action="mContacto" /></li>
//MORE CODE
<h:form>
//MORE CODE
<h:panelGrid id="buscar" columns="2" style="margin-top:20px;" cellpadding="5">
<p:selectOneMenu id="selectBuscar" value="#{buscador.procedimiento}" panelStyle="width:150px;"
var="p" style="width:220px; margin-right: 10px; " filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="${msg.app_comun_seleccionar}" itemValue="" />
<f:selectItems value="#{buscador.procedimientos}" var="proc" itemLabel="#{proc.codigo}" itemValue="#{proc.valor}"/>
</p:selectOneMenu>
<p:commandButton id="btnIr" style="width:40px" value="#{msg.app_comun_btn_ir}" title="#{msg.app_comun_btn_ir_title}"
action="#{buscador.direccion}">
</p:commandButton>
</h:panelGrid>
</h:form>
</div>
</div>
</body>
</f:view>
</html>
In the faces-navigation.xml we have these lines (faces-navigation is only used in several inherited parts of the code):
<navigation-case>
<from-outcome>mContacto</from-outcome>
<to-view-id>/views/comun/contacto.xhtml</to-view-id>
<redirect />
</navigation-case>
Code of the xhtml home page where it is working:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
template="/WEB-INF/layouts/standard.xhtml">
//Code independent of the combo or button failing
// it uses ui:define to show different components in the page.
</ui:composition>
and this is the controller code:
#Controller("buscador")
//#Scope(“Session”) Do not work with “request”, “view” or without scope
public class BuscadorController implements Serializable {
public List<ValorCombo> getProcedimientos() {
//Code that returns a list of pair String to show in the combo, name of the xhtml page should be redirected
}
public String direccion() {
//CODE
String salida = "proc/"+procedimiento+"?faces-redirect=true";
//more CODE
return salida;
}
}
I have tried this but it doesn´t work neither.
http://balusc.blogspot.com.es/2011/09/communication-in-jsf-20.html
how can I solve this problem?
Thanks!
Here is my 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">
<h:head>
<title>Guess Number</title>
</h:head>
<h:body>
The number I guessed is: #{guessNumber.generatedNumber}
<br />
<strong>Please guess the number I generated which is between 0 and 10!</strong>
<h:form target="index">
<h:commandButton type="submit" value="Guess The Number!"></h:commandButton>
</h:form>
</h:body>
</html>
So in the output I see something like:
The number I guessed is: 6 Please guess the number I generated which
is between 0 and 10!
and a button below this text. When I click the button, the page opens in a new tab. But why?
That's caused for the target attribute in the <h:form>. Note that this is defined for pure HTML, not a JSF-ish special behavior.
To solve the problem, just remove the target attribute from the <h:form>.
I am new to primefaces and I want to use autocomplete tag of primeface.So i folllowed this example.Here is my code
layout.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">
<head>
<title>Title</title>
</head>
<body>
<h:form id="form">
<p:panel header="AutoComplete" toggleable="true" id="panel">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel value="Simple :" for="acSimple" />
<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}"
completeMethod="#{autoCompleteBean.complete}"/>
</h:panelGrid>
</p:panel>
</h:form>
</body>
</html>
AutoCompleteBean.java
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
#ManagedBean(name="autoCompleteBean")
#RequestScoped
public class AutoCompleteBean {
private String txt1;
public List<String> complete(String query) {
List<String> results = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
results.add(query + i);
}
return results;
}
public String getTxt1() {
return txt1;
}
public void setTxt1(String txt1) {
this.txt1 = txt1;
}
}
so layout.xhtml renders fine and show me a text field but after then it don't work and not showing autocomplete functionality.Is there something missing? or what would be the problemThanks
The xhtml you have posted is using standard html tags for head and body so it may not be correctly interpreting the Javascript used to call the complete method in the bean.
Try using h:head and h:body.
The tip-off may show up in your output window. Check for something like:
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)]
See the Stack Overflow discussion on h:head in primefaces: What's the difference between <h:head> and <head> in Java Facelets?
You should always use h:head and h:body when you are writing facelets. The reason is that in order for the auto complete to work javascript is required and if you don't include h:head jsf will not be able to put the javascript correctly.
I had a similar problem, however in my case the problem was resolved when I removed a p tag which was surrounding the p:autocomplete tag.
The following code will not throw an error message, but the autoselect dropdown menu won't appear. After removing the <p></p> everything works fine.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h:form>
<p>
<p:autoComplete id="place" value="#{addPlaceBean.place}"
completeMethod="#{autoCompletePlace.completePlace}" var="place"
itemLabel="#{place.city}, #{place.country}"
itemValue="#{place}" converter="placeConverter">
</p:autoComplete>
</p>
</h:form>
</h:body>
</html>