У меня есть мобильный сайт jquery, который получает некоторую информацию с сервера postgre sql, используя php. Когда я нажимаю на ссылку на страницу, появляется значок загрузки AJAX, но когда страница загружается там, где на ней ничего нет, просто пустое пространство. Когда я проверяю источник для страницы, я вижу, что все показывает нормально. Таким образом, после нажатия кнопки «Обновить» страница отображается точно так, как она должна отображаться. Вот код, я думаю, что функция загрузки диаграммы Google не работает правильно.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Level Status</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<?php
include("database_login.php");
// Connect to Database
$db_handle = pg_connect("host=$pg_host port=$pg_port dbname=$pg_database user=$pg_user password=$pg_password");
// Wuery string
$query = "SELECT Levels.Level, CASE Levels.Closed WHEN true THEN 'Closed' ELSE 'Open' END, SUM(CASE WHEN JobType = 0 AND Finished IS NULL THEN 1 ELSE 0 END),
SUM(CASE WHEN JobType != 0 AND Finished IS NULL THEN 1 ELSE 0 END) FROM Levels LEFT JOIN Jobs
ON Levels.Level = Jobs.Level WHERE Levels.Level > 0 GROUP BY Levels.Level, Levels.Closed ORDER BY Levels.Level;";
$result = pg_exec($db_handle, $query);
?>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Level');
data.addColumn('string', 'Status');
data.addColumn('number', 'Output');
data.addColumn('number', 'Input');
data.addRows(21);
<?php
$x=0;
$y=0;
while($final=pg_fetch_array($result))
{
echo "data.setCell($x, $y, $final[0]);\n";
$y++;
echo "data.setCell($x, $y, '$final[1]');\n";
$y++;
echo "data.setCell($x, $y, $final[2]);\n";
$y++;
echo "data.setCell($x, $y, $final[3]);\n";
$x++;
$y=0;
}
?>
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {allowHtml: true});
}
</script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>System Level Status</h1>
<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div>
<!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Current Status of All Levels</h2>
<div id='table_div'></div>
</div>
<!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Toolkit</li>
<li><a href="lookup_jobs.html">Lookup Jobs</a></li>
<li><a href="lookup_palletid.html">Lookup Pallet ID's</a></li>
<li><a href="bot_alerts.php">Bot Alerts</a></li>
<li data-theme="a"><a href="levelstatus.html">Level Status</a></li>
<li><a href="index.html">CMS Logs</a></li>
</ul>
</div>
</div>
</div>
<!-- /secondary content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2011-2012</p>
</div>
</div><!-- /page -->
</body>
</html>