Javascript in .jspx

Question

I have a input box for Floor Number and I want to disable the first character inside it. So I use this javascript:

   <script type="text/javascript">
 //<![CDATA[        
$("#_floorNumber_id).on("keydown", function(e) {
    if (($(this).get(0).selectionStart == 0 && (e.keyCode < 35 || e.keyCode > 40))
        || ($(this).get(0).selectionStart == 1 && e.keyCode == 8)) {
        return false;
    }
});

$("#_floorNumber_id").bind("contextmenu", function(e) {
    e.preventDefault();
});
    //]]>

    </script>

But it seem like the script is not being read. I tried putting alert to it but the alert is not showing either. This is how my .jspx looks like:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:field="urn:jsptagdir:/WEB-INF/tags/form/fields" xmlns:form="urn:jsptagdir:/WEB-INF/tags/form" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <jsp:output omit-xml-declaration="yes"/>

   <script type="text/javascript">
 //<![CDATA[        
$("#_floorNumber_id").on("keydown", function(e) {
    if (($(this).get(0).selectionStart == 0 &amp;&amp; (e.keyCode < 35 || e.keyCode > 40))
        || ($(this).get(0).selectionStart == 1 &amp;&amp; e.keyCode == 8)) {
        return false;
    }
});

$("#_floorNumber_id").bind("contextmenu", function(e) {
    e.preventDefault();
});
    //]]>

    </script>

    <div id="wrapper">
        <div class="container-fluid">
            <div>
                <ol class="breadcrumb">
                  <li class="disabled"><a>Floor</a></li>
                  <li><a href="/hms/floors?page=1&amp;size=${empty param.size ? 10 : param.size}">List of Floors</a></li>
                  <li class="active"><span>Register Floor</span></li>
                 </ol>
            </div>

                  <form:create id="fc_hms_domain_Floor" modelAttribute="floor" path="/floors" render="${empty dependencies}" >
                      <field:inputFloor field="floorNumber" id="c_hms_domain_Floor_floorNumber" max="30" min="3" required="true" value="${floor.floorNumber}"/>
                      <field:textarea field="description" id="c_hms_domain_Floor_description" required="true" />
                      <field:textarea field="floorComments" id="c_hms_domain_Floor_floorComments" required="true" />
                  </form:create>
                  <form:dependency dependencies="${dependencies}" id="d_hms_domain_Floor" render="${not empty dependencies}" />

           </div>   
       </div>   
</div>

I'm just new with using javascript in .jspx. I hope someone can help me. Thank you.

Answer 1

Well it looks like your script runs before you add the element on the page. It is like calling a person's name before they enter in the room. The element will not be found. Either the script needs to be after the element, you need to use document ready, window onload, or event delegation.

After:

<input>
<script>
   //your code here
</script>

document ready

$( function(){
   //your code here
});

onload

$(window).on("load" , function() {
   //your code here
});

or event delegation

$(document).on("click", "#_floorNumber_id", "keydown", function(e){
  console.log(e.which);
});