2012-02-28 15 views
1

私はjqueryモバイルサイトを使用して、postgreSQLサーバからPHPを使用して情報を取得しています。ページへのリンクをクリックすると、AJAX読み込みアイコンが表示されますが、ページが読み込まれていない場所に何もない場合は空白だけが空白になります。私がページのソースをチェックすると、すべてが正常に表示されていることがわかります。したがって、リフレッシュをクリックすると、ページが表示されるように正確に表示されます。ここにコードがあります、私はGoogleのグラフのonload関数が正しく動作していないと思っています。 google.setOnLoadCallbackは動作しません何であるという点でGoogle ChartsとjQuery Mobileが表示されない

<!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> 
+0

を、私は、Ajaxを無効にするには、データ・アヤックスのホーム・ページ上のリンクの最後に=「false」に追加され、今ではすべてが罰金を示しています。なぜこれがうまくいかないのか把握してもいいでしょう。私はそれをしつこつし続けます。 – rhoy

答えて

1

はFYI、 あなたは正しいです。心配する必要はなく、簡単な修正です。ただ、使用:今の周りの仕事を見つけ

$(document).ready(function(){ 
    drawTable(); 
}); 
関連する問題