将jquery与JSF集成

当我有一个带有jQuery的JSP页面时，执行该页面没有任何问题。当我在带有JSF的Facelets页面中使用相同的代码时，jQuery似乎不起作用。它无法识别<input>标记的id属性。以下是 Facelet 页面的代码。

<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"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
  <style type="text/css">
    h1 {
      font-family: "Times New Roman";
      font-size: 7px;
    }
    pre {
      font-family: "Times New Roman";
      font-size: 25px;
      font-style: bold;
      align: center;
    }
</style>
<script LANGUAGE="JavaScript" SRC="jquery-1.7.min.js"></script>
<script type="text/javascript">
    window.onload = function(e) {
        var counter = 1
        $("#description").blur(function() {
            $.post("newForm.do", {
                alert('inside description')
                name : $("#name").val(),
                description : this.value
            }, function() {
            });
        });
        $("#addQuestion")
                .click(
                        function() {
                            alert('inside addquestion')
                            var question = '<div id="question'+counter+'">Question : <input type="text" name="questionText" value=""/>Answer Type : <input type="text" name="answerType" value=""/><input type="button" name="save" value="Save"/></div>'
                            $("#wrapper").append(question)
                            // only at this point, save button is created
                            $("input[name=save]").click(function(){
                                $.post("addQuestion.do", {
                                    questionText : $(this).siblings("input[name=questionText]").get(0).value ,
                                    answerType : $(this).siblings("input[name=answerType]").get(0).value
                                    }, function() {
                                    });
                            });
                            counter++
                        }
                )
        $("#submit").click(
                function() {    
                    $.post("submitForm.do") 
                });
    }
</script>
</h:head>
<h:body>
    <h:form>
<p:layoutUnit position="center" style="border-width:0px;">
                <h1>
                    <font size="6">
                    <h:outputLabel for="createform"
                            value="Create New Form" /></font>
                </h1>
                <hr width="98%"></hr>
                <table>
                    <tr>
                        <td width="30%"><pre>
                                <h:outputLabel for="name" value="Name of the form : " />
                        </pre></td>
                        <td align="left">
                <input type="text" id="name" value="" />
                        </td>
                    </tr>
                    <tr>
                        <td width="30%"><pre>
                            <h:outputLabel for="desc" value="Description of the form : " />
                            </pre></td>
                        <td align="left">
                    <input type="text" id="description" value="" /> 
                        </td>
                    </tr>
                    <tr>
                    <td></td>
                            <td> 
                            <div id="wrapper"></div>
                             <input type="button" id="addQuestion" value="Add New Question" />
                             <input type="button" id="submit" value="Submit" />
                            </td>
                    </tr>
                </table>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>
</html>

JSF 和 jQuery 库集成的示例在以下链接中：JSF Bootstrap Jquery Integration

以下是需要注意的要点：

必须添加以下标记以支持 JSF 2.2 中的 HTML （ <html ... xmlns:jsf="http://xmlns.jcp.org/jsf" ）获取更多信息： HTML5 友好标记
在以下标签之间编写jQuery方法的定义：

//<![CDATA[ $(document).ready(function() { }); //]]>

使用以下方法加载脚本，以下任何一项，

    <a4j:loadScript src="resource:///jquery/jquery-1.4.2.min.js" />
    <a4j:loadStyle src="/jquery/jquery-ui-1.8.5.custom.css" />
    <a4j:loadScript src="resource:///jquery/jquery-ui-1.8.5.custom.min.js" />

相关内容

最新更新

热门标签：