2011-10-27 7 views
0

次のJava Server Faces(JSF)マークアップの出力では、「Description」フィールドは最初はレンダリングされず、入力時にAjaxによってレンダリングされます「名前」フィールドに入力します。JSF(Ajaxified Java Server Faces)コンポーネントでjQuery操作が失敗する

[説明]フィールドに(5文字以上)を入力すると、jQueryコードに従ってフィールドが赤色で表示されます。しかし、それは起こっていません。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core"> 

    <h:head> 
     <title>title</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      jQuery (document).ready(function(){ 

     jQuery("#description").keypress(function(){ 

      if (jQuery(this).val().length >5){ 

       jQuery(this).css("background-color", "red"); 
      }else{ 
      jQuery(this).css("background-color", "white"); 
      } 
      console.log(jQuery(this).val().length); 
      }) 
    }) 
</script> 
    </h:head> 
    <h:body> 

      <h:form prependId="false"> 
      Name: <h:inputText id="name" value="#{viewScope.name}"> 
       <f:ajax execute="@this" render="@form"/> 
      </h:inputText> 
      <br/> 
      <h:outputText id="descriptionLabel" value="Description:" rendered="#{empty viewScope.name ? false : true}"/> 
      <h:inputText id="description" value="#{viewScope.description}" rendered="#{empty viewScope.name ? false : true}"/> 
     <!-- <h:outputText id="descriptionLabel" value="Description:" /> 
      <h:inputText id="description" value="#{viewScope.description}" />--> 
     </h:form> 

      </h:body> 
</html> 

答えて

2

keypressイベントバインディングをそのままライブに置き換えてください。

jQuery("#description").live('keypress', function() { ... }); 

ライブ機能は、現在および将来の、現在のセレクタに一致するすべての要素のイベントにハンドラをアタッチし、あなたのケースでdescription要素がまだDOMで提示されていません。

+0

素晴らしい!ありがとうございました! – siva636

関連する問題