1

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

<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>
4

2 回答 2

4

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

以下是需要注意的几点:

  • 您必须添加以下标记以支持来自 JSF 2.2 ( <html ... xmlns:jsf="http://xmlns.jcp.org/jsf") 的 HTML 更多信息:HTML5-Friendly Markup
  • 在以下标签之间写下 jQuery 方法的定义:

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

于 2019-04-15T13:49:29.650 回答
0

使用以下内容加载脚本,以下任何一项,

    <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" /> 
于 2012-09-26T18:16:45.643 回答