I am using CodeIgniter 3.* that is set up with hmvc capabilities. I have been testing my application to set up a clock that uses a timezone which uses the default timezoe chosen by the user. This clock uses moment js.
The odd thing is that when I had set up the clock properly, this error message showed up on any page that did not make an instance of moment. I have no idea why this is occurring. I am using Chrome to display my output.
I am using moment js and moment data cdns:
<!----moment CDNs ---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<!----moment timezone CDNs ---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.js"></script>
When I am not calling moment to be initialized this error pops up:
Moment Timezone has no data for <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project X - Login</title>
<!----JQuery CDNs ---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!----Bootstrap CDNs ---->
<link rel="stylesheet" type="text/css" rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!----moment CDNs ---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<!----moment timezone CDNs ---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-utils.js"></script>
<!----Daterangepicker CDNs ---->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<!----Select2 CDNs ---->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<!----D3 CDNs ---->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://d3js.org/d3.v3.js"></script>
<!----Tinymce CDNs ---->
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<!----Datatables CDNs ---->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<!----Font Awsome---->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!----Regular Links ---->
<link href="http://[::1]/ApplicationProject1/assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://[::1]/ApplicationProject1/assets/css/user.css"/>
<link rel="icon" type="image/jpeg" href="http://[::1]/ApplicationProject1/assets/images/favicon.jpg">
<script src="http://[::1]/ApplicationProject1/assets/js/user.js"></script>
<script src="http://[::1]/ApplicationProject1/assets/js/objects.js"></script>
<script src="http://[::1]/ApplicationProject1/assets/js/default.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="log-in">
<div class="page-header">
<h1>Login</h1>
</div>
<form action="http://[::1]/ApplicationProject1/index.php/user/login/get_timezone" method="post" accept-charset="utf-8">
<div class="input-group" style="margin:2px;width:99%;">
<div class="form-group">
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon fa fa-user" id="basic-addon1"></span>
<input type="text" id="username" name="username" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="form-group" style="margin-bottom:15px;">
<div class="input-group">
<span class="input-group-addon fa fa-lock" id="basic-addon1"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<input style="float: left; margin-right: 10px" type="submit" class="btn btn-default" value="Login">
</div>
</div>
</form>
<div>
<a href="http://[::1]/ApplicationProject1/index.php/user/register"><p class="btn btn-default">New User</p></a>
</div>
</div>
</div>
</div><!-- .row -->
</div><!-- .container -->
. See http://momentjs.com/timezone/docs/#/data-loading/.
I am having trouble figuring out why this is only showing up on the pages that do not call moment.
The answer was to add an if statement to make sure that the call to get the default timezone only occurred when the title of the page did not have register or login in the title.
"use strict";
$(document).ready(function() {
var title = document.getElementsByTagName("title")[0].innerHTML;
title = title.replace('Project X - ', '');
if (title != 'Register' && title != 'Login') {
$.ajax({
url: location + '/get_timezone',
success: function(resp) {
new Clock(1000, resp);
},
});
}
});