當頁面顯示時，jQuery Mobile顯示內容

我正在創建一個應用程序，該應用程序將在所有jQuery Mobile支持的平臺上使用PhoneGapped。我有一個小問題引起我很頭疼。我允許用戶將照片上傳到其擁有代碼的相冊中。當他們輸入代碼並驗證時，信息將存儲在localStorage中，以便檢索和注入DOM。這一切都正常工作，但頁面刷新時發生問題。沒有顯示進入div的內容。我已經搜索了這個網站，並且跟着其他人說過的，但仍然沒有成功。我正在使用jQM 1.3.0和jQ 1.9.1。以下是我的主頁需要顯示內容的代碼。當我導航到另一個頁面然後返回時，內容不存在，但是當我點擊刷新時，它會顯示。我在這裏做錯了什麼？當頁面顯示時，jQuery Mobile顯示內容

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Wedding</title> 
    <link href="css/jquery-mobile.css" rel="stylesheet" /> 
    <link href="css/application.css" rel="stylesheet" /> 
    <script src="js/jquery.js"></script> 
    <script src="js/global.js"></script> 
    <script src="js/jquery-mobile.js"></script> 
    <script src="phonegap.js"></script> 
    <script scr="js/connection.js"></script> 
</head> 
<body> 
    <div data-role="page" id="home"> 
     <div id="header" data-role="header"><p align="center">Wedding</p></div> 
     <div id="content" data-role="content"> 
      <div id="message"></div> 
      <nav> 
       <ul id="listview" data-role="listview" data-inset="true" data-theme="c"></ul> 
      </nav> 
     </div> 
     <div id="footer" data-role="footer" data-position="fixed"> 
      <nav data-role="navbar"> 
       <ul> 
        <li><a href="home.html" data-transition="slide" data-icon="home">Home</a></li> 
        <li><a href="instructions.html" data-transition="slide" data-icon="info">Instructions</a></li> 
       </ul> 
      </nav> 
     </div> 
     <script> 
     $(document).on('pagebeforeshow', '#home', function() { 
      var now = new Date(); 
      var utc_timestamp = now.getUTCFullYear() + '-' + ('0' + (now.getUTCMonth()+1)).slice(-2) + '-' + ('0' + now.getUTCDate()).slice(-2) + ' ' + ('0' + now.getUTCHours()).slice(-2) + ':' + ('0' + now.getUTCMinutes()).slice(-2) + ':' + ('0' + now.getUTCSeconds()).slice(-2); 
      var album_id = localStorage.getItem('album_id'); 
      var album_start = localStorage.getItem('album_start'); 
      var album_end = localStorage.getItem('album_end'); 
      var album_title = localStorage.getItem('album_title'); 
      var album_bride = localStorage.getItem('album_bride'); 
      var album_groom = localStorage.getItem('album_groom'); 
      var album_photo = localStorage.getItem('album_photo'); 
      var album_user = localStorage.getItem('album_user'); 
      if (album_id === null) { 
       $('#message').html('<p align="center">Not connected to an album.</p>'); 
       $("#listview").empty().append(
        '<li><a href="login.html" data-transition="slide">Enter Album Code</a></li>' + 
        '<li><a href="instructions.html" data-transition="slide">Instructions</a></li>' 
       ).listview('refresh'); 
      } else if (utc_timestamp < album_start || utc_timestamp > album_end) { 
       $('#message').html('<p align="center">The album you are connected to is not available.</p>'); 
       $("#listview").empty().append(
        '<li><a href="update.html" data-transition="slide">Change Albums</a></li>' + 
        '<li><a href="instructions.html" data-transition="slide">Instructions</a></li>' 
       ).listview('refresh'); 
      } else { 
       $('#message').html(
        '<p align="center"><strong>Album:</strong> ' + 
        album_title + ' <br /><strong>By:</strong> ' + 
        album_bride + ' & ' + 
        album_groom + '</p>' + 
        '<p align="center"><img src="http://localhost/weddingconnect/media/photos/' + album_user + '/thumbnail/' + album_photo + '" /></p>' 
       ); 
       $("#listview").empty().append(
        '<li><a href="upload.html" data-transition="slide">Upload A Photo</a></li>' + 
        '<li><a href="update.html" data-transition="slide">Change Albums</a></li>' + 
        '<li><a href="instructions.html" data-transition="slide">Instructions</a></li>' 
       ).listview('refresh'); 
      }   
     }); 
     </script> 
    </div> 
</body> 
</html>

來源

2013-05-29 WebDev84

你試過'pageinit'事件嗎？ – TecHunter

我能想到的唯一的事情是，在你的其他頁面你有一個ID與ID列表視圖ID或ID列表視圖？ – Gajotres

@TecHunter：是的，這是我最初嘗試的，直到我在這個網站上發現了一篇很棒的文章，說只有當頁面最初顯示時，而不是每次都會觸發pageinit事件。 – WebDev84

看着你的評論，這是一個問題。

想一想，你有一個jQuery Mobile應用程序，其中所有頁面都加載到DOM中。如果您嘗試訪問某個內容時每個頁面的內容都相同，則您將在DOM中訪問其首次出現的內容。這就是爲什麼當您重新加載頁面時一切正常。基本上頁面重新加載將清空DOM並且只有當前頁面將留在DOM內。

但有一個好消息。 jQuery Mobile的開發者已經想到這個問題，所以他們已經創建了一個名爲選擇活動頁面：

var activePage = $.mobile.activePage;

基本上這是您的當前活動頁面的DOM選擇。如果您嘗試這樣做：

alert($.mobile.activePage.attr('id'));

它會提醒您當前活動頁面的ID。如果你想訪問深入使用這個：

var element = $.mobile.activePage.find('#elementID');

來源

2013-05-29 13:49:54 Gajotres

當頁面顯示時，jQuery Mobile顯示內容

回答

相關問題