JSF2 jQueryと組み合わせる

2018-12-162018
95.7% (349.3/365)
December
49.4% (15.3/31)
Week 50
90.4% (6.3/7)
Day 16 Sun
33.1% (7.9/24)

訪問者

total: 5146
today: 2
yesterday: 2
now: 6

↑

更新

MenuBar

サンプルプログラム
実装
JSF の生成する id の区切り文字を ":" から "_" にする

サンプルプログラム †

コメント欄に何も入力しないと、ボタンが無効化され、コメント欄がピンクになるようにする

↑

実装 †

xhtml

<h:form id="form0">
  コメント欄 :
  <h:inputText id="txtComment" value="#{commentController.comment}"/>
  <br/>
  <h:commandButton id="btnPublish" value="投稿" action="#{commentController.doPublish}"/>
</h:form>

xhtml 上で id 属性を設定すると、ブラウザでは form0:txtComment になる

<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="-7485856668507724812:-8118140014243784721" autocomplete="off" />
</form>

注意 jQuery では ":" は CSS セレクタになるので、"\\:" のようにエスケープする必要がある

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>

↑

JSF の生成する id の区切り文字を ":" から "_" にする †

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>

Glassfish JSF2

JSF2 jQueryと組み合わせる

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

サンプルプログラム †

実装 †

JSF の生成する id の区切り文字を ":" から "_" にする †