jQuery Mobile: envío de datos de una página a otra

Tengo un problema, necesito enviar datos (una identificación) de una lista a otra página. este es el código html:

  

Players App

Players list

Player detail

Players list

y esta es la secuencia de comandos:

 var lista = new Array(); var squadraManager={}; squadraManager.initArray=null; squadraManager.printArray=null; squadraManager.initArray = function(){ lista[0] = new players(); lista[0].setNome("Nonho"); lista[0].setRuolo("difensore"); lista[0].setCognome("Rossi"); lista[0].setNMaglia("01"); lista[1] = new players(); lista[1].setNome("Marco"); lista[1].setRuolo("blabla"); lista[1].setCognome("Mariani"); lista[1].setNMaglia("22"); lista[2] = new players(); lista[2].setNome("Carlo"); lista[2].setRuolo("Soffiatore"); lista[2].setCognome("Bianchi"); lista[2].setNMaglia("01"); } squadraManager.loaderList = function(){ jQuery.each( lista, function(chiave, oggetto){ //leggo valori oggetti in array jQuery("#ul_list").append("
  • "+oggetto.getCognome()+"
  • ").listview("refresh"); }); } squadraManager.init = function(){ /*init */ squadraManager.initArray(); squadraManager.loaderList(); } jQuery(function(){ squadraManager.init(); });

    Necesito enviar la identificación de la lista cliqueada a la página siguiente. la idea final es cargar en la segunda página “#detail” los detalles del jugador (el jugador está en una clase separada).

    Gracias por la respuesta

    Una plantilla de HTML / varias páginas

    Aquí hay un ejemplo de pasar un atributo de la vista de lista a la segunda página en una plantilla de página de 1 html:

    http://jsfiddle.net/Gajotres/Gv7UW/ – Objeto js como contenedor de almacenamiento

    http://jsfiddle.net/Gajotres/J9NTr/ – localStorage como contenedor de almacenamiento

    Básicamente, lo que quiere hacer es crear un objeto javascript persistente para fines de almacenamiento. Como ajax largo se usa para cargar páginas (y la página no se recarga de ninguna manera) ese objeto permanecerá activo.

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

    Plantilla de páginas HTML múltiples

    Lamentablemente, este ejemplo no se puede hacer a través de jsFiddle, así que publicaré los archivos necesarios:

    HTML 1:

        jQM Complex Demo           

    HTML 2:

        jQM Complex Demo       

    Second Page

    Back

    operations.js:

     $(document).on('pageshow', '#second', function(){ alert(getParameterByName("id")); }); function getParameterByName(name) { return decodeURI( (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] ); } 

    Demo de autenticación de usuario

    Otro ejemplo que no se puede mostrar con un ejemplo jsFiddle, a diferencia del anterior, este tendrá script SQL adjunto. Te aconsejo que crees una mejor lógica de lectura de db, esta es una solución simple, propensa a la inyección de SQL, pero funcionará bien para tu tarea:

    index.php:

        jQM Complex Demo         

    Login Page

    Login

    Here goes content

    Page footer

    json.php:

     {'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 */; 

    Más información

    Si desea obtener más información sobre este tema, eche un vistazo a este artículo . Encontrará varias soluciones con ejemplos.