I'm trying to do some stuff with jquery-ui calendar. When page is load it gives me these errors.
ReferenceError: $ is not defined
$('document').ready(function () {
I tried so many answers googling. Still I got this 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 is more than you available leave amount.
The extra amount will go as 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 your remarks to 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 help me. I know this is seems to be duplicated. But somehow it is not. It is because of the various ids I had added for dropdowns. (I guess). Please help. Thank you.
