i'm trying stuff jquery-ui calendar. when page load gives me these errors.
referenceerror: $ not defined
$('document').ready(function () {
i tried many answers googling. still got error.
<%@page import="com.misyn.ems.service_impl.casualleaveserviceimpl"%> <%@page import="com.misyn.ems.domain.emp.person"%> <%@page import="java.util.list"%> <%@page import="com.misyn.ems.service.casualleaveservice"%> <%@page contenttype="text/html" pageencoding="utf-8"%> <!doctype html> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>casual leave application</title> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="${pagecontext.request.contextpath}/resources/css/casual.css"> <body> <jsp:include page="layout"></jsp:include> <div id="wrapper"> <div id="page-wrapper"> <div class="container-fluid"> <!-- page heading --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> leave registration </h1> <ol class="breadcrumb"> <li> <i class="fa fa-dashboard"></i> <a href="index.jsp">dashboard</a> </li> <li class="active"> <i class="fa fa-edit"></i> leave registration.. </li> </ol> </div> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> <div id="wrapper"> <div id="page-wrapper"> <div class="modal fade" id="addmodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true"> <div class="modal-dialog" style="border: black; "> <div class="modal-content" > <form> <div class="modal-body"> <h2 style=" font-style: oblique;color:#0066ff;text-align: center;">pending leave details</h2> <br/> <br/> <div class="row"> <table class="table table-striped table-bordered" style="width:75%" align ="center" > <thead> <tr> <th>date of submission</th> <th>from days</th> <th>to days</th> <th>day count</th> </thead> <tbody> <tr> <td>00-00-0000</td> <td>00-00-0000</td> <td>00-00-0000</td> <td>0</td> </tr> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </form> </div> </div> </div> <div style="width: 90%; float: inside;"> <form role="form"> <div class="form-group"> <div class="jumbotron" style="padding: 25px;"> <div class="row"> <div class="col-sm-6"> <label>select leave type</label> <div class="dropdown"> <button class="btn btn0 btn-default dropdown-toggle" type="button" id="menu0" data-toggle="dropdown">--select-- <span class="caret"></span></button> <ul class="dropdown-menu dropdown-inverse0" role="menu" aria-labelledby="menu0"> <li role="presentation"><a data-myattribute0="casual" class="list0" href="#">casual leave</a></li> <li role="presentation"><a data-myattribute0="annual" class="list0" href="#">annual leave</a></li> <li role="presentation"><a data-myattribute0="medical" class="list0" href="#">medical leave</a></li> </ul> </div> </div> </div> <br/> <div class="row"> <div class="col-sm-6"> <label>employee name</label> <input type="text" class="form-control input-md" readonly id="employee_name"/> </div> <div class="col-sm-6"> <label>select employee name</label> <div class="dropdown"> <i class="dropdown-arrow dropdown-arrow-inverse"></i> <button class="btn btn1 btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" >--select-- <span class="caret"></span></button> <ul class="dropdown-menu dropdown-inverse1" role="menu" aria-labelledby="menu1"> <c:foreach items="${personlist}" var="person"> <li role="presentation"><a data-myattribute1="${person.getid()}" class="list1" href="#">${person.getname()}</a></li> </c:foreach> </ul> </div> </div> </div> <br> <div class="row"> <div class="col-sm-2"> <label>employee no.</label> <input type="text" class="form-control input-sm" id="employee_no" readonly/> </div> <div class="col-sm-2"> <label>epf no.</label> <input type="text" class="form-control input-sm" id="epf_no" readonly/> </div> <div class="col-sm-2"> </div> <div class="col-sm-4" id="show_error"> </div> </div> </div> </div> <div class=" jumbotron" style="padding: 25px;"> <div class="form-group"> <table class="table table-striped table-bordered" style="width:75%" align ="center" id="mytable"> <thead> <tr> <th>entitlement day</th> <th>no of used days</th> <th>bal avb. days</th> <th>pending days</th> <th>available days</th> </thead> <tbody> <tr style="text-align: center;"> <td id="entitled">$$</td> <td id="used">$$</td> <td id="bal">$$</td> <td class="pending" data-toggle="modal" id="pend">$$</td> <td class="avb_days" id="avb">$$</td> </tr> </tbody> </table> </div> </div> <div class=" jumbotron" style="padding: 25px;"> <div class="form-group"> <div class="row"> <div class="col-sm-4"> <label>from</label> <input type="text" id="datepicker1" name="datepicker1" readonly /> </div> <div class="col-sm-4"> <label>to.</label> <input type="text" id="datepicker2" name="datepicker2" readonly/> </div> <div class="col-sm-4"> <label id="lblerror" style="visibility:hidden; color: red; font-size: large">you'r applying leave amount more available leave amount. amount go no pay leave. </label> </div> </div> <br/> <div class="row"> <div class="col-sm-4"> <label>select leave amount</label> <div class="dropdown"> <button class="btn btn2 btn-default dropdown-toggle" type="button" id="menu2" data-toggle="dropdown">--select-- <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu2"> <li role="presentation"><a class="list2" href="#">half day morning</a></li> <li role="presentation"><a class="list2" href="#">half day evening</a></li> <li role="presentation"><a class="list2" href="#">whole day</a></li> <li role="presentation"><a class="list2" href="#">short day morning</a></li> <li role="presentation"><a class="list2" href="#">short day evening</a></li> </ul> </div> </div> <div class="col-sm-4"> <label>select leave amount</label> <div class="dropdown"> <button class="btn btn3 btn-default dropdown-toggle" type="button" id="menu3" data-toggle="dropdown">--select-- <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu3"> <li role="presentation"><a class="list3" href="#">half day morning</a></li> <li role="presentation"><a class="list3" href="#">half day evening</a></li> <li role="presentation"><a class="list3" href="#">whole day</a></li> <li role="presentation"><a class="list2" href="#">short day morning</a></li> <li role="presentation"><a class="list2" href="#">short day evening</a></li> </ul> </div> </div> </div> <br/> <div class="row"> <div class="col-sm-4"> <label>select coverup person</label> <div class="dropdown"> <button class="btn btn4 btn-default dropdown-toggle" type="button" id="menu4" data-toggle="dropdown">--select-- <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu3"> <li role="presentation"><a class="list4" href="#">name1</a></li> <li role="presentation"><a class="list4" href="#">name2</a></li> </ul> </div> </div> <div class="col-sm-4"> <label>remarks</label> <textarea class="form-control" rows="5" id="comment" placeholder="enter remarks supervisor.."></textarea> </div> </div> <br/> <div class="row"> <div class="col-sm-1"> <button type="button" class="btn btn-primary ">save</button> </div> <div class="col-sm-1"> <button type="button" class="btn btn-primary ">clear</button> </div> </div> </div> </div> </form> </div> </div></div> <script> $(document).ready(function () { $("#datepicker1,#datepicker2").datepicker({ mindate: 0, beforeshowday: $.datepicker.noweekends, dateformat: "dd-mm-yy" }); });</script> <script> $(document).ready(function () { $('.dropdown-inverse1 li > a').click(function () { var $myvalue = $(this).attr("data-myattribute1"); $.get('casualleavecontroller2', { personid: $myvalue, leave_type: "casual" }, function (data) { if (data !== null) { var values = data.split("-"); $('#employee_no').val(values[0]); $('#epf_no').val(values[1]); $('#employee_name').val(values[2] + " " + values[3]); $('#entitled').text(values[4]); $('#used').text(values[5]); $('#bal').text(values[6]); $('#pend').text(values[7]); $('#avb').text(values[8]); } else { $('#show_error').text("error loading employee data"); } }); }); }); </script> <script> $(document).ready(function () { $('.dropdown-inverse0 li > a').click(function () { var $myvalue = $(this).attr("data-myattribute0"); if ($myvalue === "casual") { $('.btn4').prop('disabled', true); } else if ($myvalue === "medical") { $('.btn4').prop('disabled', true); } else { $('.btn4').prop('disabled', false); } }); }); </script> <script> $('document').ready(function () { $(".dropdown-toggle").dropdown(); });</script> <script> $(function () { $(".list0").click(function () { $(".btn0:first-child").text($(this).text()); $(".btn0:first-child").val($(this).text()); }); });</script> <script> $(function () { $(".list1").click(function () { $(".btn1:first-child").text($(this).text()); $(".btn1:first-child").val($(this).text()); }); });</script> <script> $(function () { $(".list2").click(function () { $(".btn2:first-child").text($(this).text()); $(".btn2:first-child").val($(this).text()); }); });</script> <script> $(function () { $(".list3").click(function () { $(".btn3:first-child").text($(this).text()); $(".btn3:first-child").val($(this).text()); }); });</script> <script> $(function () { $(".list4").click(function () { $(".btn4:first-child").text($(this).text()); $(".btn4:first-child").val($(this).text()); }); });</script> <script> $('#mytable tr').each(function () { var avb = $(this).find(".avb_days").html(); });</script> <script> $('document').ready(function () { $('.pending').click(function () { $('#addmodal').modal('show'); // call load method }); }); </script> </body>
i tried lots of similar questions. still can't find. please me. know seems duplicated. somehow not. because of various ids had added dropdowns. (i guess). please help. thank you.
try using jquery instead $
so
jquery('document').ready(function () { jquery("#datepicker1,#datepicker2").datepicker({ mindate: 0, beforeshowday: $.datepicker.noweekends, dateformat: "dd-mm-yy" });}); 
Comments
Post a Comment