JQuery date picker is not showing? - JavaScript - SitePoint Forums | Web Development & Design Commun

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
慷慨的黑框眼镜 · nginx关闭后仍然能够访问localhos ...· 昨天 ·
迷茫的鸵鸟 · nginx反向代理设置与参数优化_51CTO ...· 2 天前 ·
安静的莲藕 · 第 2 章：Hello, Flask! - ...· 1 周前 ·
不开心的拖把 · GitHub - ...· 1 周前 ·
爽快的大熊猫 · [老]post传参和get传参- ...· 1 周前 ·
面冷心慈的登山鞋 · Ask· 2 月前 ·
快乐的板凳 · Download Frying Pan ...· 3 月前 ·
重情义的鸡蛋 · 《漫威金刚狼》：索尼旗下的PS5独占新作|x ...· 4 月前 ·
大鼻子的枕头 · How to install Stable ...· 10 月前 ·
重情义的黄瓜 · telegeramX版本下载-teleger ...· 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>
<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>
<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>
  <div id="main_container">
  <form action="http://localhost:8080/WebFormSpringHibernate/UploadServlet" method="get">
  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">
<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 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>
  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">
  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">
        <label>Name of Company/Organisation:</label>
        <input type="text" class="emp_org"  id="user_pastorg_name" name="user_pastorg_name"/>
        <label>Role:</label>
        <input type="text" class="emp_role" style="margin-left: 168px;" id="user_pastorg_role" name="user_pastorg_role"/>
        <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"/>
        <label>Total in Years:</label>
        <input type="text" class="emp_total" style="margin-left: 110px;" id="user_pasttInY" name="user_pasttInY"/>
        <button class="delete">Delete</button>
<div id="items">
<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>
 <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>
<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>
</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?
              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
              @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.
              
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();