Got some error in my local server "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.", But in my production server,it never throw that kind of error.Well my problem is, I use my local server for testing and updates,but it will not output properly in a browser. I use this global layout template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>
<link rel="shortcut icon" href="/favicon.ico" />
<?php include_stylesheets() ?>
<?php include_javascripts() ?>
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-button.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="/js/jquery.fixedheadertable.min.js"></script>
</head>
<body>
Some Contents
</body>
</html>
And this is the page with error
<style>
body{
/*margin-top: 100px;*/
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container{
/*width: 800px;*/
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
/*padding: 10px 15px;*/
padding: 5px 5px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
/*padding: 15px;*/
padding: 5px;
}
.tab-content.current{
display: inherit;
}
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script>
<script type="text/javascript">
$.ajax({
url: '<?php echo url_for("misc/total") ?>',
dataType: 'json',
success: function(data){
console.log(JSON.stringify(data));
console.log("Total: " + data.total);
// update a div content
$("#responsecontainer").html(data.total);
}
});
</script>
<body>
<div class="page-header">
<div id="overdue"><h2 class="btn btn-danger">Borrowers with Overdue/Ongoing Account</h2></div><br />
<div> Number Of Borrowers: <h2 id="responsecontainer" class="btn btn-info"> </h2> Total Number Of Overdue Accounts: <h2 class="btn btn-info"><?php echo "coming soon" ?>
</h2> Number Of Ongoing Acounts: <h2 class="btn btn-info"><?php echo "coming soon" ?></h2>
</div>
</div>
<marquee><h1>Under Construction <span>Testing</span> <?php echo date('l,F d, Y') ?></h1></marquee>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Bulacan</li>
<li class="tab-link" data-tab="tab-2">Novaliches</li>
<li class="tab-link" data-tab="tab-3">Manila</li>
<li class="tab-link" data-tab="tab-4">Commonwealth</li>
<li class="tab-link" data-tab="tab-5">Pasig</li>
<li class="tab-link" data-tab="tab-6">Libertad</li>
<li class="tab-link" data-tab="tab-7">Parañaque</li>
<li class="tab-link" data-tab="tab-8">Frisco</li>
<li class="tab-link" data-tab="tab-9">San Mateo</li>
<li class="tab-link" data-tab="tab-10">Batasan</li>
<li class="tab-link" data-tab="tab-11">Kamuning</li>
<li class="tab-link" data-tab="tab-12">Marikina</li>
<li class="tab-link" data-tab="tab-13">Makati</li>
</ul>
<div id="tab-1" class="tab-content current">
<p> Total numbers of Borrowers: <small id="divID" style="color: red"></small> Total no of loans <small id="result" style="color: red"></small> Total completed <small style="color: red">Testing</small> Loans overdue<small style="color: red"> Testing</small> Ongoing<small style="color: red">Testing</small></p>
<table class="table table-bordered table-condensed table-striped" id="tableId">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Added On</th>
<th>Totals</th>
<th>Completed</th>
<th>Overdue</th>
<th>Ongoing</th>
</tr>
</thead>
<tbody>
<?php foreach($applicants as $app): ?>
<?php if($app->area_id ==2): ?>
<tr class="<?php echo fmod($i, 2) ? 'even' : 'odd' ?>">
<td><?php echo mb_strtoupper(mb_substr($app->Areas->name,0,4)) ?>000<?php echo $app->id ?></td>
<td><a href="<?php echo url_for('loans/applicant?id='.$app->getId()) ?>"><?php echo $app->getFirstname(), ' ' ,$app->getLastname(), ' ', $app->getMiddlename() ?></a></td>
<td><?php echo date ('M j, Y', strtotime($app->date_created));?></td>
<td class="d"><small style="font-family:Arial;color: #FF0000"><?php echo (count($app->Loans)); ?></small></td>
<td>
<?php foreach($app->Loans as $loan): ?>
<?php if($loan->is_completed == 'Y'): ?>
<?php echo ($loan->batch_no) ?>,
<?php endif; ?>
<?php endforeach; ?>
</td>
<td>
<?php foreach($app->Loans as $loan): ?>
<?php if($loan->is_completed =='N'): ?>
<?php $dueDate = strtotime($loan['due_date']);?>
<?php $today = time(); ?>
<?php if($dueDate <= $today): ?>
<?php echo($loan->batch_no) ?>,
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</td>
<td>
<?php foreach($app->Loans as $loan): ?>
<?php if($loan->is_completed =='N'): ?>
<?php $dueDate = strtotime($loan['due_date']);?>
<?php $today = time(); ?>
<?php if($dueDate >= $today): ?>
<?php echo ($loan->batch_no) ?>,
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
</tbody>
</table>
<script type="text/javascript">
(function() {
var div = document.getElementById('divID');
div.innerHTML = document.getElementById('tableId').getElementsByTagName("tbody") [0].getElementsByTagName("tr").length;
})();
</script>
<script type="text/javascript">
$(calculateSum);
function calculateSum() {
var sum = 0;
$(".d").each(function() {
var value = $(this).text();
//add only if the value is number
if(!isNaN(value) && value.length!=0) {
sum += parseFloat(value);
}
});
$('#result').text(sum);
};
</script>
</div>
Instead of Parañaque,the text is "gargled"...
