2011-12-22 51 views
2

次のような単純なJavascriptコードでは、数字だけを指定してTextFieldに入力できます。私はサーブレット、JSP、JSTL/EL、さらにはPHPのような多くの場所でそれを以前に使っていましたが、期待通りにうまくいきました。しかし、JSFでは、いくつかの文字をエスケープする必要があるJavascriptにはあまり関心がありませんでした。私はそれを実行するために全力を尽くしたが、私はできなかった。ここにJSFのものと一緒にJavaScriptコードがあります。エンティティ名はエンティティ参照の '&'の直後にある必要があります

<?xml version='1.0' encoding='UTF-8' ?> 

<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>Demo</title> 

<script type="text/javascript" language="javascript"> 

    $(document).ready(function() 
    { 
     $("#myForm:txtDemo").keypress(function(event) 
     { 
      if (event.keyCode==46 || event.keyCode==8|| event.keyCode==9 || event.keyCode>=35 && event.keyCode<=40) 
      { 
       // let it happen, don't do anything 
      } 
      else 
      { 
       if (event.charCode<48 || event.charCode>57 || event.charCode==16) 
       { 
          event.preventDefault(); 
       } 
      }      
     }); 
    }); 

</script> 

</h:head> 

<h:body> 
    <h:form id="myForm"> 

     <br/><br/><br/> 
     <h:inputText id="txtDemo" required="true" requiredMessage="Mandatory." validatorMessage="The field should contain al least 10 digits"> 
      <f:validateLength maximum="10" minimum="2"/> 
      <f:validateRegex pattern="[0-9]*"/> 
      <f:ajax event="valueChange" execute="txtDemo msg" render="txtDemo msg"/> 
     </h:inputText><br/> 

     <h:message id="msg" for="txtDemo" showDetail="true" style="color:red"/><br/> 

     <h:commandButton id="btnSubmit" value="Submit"/> 

    </h:form> 
</h:body> 


のJavascriptはコンパイルされていません。次のエラーを解析します。

An Error Occurred: 

Error Parsing /Restricted/TempTags.xhtml: Error Traced[line: 14] The entity name 
must immediately follow the '&' in the entity reference. 

私も別のjsファイル内のJavaScriptコードを配置し、このページでは、そのファイルが含まれています。私はまた<script></scrip><h:outputScript></h:outputScript>と置き換えましたが、同じ問題が残っています。


は、私はまた、Javascriptの関数が呼び出されているかどうかを確認するために、次または関数が、関数自体からのエラー解析コードを削除 alert();を使用していないしようとしているにも呼び出されていないと警告メッセージがありませんでした。表示されます。必要な変更が期待どおりに実行得るためにそのJavaScriptで必要とされている

<script type="text/javascript" language="javascript"> 

    $(document).ready(function() 
    { 
     $("#myForm:txtDemo").keypress(function(event) 
     { 
      alert(); 
     }); 
    }); 

</script> 

+2

JSを「CDATA」タグ(Googleでは構文)にラップするとどうなりますか? – Blender

+1

@Blenderまたは単に[scroll down](http://stackoverflow.com/a/8599528/139010) ';-)' –

+1

@MДΓΓLLLLLL:卑劣な回答促進、私はすきです。 +1 – Blender

答えて

4

あなたはどちらか

  • Wrap the script contents in CDATA tagsに必要なので、これは、XHTMLです:

    <script> 
    //<![CDATA[ 
    $(document).ready(function() 
    { 
        // snip... 
    } 
    //]]> 
    </script> 
    
  • または、外部ファイルにスクリプトを移動し、それが<h:outputScript />を使用しています。

+0

あなたが言うようにしてみたところ、解析エラーは消えましたが指定された 'TextField 'の' keypress'イベントで呼び出されたはずの関数はまだ呼び出されていませんでした。 – Lion

+0

'$("#myForm:txtDemo ")'というセレクタにはうんざりなものがあります。 ':txtDemo'は認識された擬似クラスではないので、どの要素とも一致しません。あなたは何を選択しようとしていますか? 「

」または「」? –

+0

JSFでフォームタグに囲まれた要素を選択する方法です。私は 'myForm'でフォーム内に囲まれた' txtDemo'を持つ 'TextField'を選択しようとしています。このようなJSFで実現できるのは 'myForm:txtDemo' – Lion

1

あなたはjQueryのを使用している場合は、このような特殊文字を含む要素のIDを参照する必要があります。

<h:form id="myForm"> 

    <h:inputText id="myInput" /> 

</h:form> 

<script type="text/javascript> 

    $("#myForm\\:myInput").val("some value"); 

</script> 

これは、(ページの一番上)hereを文書化されています。

+0

この '#myForm \\:txtDemo'を試しました。それは動作しません。あなたは上記のコードで何か間違ったことを見つけることができますか?それはうまく見えますが、そのJSF以来、私は思ういくつかの追加事項が必要になるかもしれません。私はJSFを2年以上使用してきましたが、Javascript/jQueryをJSFで使用する頻度は非常に低いです。 – Lion

+0

ヘッダーにjQuery jsファイルを含めましたか? –

+0

Javascriptの機能自体は呼び出されていませんが、私は最善を尽くしました。その最大の問題。 – Lion

0

私は同じ問題を発見した、と私はで解決:それはクールではないですが、それが動作

if (event.keyCode==46 || event.keyCode==8|| event.keyCode==9 || event.keyCode>=35 &amp;&amp; event.keyCode<=40) { 
    // let it happen, don't do anything 
} 

関連する問題