Lab 4 : JQuery Mobile, REST, Google Charts API, HTML5 Local Storage

This lab required use of JQuery Mobile to, upon submit of the username and password, store the username using HTML5 local storage and fade into the next page.

by Hayden McParlane

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script src="//platform.twitter.com/widgets.js"></script>
<div data-role="page" data-theme="a" id="page1">
    <!-- Authentication page header -->
    <div id="usr_auth_page_header" data-role="header" data-nobackbtn="true">
         <h2>Lab 4</h2> 
    </div>
    <!-- Authentication page form content -->
    <div id="usr_auth_form" data-role="content">
        <form id="auth_form" action="" method="post">
            <div id="usernameDiv" data-role="fieldcontain">
                <label for="username">Username</label>
                <input id="username" name="username" type="text" />
            </div>
            <div id="passwordDiv" data-role="fieldcontain">
                <label for="password">Password</label>
                <input id="password" name="password" type="password" />
            </div>
            <!-- <a href="#welcome_page" role="button"> <input type="submit" value="Submit" /> </a> -->
            <p><a id="btnSubmit" href="#welcome_page" data-transition="fade" data-role="button">Submit</a>
            </p>
        </form>
    </div>
    <!-- Welcome content -->
    <div id="welcome_text" name="welcome_text" data-role="content" align="CENTER">
        <p id="greeting">Welcome</p>
    </div>
    <!-- Transition content -->
    <div id="transition_content" name="transition_content" data-role="content"></div>
</div>
<div id="welcome_page" class="welcome_page" name="welcome_page" data-role="page" data-theme="a">
    <div id="wp_welcome_text" class="welcome_page" name="welcome_text" data-role="content" align="CENTER">
        <div id="usr_auth_page_header" data-role="header" data-nobackbtn="true">
             <h2 id="wp_greeting"> Welcome </h2> 
        </div>
        <!-- Dashboard content -->
      ...

JavaScript

var usr_auth_page_header_var = null;
var usr_auth_form_var = null;
var welcome_text_var = null;
var transition_content_var = null;
var welcome_page_var = null;
var stores = Array();


$(document).ready(function () {
    //Assign global vars
    welcome_text_var = $('#welcome_text');
    transition_content_var = $('#transition_content');
    usr_auth_page_header_var = $('#usr_auth_page_header');
    usr_auth_form_var = $('#usr_auth_form');
    welcome_page_var = $('#welcome_page');

    $("#btnSubmit").bind("click", function (event, ui) {
        var stringToStore = $('#username').val();

        //Read in username    
        stores.push(stringToStore);

        //Commit username to local storage
        localStorage.setItem("cur_user", stores.join(';'));

        //Empty array
        stores.pop();

        //Pull username stored into active var
        var username = localStorage.getItem("cur_user");

        //Modify welcome message
        $("#wp_greeting").text("Welcome " + username);
    });

    //Show only desired aspects on load    
    hideWelcomeMessage();
});

function showAuth() {
    usr_auth_page_header_var.show();
    usr_auth_form_var.show();
}

function hideAuth() {
    usr_auth_page_header_var.hide();
    usr_auth_form_var.hide();
}

function showWelcomeMessage() {
    welcome_text_var.show();
}

function hideWelcomeMessage() {
    welcome_text_var.hide();
}

function welcomeMessageFadeIn() {
    welcome_text_var.fadeTo("slow", 1.0);
}

function showContentTransition() {
    transition_content_var.show();
}

function hideContentTransition() {
    transition_content_var.hide();
}

$('#auth_form').submit(function () {
    //Hide authorization form
    hideAuth();

    //Pull username stored into active var
    var username = window.localStorage.getItem("cur_user");

    //Modify welcome message
    $('greeting').val("Welcome " + username);

    //Welcome message fade in
    welcomeMessageFadeIn();
});