1

jQuery Mobile でサポートされているすべてのプラットフォームで使用する PhoneGapped になるアプリを作成しています。大きな頭痛の原因となっている小さな問題があります。ユーザーがコードを持っているアルバムに写真をアップロードできるようにしています。ユーザーがコードを入力して検証されると、その情報は取得および DOM への挿入のために localStorage に保存されます。それはすべて正常に機能していますが、ページが更新されると問題が発生します。div に入るコンテンツが表示されていません。私はこのサイトを検索し、他の人が言ったことに従いましたが、まだ成功していません. jQM 1.3.0 と jQ 1.9.1 を使用しています。以下は、コンテンツを表示する必要があるホームページのコードです。別のページに移動してから戻ると、コンテンツはそこにありませんが、更新を押すと表示されます。ここで何が間違っていますか？

<!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>
4

1 に答える 1

1

あなたのコメントを見ると、これは問題です。

考えてみてください。すべてのページが DOM に読み込まれる jQuery Mobile アプリケーションがあります。何かにアクセスしようとしたときにすべてのページが同じコンテンツを持っている場合、 内の最初の出現にアクセスしますDOM。そのため、ページをリロードするとすべてが機能します。基本的に、ページをリロードすると が空にDOMなり、現在のページのみが 内に残りますDOM。

しかし、良いニュースがあります。jQuery Mobile の開発者はこれについて考え、アクティブ ページと呼ばれるセレクターを作成しました。

var activePage = $.mobile.activePage;

基本的に、これは現在アクティブなページの選択された DOM です。これを試してみると：

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

現在アクティブなページの ID が通知されます。詳細にアクセスしたい場合は、これを使用します。

var element = $.mobile.activePage.find('#elementID');
于 2013-05-29T13:49:54.083 に答える