Question

我有一个jquery移动网站，使用php从postgre sql server中提取一些信息。当我点击我的页面链接时，会出现AJAX加载图标，但是当页面加载的地方没有任何内容时，只有空白空格。当我检查页面的来源时，我发现一切都正常显示。因此，在单击刷新后，页面将显示为应该显示的内容。这是代码，我认为谷歌图表上传功能无法正常工作。

<!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>&copy; 2011-2012</p>
</div>
</div><!-- /page -->
</body>
</html>

Answer 1

FYI，你是正确的，因为google.setOnLoadCallback不起作用。不用担心，这是一个简单的修复。只需使用：

$(document).ready(function(){
    drawTable();
});

谷歌图表＆amp; jQuery Mobile没有出现

1 个答案: