Jquery Mobile listview不使用json數據進行渲染

我無法使用mySQL本地數據庫呈現的數據呈現Jquery列表。 json數據連接到項目上很好，但是我的模擬器呈現給我的是不正確的。Jquery Mobile listview不使用json數據進行渲染

我的PHP文件是：

<?php 

$link = mysql_pconnect("localhost", "root", "") or die ("Could not Connect to DB"); 

mysql_select_db("findadeal") or die("Could not select database"); 

$arr = array(); 

$rs = mysql_query("SELECT * FROM deal"); 

while($obj = mysql_fetch_object($rs)) { 
$arr[] = $obj; 
} 

echo '{"Deals":'.json_encode($arr).'}'; 

?>

這使得後續的JSON結果：

{"Deals":[{"dealid":"1","name":"Set Lunch Menu","description":"Enjoy lunch ","limit":"10","restaurantid":"1"}]}

我的HTML代碼如下：

<!DOCTYPE html> 
<html> 

<meta charset="utf-8" /> 
<title>Find A Deal</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

<style> 
    img.fullscreen { 
     max-height: 100%; 
     max-width: 100%; 
    } 
    </style> 

<link rel="stylesheet" href="themes/deal.css" /> 
<link rel="stylesheet"   href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 


</head> 

<body> 
<div data-role = "content"> 

    <div data-role="header" data-position="fixed"> 
      <h1>Current Deals</h1> 
      </div> 

    <div class="content-primary"> 
    <ul id="list" data-role="listview" data-filter="true"></ul> 
</div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">   </script> 

<script type="text/javascript"> 

    $(document).ready(function(){ 

         var url="http://localhost/findadeal/json2.php"; 

         $.getJSON(url,function(json){ 
           //loop through deals 
           $.each(json.deals,function(i,dat){ 
             $("#list").append("<li><b>ID: </b>"+dat.dealid+ 
                 "<b> Name: </b>"+dat.name+ 
                 "<b> Description: </b>"+dat.description+ 
                 "<b> Limit: </b>"+dat.limit+ 
                 "<b> Rest ID </b>"+dat.restaurantid+ 
                 "</li>"); 
             }); 
           }); 
         }); 

    </script> 

<footer data-role="footer" data-position="fixed"> 
    <nav data-role="navbar"> 
     <ul> 
      <li><a href="index.html" data-icon="home">Home</a></li> 
      <li><a href="mydeal.html" data-icon="grid">My Deals</a></li> 
     </ul> 
    </nav> 
    </footer> 

</body> 
</html>

我可以使普通的列表視圖當我不添加動態數據時就好了，但是現在問題就出現了。

如果有人可以幫助我，我會認真感謝它！過去幾天我一直遇到困難，而這裏的人真的幫了我很多，所以我很欣賞你的一切！提前致謝！！

來源

2013-01-31 user2025934

你也已經包括jQuery庫兩次，刪除此一個： –

這應該被刪除：

$(document).ready(function(){

（這種語法不能與jQuery Mobile使用，如果你想了解更多看看這個ARTICLE或看HERE。）。一切都應該改變運行的頁面加載成功，但頁面也需要包裹着data-role="page"頁面內容，所以做這樣的：

<div data-role = "page" id="index"> 
    // Your body content should go here 
</div>

，因爲這種變化$(document).ready(function(){到：

$(document).on('pagebeforeshow', '#index', function(){

當內容附加功能listview()必須觸發以增強內容標記：

$("#list").listview('refresh');

如果您想了解更多關於如何處理動態添加jQuery Mobile內容看看這個ARTICLE，更加透明是我的個人博客。或者你可以找到它HERE。

此外，我不知道爲什麼，但你引用2個jQuery腳本，你應該刪除這一個：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">   </script>

當前jQuery Mobile不使用jQuery 1.9很好地工作，只用1.8 .3或更低。

一切都應該是這個樣子：

<html> 
    <meta charset="utf-8" /> 
    <title>Find A Deal</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <style> 
     img.fullscreen { 
      max-height: 100%; 
      max-width: 100%; 
     } 
    </style> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head> 

<body> 
    <div data-role="page" id="index"> 
     <div data-role="header" data-position="fixed"> 
      <h1>Current Deals</h1> 
     </div> 

     <div data-role = "content"> 
       <div class="content-primary"> 
       <ul id="list" data-role="listview" data-filter="true"></ul> 
       </div> 
     </div> 

     <script type="text/javascript"> 
      $(document).on('pagebeforeshow', '#index', function(){ 
       var url="http://localhost/findadeal/json2.php"; 
       $.getJSON(url,function(json){ 
        //loop through deals 
        $.each(json.deals,function(i,dat){ 
         $("#list").append("<li><b>ID: </b>"+dat.dealid+ 
              "<b> Name: </b>"+dat.name+ 
              "<b> Description: </b>"+dat.description+ 
              "<b> Limit: </b>"+dat.limit+ 
              "<b> Rest ID </b>"+dat.restaurantid+ 
              "</li>"); 
        }); 
        $("#list").listview('refresh'); 
       }); 
      }); 
     </script> 

     <div data-role="footer" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="index.html" data-icon="home">Home</a></li> 
        <li><a href="mydeal.html" data-icon="grid">My Deals</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2013-01-31 13:11:54 Gajotres

非常感謝您的幫助！我現在的問題似乎是，我不能讓頁面加載？我已經做了必要的修改，就像你提到的一樣，但是一旦我按下我主頁上的按鈕將我帶到這個窗口，就會出現一個加載障礙，它會在那裏凍結。有什麼想法？我去了幾個Google，但我只是在困惑自己！再次，非常感謝大家的幫助！ – user2025934

你可以再試一次，我從我的回答中對網頁做了一些更改。也請告訴我是在桌面瀏覽器還是在phonegap應用程序中測試它？ – Gajotres

我已經在模擬器（Xcode，iPhone模擬器）上試過它，並且在我的瀏覽器（Google Chrome）上打開這個文件，兩者都不起作用。在模擬器上，我得到正在運行的加載圖標，但它不會加載到下一頁，並且需要我在再次使用任何應用程序功能之前重新啓動模擬器。在Google Chrome瀏覽器中，我會看到標題和搜索過濾條，但沒有任何列表條目。感謝您的時間到目前爲止，我真的很感激！ – user2025934

Jquery Mobile listview不使用json數據進行渲染

回答

相關問題