2

I have the following simple Javascript code that allows only digits to be entered into the specified TextField. I have used it earlier in many places such as Servlet, JSP, JSTL/EL and even in PHP and it worked fine as expected. In JSF however, I less concerned with Javascript in which some characters need to be escaped. I tried my best to get it run but I couldn't. Here is the Javascript code along with JSF stuff.

<?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 is not being compiled. It parses the following error.

An Error Occurred:

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

I have even placed the Javascript code in a separate js file and included that file in this page. I have also replaced <script></scrip> with <h:outputScript></h:outputScript> still the same problem remains.

I have also tried the following to see whether the Javascript function is being called or not using alert(); removing the error parsing code from the function but the function itself wasn't even called and the alert message wasn't displayed.

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

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

</script>

Which necessary changes are required in that Javascript to get it run as expected?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Lion
  • 18,729
  • 22
  • 80
  • 110

3 Answers3

4

This is XHTML, so you need to either

  • Wrap the script contents in CDATA tags:

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

  • Or, move the script to an external file, and include it using <h:outputScript />.

Community
  • 1
  • 1
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • I tried as you say and the parse error disappeared but the function wasn't yet called which should have been called on the `keypress` event of the specified `TextField' Can you find some clues please? – Lion Dec 22 '11 at 04:56
  • There's something wonky with the selector: `$("#myForm:txtDemo")`. It won't match any elements because `:txtDemo` is not a recognized pseudo-class. What are you trying to select? The `
    ` or the ``?
     – Matt Ball Dec 22 '11 at 04:58
  • Its the way to select an element enclosed within a form tag in JSF. I'm trying to select a `TextField` with the id `txtDemo` enclosed within the form with the id `myForm`. It can be achieved in JSF like this `myForm:txtDemo` – Lion Dec 22 '11 at 05:03
  • Don't confuse JSF with JavaScript/jQuery. Try this selector: `$('#txtDemo')`. If that doesn't work, look at the text field's ID **in the generated HTML** that the browser sees (use the browser's View Source). If the ID really is `myForm:txtDemo` then you need to [escape the colon in the selector](http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F). – Matt Ball Dec 22 '11 at 05:15
  • I have already tried this `$('#txtDemo')`. It doesn't work and the textfield is `myForm:txtDemo`. I did view source and found that id. – Lion Dec 22 '11 at 05:17
  • Also tried this `#myForm\\:txtDemo` still it wasn't. Everything looks fine. – Lion Dec 22 '11 at 05:20
  • I'm still unable to run that function. Anyway, you tried the best to help me. +1 and accepted. – Lion Dec 24 '11 at 05:42
1

If you are using jQuery, you need to refer to an element's ID with special characters like this:

<h:form id="myForm">

   <h:inputText id="myInput" />

</h:form>

<script type="text/javascript>

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

</script>

This is documented here (on top of the page).

Mr.J4mes
  • 9,168
  • 9
  • 48
  • 90
  • I already tried this `#myForm\\:txtDemo`. It doesn't work. Can you find something else wrong in the above code? It looks fine but since its JSF, it may require some additional things I think. I have been using JSF for over 2 years but I used Javascript/jQuery quite less frequently in JSF. – Lion Dec 22 '11 at 08:12
  • Have you included the jQuery js file in the header? – Mr.J4mes Dec 22 '11 at 08:18
  • I tried my best though the Javascript function itself isn't being even called. Its the biggest problem. – Lion Dec 22 '11 at 08:20
  • What I want is to allow a `TextField` to accept only digits and for that I'm trying to execute that only function. It works fine. There is no problem at all in the code it contains that I already used it in many places but it isn't working here. – Lion Dec 22 '11 at 08:25
  • Its a single function therefore I didn't place it in a separate `js` file. It was kept with the `JSF` page itself. – Lion Dec 22 '11 at 08:27
  • Anyway, what you're trying to mention is correct and I voted your post up. – Lion Dec 22 '11 at 08:34
  • hmm... what I meant is that you should have something like: `` in your header. It's like the jar file for jQuery to work. Otherwise, your call to jQuery function will not work. – Mr.J4mes Dec 22 '11 at 08:40
  • But its working in Servlet, JSP, JSTL/EL, PHP etc without the external `js` file. Is here mandatory to place that function in a separate `js` file? Well, I will try it and respond accordingly later. – Lion Dec 22 '11 at 08:46
  • I think in your other JSP files, you have included it somewhere. It's compulsory to import the jQuery library before using it. You only need to include the above line in the header. Your function that uses jQuery does not need to be in a separate file. – Mr.J4mes Dec 22 '11 at 08:49
  • I understand what you say and will try to do as you say. – Lion Dec 22 '11 at 08:52
0

I found the same problem, and I resolved with:

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
}

It's not cool, but it works.

skuntsel
  • 11,624
  • 11
  • 44
  • 67
giuliana
  • 1