CODEWITHSUNDEEP
jqueryhtmljquery-mobile
WebDev84
WebDev84

Reputation: 331

jQuery Mobile display content when page shown

I am creating an app that will be PhoneGapped for use on all of jQuery Mobile's supported platforms. I have a small issue that is causing me a major headache. I am allowing user's to upload photos to albums that they have the code to. When they enter a code and it is verified the information is stored in localStorage for retrieval and injection into the DOM. That is all working fine, but the problem occurs when pages are refreshed. The content that is to go into the div's is not showing. I have searched this site and followed what others have said, but still no success. I am using jQM 1.3.0 and jQ 1.9.1. Below is the code for my home page that needs to be displaying content. When I navigate to another page and then back, the content is not there but when I hit refresh it is displayed. What am I doing wrong here?

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

Upvotes: 1

Views: 448

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Looking at your comment this is a problem.

Think about it, you have a jQuery Mobile application where all pages are loaded into the DOM. If every page have same content when you try to access something you will access its first occurrence inside a DOM. That's why everything is working when you reload the page. Basically page reload will empty the DOM and only current page will stay inside a DOM.

But there's a good news. jQuery Mobile developers have thought about this, so they have created a selector called active page:

var activePage = $.mobile.activePage;

Basically this is a selected DOM of your current active page. If you try this:

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

it will alert you an id of your current active page. If you want to access something in depth use this:

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

Upvotes: 1

Related Questions