jQuery Mobile: Sending data from one page to the another

by

One HTML / multiple pages template

Here’s an example of passing an attribute from listview to the second page in 1 html multi page template:

http://jsfiddle.net/Gajotres/Gv7UW/ – js object as a storage container

http://jsfiddle.net/Gajotres/J9NTr/ – localStorage as a storage container

Basically what you want to do is create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.

    var storeObject = {
        firstname : '',
        lastname : ''
    }

Multiple HTML pages template

Unfortunately this example can’t be done through jsFiddle so I will post needed files:

HTML 1 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script src="operations.js"></script>       
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" id="test-listview">
                <li><a href="page2.html?id=1">Link 1</a></li>
                <li><a href="page2.html?id=2">Link 2</a></li>
                <li><a href="page2.html?id=3">Link 3</a></li>
                <li><a href="page2.html?id=4">Link 4</a></li>
                <li><a href="page2.html?id=5">Link 5</a></li>
            </ul>    
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

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

HTML 2 :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head>
<body>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

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

operations.js :

$(document).on('pageshow', '#second', function(){   
    alert(getParameterByName("id"));
}); 
     

function getParameterByName(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

User authentication demo

Another example that can’t be shown with a jsFiddle example, unlike previous one, this one will have attached SQL script. I would advise you to create a better db reading logic, this one is a simple solution, prone to SQL injection, but it will work well for your assignment:

index.php :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        #login-button {
            margin-top: 30px;
        }        
    </style>
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/custom.js"></script>
</head>
<body>
    <div data-role="page" id="login">
        <div data-theme="a" data-role="header">
            <h3>Login Page</h3>
        </div>

        <div data-role="content">
            <label for="username">Enter your username:</label>
            <input type="text" value="" name="username" id="username"/>
            <label for="password">Enter your password:</label>
            <input type="password" value="" name="password" id="password"/>  
            <a data-role="button" id="login-button" data-theme="b">Login</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3></h3>
        </div>

        <div data-role="content">
            Here goes content
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>Page footer</h3>
        </div>
    </div>    
</body>
</html>

json.php :

<?php
    $var1 = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature
    $jsonObject = json_decode($_REQUEST['outputJSON']); // Decode JSON object into readable PHP object
    
    $username = $jsonObject->{'username'}; // Get username from object
    $password = $jsonObject->{'password'}; // Get password from object
    
    mysql_connect("localhost","root","");  // Conect to mysql, first parameter is location, second is mysql username and a third one is a mysql password
    @mysql_select_db("test") or die( "Unable to select database"); // Connect to database called test
    
    $query = "SELECT * FROM users WHERE user_name="".$username."" and user_pass="".$password.""";
    $result=mysql_query($query);
    $num = mysql_numrows($result);

    if($num != 0) {
        echo "true";
    } else {
        echo "false";        
    }
?>

custom.js :

$(document).on('pagebeforeshow', '#login', function(){ 
    $('#login-button').on('click', function(){
        if($('#username').val().length > 0 && $('#password').val().length > 0){
            userObject.username = $('#username').val(); // Put username into the object
            userObject.password = $('#password').val(); // Put password into the object
            // Convert an userObject to a JSON string representation
            var outputJSON = JSON.stringify(userObject);
            // Send data to server through ajax call
            // action is functionality we want to call and outputJSON is our data
            ajax.sendRequest({action : 'login', outputJSON : outputJSON});
        } else {
            alert('Please fill all nececery fields');
        }
    });    
});

$(document).on('pagebeforeshow', '#index', function(){ 
    if(userObject.username.length == 0){ // If username is not set (lets say after force page refresh) get us back to the login page
        $.mobile.changePage( "#login", { transition: "slide"} ); // In case result is true change page to Index  
    }
    $(this).find('[data-role="header"] h3').append('Wellcome ' + userObject.username); // Change header with wellcome msg
    //$("#index").trigger('pagecreate');
});

// This will be an ajax function set
var ajax = {
    sendRequest:function(save_data){
        $.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
            data: save_data,
            async: true,
            beforeSend: function() {
                // This callback function will trigger before data is sent
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                // This callback function will trigger on data sent/received complete
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                if(result == "true") {
                    $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
                } else {
                    alert('Login unsuccessful, please try again!'); // In case result is false throw an error
                }
                // This callback function will trigger on successful action
            },
            error: function (request,error) {
                // This callback function will trigger on unsuccessful action                
                alert('Network error has occurred please try again!');
            }
        });
    }
}

// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple
var userObject = {
    username : "",
    password : ""
}

localhost.sql :

-- phpMyAdmin SQL Dump
-- version 3.4.10.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Feb 02, 2013 at 11:58 AM
-- Server version: 5.5.20
-- PHP Version: 5.3.10

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `test`
--
CREATE DATABASE `test` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `test`;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `user_name` varchar(64) NOT NULL,
  `user_pass` varchar(64) NOT NULL,
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`user_id`, `user_name`, `user_pass`) VALUES
(1, 'gajotres', 'testpass');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

More Related Contents:

  1. jQuery Mobile: How to correctly submit form data
  2. html graphs from database [closed]
  3. I am new to php ,please tell me ,button click event should add new input tag to existing form through php [closed]
  4. How and where to put Jquery into a fully PHP page?
  5. How print in Jquery / Datatables [closed]
  6. Is the following code valid? [closed]
  7. jQuery Mobile: document ready vs. page events
  8. jQuery Mobile: Markup Enhancement of dynamically added content
  9. Ajax Upload image
  10. dynamic drop down box?
  11. Why I have to put all the script to index.html in jquery mobile
  12. Form inside of $.load not posting correctly
  13. HTML – Change\Update page contents without refreshing\reloading the page
  14. First drop down menu to auto change the options of a second dropdown
  15. jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined
  16. How can we open a link in private browsing mode
  17. How to preview an image before and after upload?
  18. jquery using ajax to send data and save in php [duplicate]
  19. How do I return a proper success/error message for JQuery .ajax() using PHP?
  20. Get variable from PHP file using JQuery/AJAX
  21. Sending HTML Code Through JSON
  22. Javascript function post and call php script
  23. How to add anchor tag to a URL from text input
  24. Multiple javascript/css files: best practices?
  25. Push notifications from server to user with PHP/JavaScript
  26. jQuery Multiple Forms Submit
  27. saving checkbox state on reload
  28. Preserve Line Breaks From TextArea
  29. Data transfer from JavaScript to PHP
  30. find and replace keywords by hyperlinks in an html fragment, via php dom

Leave a Comment