- jQuery側で毎回エスケープするのはめんどくさいし、バグの原因にもなるだろうから、JSF の生成する id の区切り文字を ":" から "_" に変更したい。
- web.xml に設定する
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>javax.faces.SEPARATOR_CHAR</param-name>
<param-value>_</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
- javax.faces.SEPARATOR_CHAR に _ を設定すると id の区切り文字が "_" になる
- simpleComment.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" lang="en">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>シンプルコメント</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
changeState();
$('#form0_txtComment').on('keyup', function() {
changeState();
});
});
function changeState() {
var $publish = $('#form0_btnPublish');
var $comment = $('#form0_txtComment');
if ($comment.val().length === 0){
$publish.attr('disabled','disabled');
$comment.css('background', 'pink');
} else {
$publish.removeAttr('disabled');
$comment.css('background', 'white');
}
}
</script>
</h:head>
<h:body>
<h:form id="form0">
コメント欄 :
<h:inputText id="txtComment" value="#{commentController.comment}"/>
<br/>
<h:commandButton id="btnPublish" value="投稿" action="#{commentController.doPublish}"/>
</h:form>
</h:body>
</html>
- ブラウザ上の HTML
<form id="form0" name="form0" method="post" action="/JSFExam/faces/simpleComment.xhtml"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form0" value="form0" />
コメント欄 :
<input id="form0_txtComment" type="text" name="form0_txtComment" />
<br />
<input id="form0_btnPublish" type="submit" name="form0_btnPublish" value="投稿" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
value="-21086486387403900:4135354229649082125" autocomplete="off" />
</form>