將jquery與jsf集成起來

當我有jQuery的JSP頁面時，我沒有任何執行頁面的問題。當我在JSF的Facelets頁面中使用相同的代碼時，jQuery似乎不起作用。它不識別<input>標記的id屬性。以下是Facelets頁面的代碼。將jquery與jsf集成起來

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

來源

2012-09-26 user1700437

你必須使用加載腳本， – Rahul

@Gung：請不要將非代碼格式化爲代碼。像「JSF」，「jQuery」等庫/框架名稱不是代碼！ – BalusC

如何標記？有點覺得有人跳到你身邊。但我看到你在那裏做了什麼。 re：你的編輯 –

使用以下加載腳本，以下任一，

<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-26 18:16:45 Rahul

雖然這在理論上可以解決OP的具體問題，但前提是OP的確使用完全相同的RichFaces版本使用/期望（這些信息在問題和OP的問題歷史中都沒有），你不是以任何方式解釋*爲什麼這解決了OP的具體問題。請編輯，改進和這樣做，否則具體問題永遠不會被OP理解，未來的讀者和與OP的RichFaces版本匹配的正確解決方案也很難理解/發現。 – BalusC

將jquery與jsf集成起來

回答

相關問題