Search code examples
javascripthtmlcssstruts2struts

How to give a javascript function and css style in struts2 property tag


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script type="text/javascript">
  $(function () {
        $( "#startDate" ).datepicker({
              changeMonth: true,
              changeYear: true,
              dateFormat: 'yy-mm-dd'
            });
        });
  </script>
 <style type="text/css">
        .search_textbx
{
 background-image:url('/SalesPropeller/calendar.jpg');
    background-repeat:no-repeat;
   background-position:right;  

}

        </style>

In the above code,there is a javascript function and css style in which i am using those in <input> tag as shown below

<input type="text" id="startDate" name="startDate" class="search_textbx" size="15" readonly="readonly"/>

Here my question is i have struts2 tags and when i am using the same id="startDate" and class="search_textbx" in the below code,it is showing an error.I am completely new to struts2 so any help will be appreciated.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="html" uri="/WEB-INF/struts-html.tld" %>
<%@taglib prefix="bean" uri="/WEB-INF/struts-bean.tld" %>
<html:html>
<body>
    <td style="padding-left:50px;">Lead Date </td>
    <td><html:text property="leadDate" size="17.5"/></td>
    <td><html:errors property="leadDate" /></td>
</body>
</html:html>

Solution

  • Give the id/class to the td element and change the css/js to select the input inside the td.

    jsp:

    <td id='startDate'><html:text property="leadDate" size="17.5"/></td>
    <td class='search_textbx'><html:text property="leadDate" size="17.5"/></td>
    

    css:

    .search_textbx input
    {
     background-image:url('/SalesPropeller/calendar.jpg');
     background-repeat:no-repeat;
     background-position:right;  
    }
    

    script:

    <script type="text/javascript">
      $(function () {
            $( "#startDate input" ).datepicker({
                  changeMonth: true,
                  changeYear: true,
                  dateFormat: 'yy-mm-dd'
                });
            });
     </script>