JQuery date picker is not showing?

JavaScript
,
1

Hi there

this is my JSP cpde

<%@ 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/mainfile.css"/>
<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>
</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/UploadServlet" method="get">
  <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>

this is my external.js

$(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
    $("#add").click(function () {
        $('#items').append(templates['emp_detail'].clone());
    });
    
    //Click function on delete button
    $(document).on('click', '.delete', function () {
        $(this).parent().remove();
    });
    
    
    //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 block is called when user will check on 'from' fields in past Employment blocks
    $("input[id='user_pastorg_from']").on("click", function(){
        $('#user_pastorg_from').datepicker();
       });
    
  //This block is called when user will check on 'to' fields in past Employment blocks
    $("input[id='user_pastorg_to']").on("click", function(){
        $('#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');
        }
     });
});

everything is working fine including JQuery effects but the only thing is datepicker() is not showing

Where is code-horror?

2

Are you seeing any errors in the console?

3

Can you possibly cut out all the irrelevant code, so it’s much easier on the eye to read what you are doing?

And I found the problem, is that you’re not called the id tag “user_dob” in your javascript

4

@Pullo

Hi Sorry for late reply.I was wired in some another projects.

Not so much I am jst seeing these two

"
Use of inputEncoding is deprecated. opt_content.js:1:0
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
"
But I don’t think so this is problem because in another case it is working fine but not with my Forms.

5

@cssbonding:

Thanks for reply.

But I am trying to show datepicker on id user_pastorg_from and user_pastorg_to in these

6

Can you provide a fiddle or other example of it not working?

7

You need to add these three lines to the head part

        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Plus keep these lines inside the internal page

  $(document).ready(function () {

    
    $('#user_pastorg_from').datepicker();
    $('#user_pastorg_to').datepicker();
  //This block is called when user will check on 'from' fields in past Employment blocks

    $("input[id='user_pastorg_from']").on("click", function(){
        $('#user_pastorg_from').datepicker();
       });
    
  //This block is called when user will check on 'to' fields in past Employment blocks
  

      $("input[id='user_pastorg_to']").on("click", function(){
            $('#user_pastorg_to').datepicker();
           });
        
    
    });
8

Here is my evidence it is working. I did take out a lot of code, probably suggesting a conflict somewhere in your code or an error

9

I am trying soon will get back with code

10

Related issue in new topic: JQuery date picker not showing

This topic is now closed. New replies are no longer allowed.