0

ユーザーがログインしてフォトアルバムに接続している場合、jQuery Mobile アプリにフォトアルバムに関する情報を表示させようとしています。$.ajax を使用してサーバーに投稿し、データを取得しています。アプリを開くと正しいデータがホームページに表示されますが、表示されるはずの別のページに移動すると、データが取得されていることはわかっていても、div は空です。div が適切に注入されていないようです。以下は私のホームページとアップロードページです。

ホームページ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wedding Connect</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/application.js">script> -->
    <script src="js/jquery-mobile.js"></script>
    <script src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="home" data-title="Home" data-add-back-btn="true" data-back-btn-text="Back">

    <!-- header -->
    <div id="header" data-role="header"><p align="center">Welcome to Wedding Connect</p></div>
    <!-- /header -->

    <!-- content -->
    <div id="content" data-role="content">
        <div id="album-info"></div>
        <nav>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li><a href="login.html" data-transition="slide">Enter Album Code</a></li>
                <li><a href="upload.html" data-transition="slide">Upload a Photo</a></li>
                <li><a href="instructions.html" data-transition="slide">Instructions</a></li>
            </ul>
        </nav>
    </div>
    <!-- /content -->

    <!-- footer -->
    <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" data-theme="b">Home</a></li>
                <li><a href="upload.html" data-transition="slide" data-icon="plus" data-theme="b">Upload Photo</a></li>
                <li><a href="update.html" data-transition="slide" data-icon="gear" data-theme="b">New Album</a></li>
                <li><a href="instructions.html" data-transition="slide" data-icon="info" data-theme="b">Instructions</a></li>
            </ul>
        </nav>
    </div>
    <!-- /footer -->

    <script>
    $("#home").on('pageshow', function () {
        // For testing purposes only
        localStorage.setItem('album_code', '1234');
        var album_code = localStorage.getItem('album_code');
        if (album_code !== null) {
            // Attempt to authenticate the album code
            $.ajax({  
                url: "http://localhost/weddingconnect/index.php/mobile/verify",
                type: "post",  
                data: {album_code: album_code},
                dataType: 'json',
                crossDomain: true,
                error:function() {
                    alert('Server communication error. Could not validate stored album code.');
                },
                success: function(data) {
                    if (data.response == "TRUE") {
                        // Retrieve album information
                        $.ajax({
                            url: "http://localhost/weddingconnect/index.php/mobile/get-album",
                            type: "post",
                            data: {album_code: album_code},
                            dataType: 'json',
                            crossDomain: true,
                            error: function() {
                                alert('Server communication error. Could not retrieve album information.');
                            },
                            success: function(data) {
                                if (data.response == "TRUE") {
                                    $('#album-info').html(
                                        '<p align="center"><strong>Album:</strong> ' + 
                                        data.album + ' <strong>By:</strong> ' + 
                                        data.bride + ' & ' + 
                                        data.groom + '</p>'
                                    );
                                } else {
                                    $('#album-info').html('<p align="center">Error retrieving album information.</p>');
                                }
                            }
                        });                 
                    } else {
                        localStorage.removeItem('album_code');
                        $('#album-info').html('<p align="center">You are not connected to an album at this time.</p>');
                    }
                }
            });
        }
    });
    </script>

</div>
</body>
</html>

アップロードページ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wedding Connect</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/application.js">script> -->
    <script src="js/jquery-mobile.js"></script>
    <script src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="upload" data-title="Upload" data-add-back-btn="true" data-back-btn-text="Back">

    <div data-role="header"><p align="center">Welcome to Wedding Connect</p></div>

    <div data-role="content">
        <div id="album-info"></div>
        <script src="js/upload.js"></script>
        <input type="hidden" id="serverUrl" value="http://localhost/weddingconnect/mobile/upload" />
        <input type="button" onclick="capturePhoto();" value="Take Picture" />
        <input type="button" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" value="Select Picture" />
        <input type="button" onclick="uploadPhoto();" value="Upload" data-theme="b" />
        <img id="smallImage" src="" />
        <img id="largeImage" src="" />
    </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" data-theme="b">Home</a></li>
                <li><a href="upload.html" data-transition="slide" data-icon="plus" data-theme="b">Upload Photo</a></li>
                <li><a href="update.html" data-transition="slide" data-icon="gear" data-theme="b">New Album</a></li>
                <li><a href="instructions.html" data-transition="slide" data-icon="info" data-theme="b">Instructions</a></li>
            </ul>
        </nav>
    </div>

    <script>
    $("#upload").on("pageshow", function() {
        //alert('upload');
        var album_code = localStorage.getItem('album_code');
        //alert(album_code);

        // If no album code is present send the user to the login page
        if (album_code === null) {
            $.mobile.changePage("login.html", {
                transition: "slide"
            });
        }
        // Retrieve the album information
        $.ajax({  
            url: "http://localhost/weddingconnect/index.php/mobile/get-album",
            type: "post",  
            data: {album_code: album_code},
            dataType: 'json',
            crossDomain: true,
            error:function() {
                alert('Server communication error. Could not retrieve album information.');
            },
            success: function(data) {
                if (data.response == "TRUE") {
                    alert(data.groom);
                    $('#album-info').html(
                        '<p align="center"><strong>Album:</strong> ' + 
                        data.album + ' <strong>By:</strong> ' + 
                        data.bride + ' & ' + 
                        data.groom + '</p>'
                    );
                } else {
                    $('#album-info').html('<p align="center">Error retrieving album information.</p>');
                }
            }
        });
    });
    </script>

</div>
</body>
</html>

欠けているのは単純なもののように感じます。jQM で $(document).ready(function(){ を使用できないことはわかっているので、各ページに pagebeforeshow を使用しています。ページが表示されるたびにこれを適切に表示するにはどうすればよいですか? よろしくお願いします。

4

0 に答える 0