integrating jquery with jsf

Question

When I have a JSP page with jQuery, I don't have any problem executing the page. When I use the same code in a Facelets page with JSF, jQuery doesn't seem to work. It is not recognizing the id attribute of the <input> tag. The following is the code of the Facelets page.

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

@Gung: please don't format non-code as code. Library/framework names like "JSF", "jQuery", etc are not code! — BalusC, Sep 26 '12 at 20:57
how else to markup? kinda feels right to have those jump out at you. But i see what you did there. re: your edit — Gung Foo, Sep 26 '12 at 20:58
Did you check the rendered HTML? Jsf components got generated Ids when rendered. — ElderMael, Sep 26 '12 at 20:59
@mael: in the particular code snippet, OP uses plain HTML ``, not JSF `` — BalusC, Sep 26 '12 at 21:02

score 4 · Answer 1 · answered Apr 15 '19 at 13:49

An example of the integration of JSF and the jQuery library is in the following link : JSF Bootstrap Jquery Integration

Here are the points to be noted :

You must add the following tag to support HTML from JSF 2.2 (<html ... xmlns:jsf="http://xmlns.jcp.org/jsf") For more information : HTML5-Friendly Markup
write definitions of jQuery methods between the following tags :

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

score 0 · Answer 2 · answered Sep 26 '12 at 18:16

0

Use the following to load the script , any of the following,

    <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" />

answered Sep 26 '12 at 18:16

Rahul

1,549
3
17
35

While this may theoretically indeed solve OP's concrete problem, provided that the OP is indeed using exactly the same RichFaces version as you're using/expecting (this information is nowhere available in the question nor OP's question history), you are not *explaining* in any way **why** this solves OP's concrete problem. Please edit, improve and do so, otherwise the concrete problem is never understood by the OP and the future readers and the right solution matching OP's RichFaces version is also hard to understand/find. – BalusC Sep 26 '12 at 21:03

integrating jquery with jsf

2 Answers2