jQuery date Picker is not applying in some parts of code

JavaScript
1

Hi there

this is front end code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ include file="/jsp/include.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/jquery-ui.js"></script>
<link rel="stylesheet" href="http://localhost:8080/WebFormSpringHibernate/css/jquery-ui.css"/> 
<script type="text/javascript" src="http://localhost:8080/WebFormSpringHibernate/js/registration.js"></script>
<link rel="stylesheet" href="http://localhost:8080/WebFormSpringHibernate/css/mainfile.css"/>
</head>
<body>
<div id="page-wrap">
<ul class="dropdown">
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/registration.jsp">Add Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/searchemployee.jsp">Search Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/deleteemployee.jsp">Delete Employee</a></li>
<li><a href="http://localhost:8080/WebFormSpringHibernate/jsp/updateemployee.jsp">Update Employee</a></li>
</ul>
  </div>
  <div id="main_container">
  <form action="http://localhost:8080/WebFormSpringHibernate/AddEmployee" method="post" enctype="multipart/form-data">
  <br>
  <br>
  Id:<input type="text" style="margin-left: 110px;" name="user_id" id="user_id" placeholder="User_Id"><br>
  First_Name<input type="text" style="margin-left: 53px;" name="user_first_name" id="user_first_name"><br>
  Last_Name<input type="text" style="margin-left: 53px;" name="user_last_name" id="user_last_name"><br>
  DOB<input type="text" style="margin-left: 92px;" name="user_dob" id="user_dob"><br>
  Age<input type="text" style="margin-left: 99px;" name="user_age" id="user_age"/><br>
  Email<input type="text" style="margin-left: 93px;" name="user_email" id="user_email"/><br>
  Mobile<input type="text" style="margin-left: 84px;" name="user_mobile" id="user_mobile"/>
  <input type="button" id="mobile_Add" value="AddAnother">
<br>
<div class="mobile_block block_template">
    <input type="text" style="margin-left: 135px;" name="user_mobile_other" id="mobile_text" />
    <input type="button" value="Delete" id="mob_del" />
</div>
<div id="mobile_numbers"></div>
  Marital Status<select style="margin-left: 40px;" name="user_marital_status">
  <option value="married">Married</option>
  <option value="unmarried">UnMarried</option>
  </select><br><br>
  <label>Id Proof</label>
  <select name="user_id_proof" style="margin-left: 70px;">
     <option>Votor Id</option>
     <option>Driving License</option>
     <option>Passport</option>
      <option>Aadhar Card</option>
  </select><br><br>
  High_School
  <input type="radio" value="true" id="complete_high_yes" name="user_high_status" style="margin-left: 39px;"><label for="high_yes">Yes</label>
  <input type="radio" value="false" id="complete_high_no" name="user_high_status" checked="checked"><label for="high_no">No</label>
  <div id="high_school">
  Name of School:<input type="text" style="margin-left: 23px;" name="user_high_ins_name" id="user_high_ins_name"> 
  Board:<input type="text" name="user_high_board_name" id="user_high_board_name">
  Year<select name="user_high_year">
  <option>1974</option><option>1975</option><option>1976</option><option>1977</option><option>1978</option><option>1979</option><option>1980</option><option>1981</option>
  <option>1982</option><option>1983</option><option>1984</option><option>1985</option><option>1986</option><option>1987</option><option>1988</option><option>1989</option>
  <option>1990</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option>
  <option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option><option>2010</option>
  <option>2011</option><option>2012</option><option>2013</option><option>2014</option>
  <option selected="selected">2015</option>
  </select>
  Percentage:
  <input type="text" name="user_high_per" style="width: 50px;" id="user_high_per"><br>
  </div>
  <br>
  Intermediate
  <input type="radio" value="true"  name="user_inter_status" id="complete_inter_yes" style="margin-left: 40px;"><label for="complete_inter_yes">Yes</label>
  <input type="radio" value="false"  name="user_inter_status" id="complete_inter_no" checked="checked"><label for="complete_inter_no">No</label>
  <div id="inter_school">
  Name of School:<input type="text" style="margin-left: 27px;" name="user_inter_ins_name" id="user_inter_ins_name"> 
  Board:<input type="text" name="user_inter_board_name" id="user_inter_board">
  Year<select name="user_inter_year">
  <option>1974</option><option>1975</option><option>1976</option><option>1977</option><option>1978</option><option>1979</option><option>1980</option>
  <option>1981</option><option>1982</option><option>1983</option><option>1984</option><option>1985</option><option>1986</option><option>1987</option><option>1988</option><option>1989</option><option>1990</option>
  <option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option>
  <option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option><option>2010</option>
  <option>2011</option><option>2012</option><option>2013</option><option>2014</option>
  <option selected="selected">2015</option>
  </select>
  Percentage:
  <input type="text" name="user_inter_per" style="width: 50px;" id="user_inter_percent">
  </div>
  <br>
  Past Employment:
  <input type="radio" value="true"  name="user_past_employ_status" id="pemp_yes" style="margin-left: 12px;"><label for="pemp_yes">Yes</label>
  <input type="radio" value="false" name="user_past_employ_status" id="pemp_no" checked="checked"><label for="pemp_no">No</label>
  
