I am working with ASP and I try to used Eonasdan Date Time Picker but unfortunately I didn't work. I try to change different jquery form 1.11.2, and 3.2.1 version but still didn't work.
I also try to rearrange the position of every CDN because I experience that before that I need to set first this one link to another link but still the same result, not working.
In addition, the sweet alert are not functioning as well even thought I use the following codes are working well when I use Bootstrap 4.
The following codes are located below.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="index.aspx.vb" Inherits="MySystemSPX.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--DataTable-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<!--Bootstrap-Select-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!--SweetAlert-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Custom-->
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default" id="navigation"></nav>
<div class="container-fluid" id="main">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">In-Charge</a></li>
<li class="breadcrumb-item active">Job Schedule Status</li>
</ol>
<h1>Job Schedules Status</h1>
<hr>
<button type="button" class="btn btn-primary addjobstatus"><i class="fa fa-plus" ></i> Add Job Status</button>
<table id="tb_jobsched" class="display nowrap table table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th rowspan="2">#</th>
<th rowspan="2">Machine Name</th>
<th rowspan="2">Quantity Finished</th>
<th rowspan="2">Quantity Reject</th>
<th rowspan="2">Set To Finished</th>
<th colspan="2">Set Date Time </th>
<th rowspan="2">Keyin Label Info</th>
<th colspan="2">Machine Counter</th>
<th rowspan="2">Remarks</th>
<th rowspan="2"></th>
</tr>
<tr>
<th>Started</th>
<th>Finished</th>
<th>Started</th>
<th>Finished</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mach7 Interosis</td>
<td>12312</td>
<td>1141414143</td>
<td><span class="label label-success">Success</span></td>
<td>2011/04/25</td>
<td>2011/04/25</td>
<td></td>
<td>12312</td>
<td>1141414143</td>
<td>adafsafsafsafas</td>
<td>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary updatejobstatus">Update</button>
<button type="button" class="btn btn-primary">Delete</button>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Mach9 Fambu</td>
<td>12312</td>
<td>1141414143</td>
<td><span class="label label-success">Success</span></td>
<td>2011/04/25</td>
<td>2011/04/25</td>
<td></td>
<td>12312</td>
<td>1141414143</td>
<td>adafsafsafsafas</td>
<td>
<a></a>
</td>
</tr>
</tbody>
</table>
<hr>
<footer id="footer"></footer>
</div>
<!-- Modal -->
<div class="modal fade" id="setjobstatus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="machinename">Machine Name</label>
<!--Use Select2 For All of The Select-->
<select class="selectpicker" data-live-search="true" data-width="100%" class="form-control" id="machinename">
<option data-tokens="Machine Name 1" value="Machine Name 1">Machine Name 1</option>
<option data-tokens="Machine Name 2" value="Machine Name 2">Machine Name 2</option>
<option data-tokens="Machine Name 3" value="Machine Name 3">Machine Name 3</option>
</select>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="settofinished">Set To Finished</label>
<select class="selectpicker" data-live-search="true" data-width="100%" id="settofinished">
<option data-tokens="Status 1" value="Status 1">Status 1</option>
<option data-tokens="Status 2" value="Status 2">Status 2</option>
<option data-tokens="Status 3" value="Status 3">Status 3</option>
</select>
</div>
</div>
<!--Use Bootstrap TouchSpin Not Use For Now Coz Not Codes Caompatible For Bootstrap 4 | http://www.virtuosoft.eu/code/bootstrap-touchspin/# -->
<div class="col-lg-6">
<div class="form-group">
<label for="qtyfinished">Quantity Finished</label>
<input type="number" class="form-control" id="qtyfinished" placeholder="Quantity Finished">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="qtyreject">Reject Finished</label>
<input type="number" class="form-control" id="qtyreject" placeholder="Reject Finished">
</div>
</div>
<!--Use Eonasdan Link Picker -->
<div class="col-lg-6">
<label for="datestarted">Date Started</label>
<div class="form-group">
<div class='input-group date' id='datestarted'>
<input type='text' class="form-control" placeholder="Date Started" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-6">
<label for="dateended">Date Finished</label>
<div class="form-group">
<div class='input-group date' id='dateended'>
<input type='text' class="form-control" placeholder="Date Finished" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dateended').datetimepicker();
});
</script>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="keyinlabelinfo">KeyIn Label Info</label>
<input type="number" class="form-control" id="keyinlabelinfo" placeholder="KeyIn Label Info">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="mach_countstart">Machine Counter Start</label>
<input type="number" class="form-control" id="mach_countstart" placeholder="Machine Counter Start">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="mach_countfinished">Machine Counter Finished</label>
<input type="number" class="form-control" id="mach_countfinished" placeholder="Machine Counter Finished">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="remarks">Remarks</label>
<textarea class="form-control" id="remarks" placeholder="Remarks" rows="2"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="savestatus" class="btn btn-primary" data-dismiss="modal" onclick="savestatus()">Save</button>
<button type="button" id="updatestatus" class="btn btn-primary" data-dismiss="modal" onclick="updatestatus()">Save Changes</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
format: 'MM/YYYY'
});
});
</script>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#navigation").load("navigation.html");
$("#footer").load("../footer.html");
$('.CommonReports').on('click', function () {
$('#commonreports').addClass('reveal');
$('.overlay').show();
document.body.style.overflow = 'hidden';
});
$('#tb_jobsched').DataTable({
responsive: true
});
});
$(function () {
$('.updatejobstatus').click(function (e) {
e.preventDefault();
var mymodal = $('#setjobstatus');
mymodal.find('.modal-title').text('Update Job Status');
mymodal.modal('show');
$('#savestatus').hide();
$('#updatestatus').show();
});
});
$(function () {
$('.addjobstatus').click(function (e) {
e.preventDefault();
var mymodal = $('#setjobstatus');
mymodal.find('.modal-title').text('Add Job Status');
mymodal.modal('show');
$('#savestatus').show();
$('#updatestatus').hide();
});
});
function savestatus() {
swal(
'Good job!',
'You job status has been save successfully!',
'success'
)
}
function updatestatus() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, save it!'
}).then(function () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
})
}
</script>
First issue: jQuery V3.2.1 is not compatible with your code. You need to use a previous version:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
Second issue: updatestatus is a global variable and so you need to distinguish it from your inline function. I'd suggest you to use, for instance, updatestatusCall and so the inline code will be:
....onclick="updatestatusCall()"....
The same applies for savestatus function.
For the updatejobstatus you need to delegate it to the document:
$(document).on('click', '.updatejobstatus', function (e) {
Last point: avoid inline code, put all dom ready functions together instead to have more dom ready calls.
The running snippet:
$(document).ready(function () {
$('#dateended').datetimepicker();
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
format: 'MM/YYYY'
});
$("#navigation").load("navigation.html");
$("#footer").load("../footer.html");
$('.CommonReports').on('click', function () {
$('#commonreports').addClass('reveal');
$('.overlay').show();
document.body.style.overflow = 'hidden';
});
$('#tb_jobsched').DataTable({
responsive: true
});
$(document).on('click', '.updatejobstatus', function (e) {
e.preventDefault();
var mymodal = $('#setjobstatus');
mymodal.find('.modal-title').text('Update Job Status');
mymodal.modal('show');
$('#savestatus').hide();
$('#updatestatus').show();
});
$('.addjobstatus').click(function (e) {
e.preventDefault();
var mymodal = $('#setjobstatus');
mymodal.find('.modal-title').text('Add Job Status');
mymodal.modal('show');
$('#savestatus').show();
$('#updatestatus').hide();
});
});
function savestatusCall() {
swal(
'Good job!',
'You job status has been save successfully!',
'success'
)
}
function updatestatusCall() {
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, save it!'
}).then(function () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
})
}<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--DataTable-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<!--Date Timepicker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<!--Bootstrap-Select-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!--SweetAlert-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Custom-->
<link rel="stylesheet" type="text/css" href="custom.css">
<form id="form1" runat="server">
<nav class="navbar navbar-default" id="navigation"></nav>
<div class="container-fluid" id="main">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location=''">In-Charge</a></li>
<li class="breadcrumb-item active">Job Schedule Status</li>
</ol>
<h1>Job Schedules Status</h1>
<hr>
<button type="button" class="btn btn-primary addjobstatus"><i class="fa fa-plus" ></i> Add Job Status</button>
<table id="tb_jobsched" class="display nowrap table table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th rowspan="2">#</th>
<th rowspan="2">Machine Name</th>
<th rowspan="2">Quantity Finished</th>
<th rowspan="2">Quantity Reject</th>
<th rowspan="2">Set To Finished</th>
<th colspan="2">Set Date Time </th>
<th rowspan="2">Keyin Label Info</th>
<th colspan="2">Machine Counter</th>
<th rowspan="2">Remarks</th>
<th rowspan="2"></th>
</tr>
<tr>
<th>Started</th>
<th>Finished</th>
<th>Started</th>
<th>Finished</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mach7 Interosis</td>
<td>12312</td>
<td>1141414143</td>
<td><span class="label label-success">Success</span></td>
<td>2011/04/25</td>
<td>2011/04/25</td>
<td></td>
<td>12312</td>
<td>1141414143</td>
<td>adafsafsafsafas</td>
<td>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary updatejobstatus">Update</button>
<button type="button" class="btn btn-primary">Delete</button>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Mach9 Fambu</td>
<td>12312</td>
<td>1141414143</td>
<td><span class="label label-success">Success</span></td>
<td>2011/04/25</td>
<td>2011/04/25</td>
<td></td>
<td>12312</td>
<td>1141414143</td>
<td>adafsafsafsafas</td>
<td>
<a></a>
</td>
</tr>
</tbody>
</table>
<hr>
<footer id="footer"></footer>
</div>
<!-- Modal -->
<div class="modal fade" id="setjobstatus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="machinename">Machine Name</label>
<!--Use Select2 For All of The Select-->
<select class="selectpicker" data-live-search="true" data-width="100%" class="form-control" id="machinename">
<option data-tokens="Machine Name 1" value="Machine Name 1">Machine Name 1</option>
<option data-tokens="Machine Name 2" value="Machine Name 2">Machine Name 2</option>
<option data-tokens="Machine Name 3" value="Machine Name 3">Machine Name 3</option>
</select>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="settofinished">Set To Finished</label>
<select class="selectpicker" data-live-search="true" data-width="100%" id="settofinished">
<option data-tokens="Status 1" value="Status 1">Status 1</option>
<option data-tokens="Status 2" value="Status 2">Status 2</option>
<option data-tokens="Status 3" value="Status 3">Status 3</option>
</select>
</div>
</div>
<!--Use Bootstrap TouchSpin Not Use For Now Coz Not Codes Caompatible For Bootstrap 4 | http://www.virtuosoft.eu/code/bootstrap-touchspin/# -->
<div class="col-lg-6">
<div class="form-group">
<label for="qtyfinished">Quantity Finished</label>
<input type="number" class="form-control" id="qtyfinished" placeholder="Quantity Finished">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="qtyreject">Reject Finished</label>
<input type="number" class="form-control" id="qtyreject" placeholder="Reject Finished">
</div>
</div>
<!--Use Eonasdan Link Picker -->
<div class="col-lg-6">
<label for="datestarted">Date Started</label>
<div class="form-group">
<div class='input-group date' id='datestarted'>
<input type='text' class="form-control" placeholder="Date Started" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-6">
<label for="dateended">Date Finished</label>1111
<div class="form-group">
<div class='input-group date' id='dateended'>
<input type='text' class="form-control" placeholder="Date Finished" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
});
</script>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="keyinlabelinfo">KeyIn Label Info</label>
<input type="number" class="form-control" id="keyinlabelinfo" placeholder="KeyIn Label Info">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="mach_countstart">Machine Counter Start</label>
<input type="number" class="form-control" id="mach_countstart" placeholder="Machine Counter Start">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="mach_countfinished">Machine Counter Finished</label>
<input type="number" class="form-control" id="mach_countfinished" placeholder="Machine Counter Finished">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="remarks">Remarks</label>
<textarea class="form-control" id="remarks" placeholder="Remarks" rows="2"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="savestatus" class="btn btn-primary" data-dismiss="modal" onclick="savestatusCall()">Save</button>
<button type="button" id="updatestatus" class="btn btn-primary" data-dismiss="modal" onclick="updatestatusCall()">Save Changes</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker10'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
</div>
</form>