<div class="template">
    <div class="emp_detail">
        <br>
        <label>Name of Company/Organisation:</label>
        <input type="text" class="emp_org"  id="user_pastorg_name" name="user_pastorg_name"/>
        <br>
        <label>Role:</label>
        <input type="text" class="emp_role" style="margin-left: 168px;" id="user_pastorg_role" name="user_pastorg_role"/>
        <br>
        <label>From:</label>
        <input type="text" class="emp_from" style="margin-left: 160px;" id="user_pastorg_from" name="user_pastorg_from"/>
        <label>To:</label>
        <input type="text" class="emp_to" id="user_pastorg_to" name="user_pastorg_to"/>
        <br>
        <label>Total in Years:</label>
        <input type="text" class="emp_total" style="margin-left: 110px;" id="user_pasttInY" name="user_pasttInY"/>
        <br>
        <button class="delete">Delete</button>
    </div>
</div>
<div id="items">
</div>
<button type="button" id="add">Add</button>

<fieldset style="border-width: 10px; border-color: green;border: solid;">
  <legend >Current Address:</legend>
  Vill/Street Name: <input type="text" id="user_cur_street" name="user_cur_street"><br>
  City: <input type="text" style="margin-left: 79px;" id="user_cur_city" name="user_cur_city"><br>
  State: <input type="text" style="margin-left: 75px;" id="user_cur_state" name="user_cur_state"><br>
  Pin: <input type="text" style="margin-left: 84px;" id="user_cur_pin" name="user_cur_pin"><br>
 </fieldset>
 
 <br>
 <fieldset style="border-width: 10px; border-color: green; border: solid;">
 <legend>Permanent Address:</legend>
  Vill/Street Name: <input type="text" id="user_per_street" name="user_per_street"><br>
  City: <input type="text" style="margin-left: 79px;" id="user_per_city" name="user_per_city"><br>
  State: <input type="text" style="margin-left: 73px;" id="user_per_state" name="user_per_state"><br>
  Pin: <input type="text" style="margin-left: 83px;" id="user_per_pin"name="user_per_pin"><br>
 </fieldset>
<br>
<label>Profile Picture</label><input type="file" id="user_profile_pic" style="margin-left: 40px;" name="user_profile_pic"/><br/><br/>
<input type="submit" value="Submit" style="margin-left: 250px;"/>
</form> 
 </div>
</body>
</html>

and this is my external registration.js file

$(document).ready(function () {
    
    function initTemplates() {
        $('.template').each(function () {
            var template = $(this).children(),
                key = template.attr('class') || 'template' + templates.length;
            templates[key] = template;
            $(this).remove();
        });
    }
    
    var templates = {};
    initTemplates();

    //when the Add Field button is clicked on Past Employment block
    $("#add").click(function () {
        $('#items').append(templates['emp_detail'].clone());
    });
    
    //Click function on delete button on Past Employment block
    $(document).on('click', '.delete', function () {
        $(this).parent().remove();
    });
    
    $("#user_dob").datepicker();
    
    
  
   //This block is called when user will check or uncheck the employment values
    $("input[name='user_past_employ_status']").on("click", function(){
        var sure = true;
        if(this.value === "false"){
          var sure = confirm("You sure?");
          if(sure){
              this.checked;
              $("#items").empty();
              $('#add').css('display','none');
            } else {
              return false;
            }
        }
        else{
             $('#add').css('display','block');
             $("#user_pastorg_from").datepicker();
             $("#user_pastorg_to").datepicker();
            }
       });
    
  
   //this Function is called to addition of mobile numbers
    $("#mobile_Add").click(function () {
        var c = $(".block_template").clone();
        c.removeClass("block_template");
        $("#mobile_numbers").append(c);
    });

    //This function is called when delete button is called in mobile
    $('#mobile_numbers').on('click', '#mob_del', function () {
        // remove parent container
        $(this).parent('.mobile_block').remove();
    });
    
    //This block is called when user check High School Yes or No
    $("input[name='user_high_status']").on("click", function(){
        
        if(this.value === "true"){
          $('#high_school').css('display','block');
        }
        else{
            $('#high_school').css('display','none');
        }
     });
    
    //This block is called when user check Inter School Yes or No
    $("input[name='user_inter_status']").on("click", function(){
        
        if(this.value === "true"){
          $('#inter_school').css('display','block');
        }
        else{
            $('#inter_school').css('display','none');
        }
     });
});

although DatePicker is working fine on field “user_dob” but this is not working with “user_pastorg_from” and “user_pastorg_to” code is fine.I have checked browser console also.

Where is conflict?

Thanks

2

do you know which parts of your conditions are triggered? the date pickers are only added if, and only if, the value of the input field does not equal the string “false”.

3

yes I am trying to show datePicker on user_pastorg_from and user_pastorg_to I have also tried right seprate code outside of false consition block its not working.You can check but datepicker is working for user_dob fields.

I think there is some conflict in my code but I am not able to get where it is

4

The template cannot have any id attributes inside of it, for they have to be unique. Also, when you enable datePicker on a field, that isn’t copied over when elements are cloned.

What you have to do is to remove the unique identifiers from the template area, and use some other way to enable the datePicker when the template is being added.

The following as the add section seems to do the job well, where we use the name attribute of the field instead.

$("#add").click(function () {
    $('#items').append(templates['emp_detail'].clone());
    $('[name="user_pastorg_from"]').datepicker();
    $('[name="user_pastorg_to"]').datepicker();
});
1 Like
5

Thanks…@Paul_Wilkins
You are awesome problem solved…

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.