php - examples - jQuery Mobile: envío de datos de una página a otra
jquery mobile examples (1)
Tengo un problema, necesito enviar datos (una identificación) de una lista a otra página. este es el código html:
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Players App</h1>
</div><!--/header-->
<div data-role="content">
<ul data-role="listview" id="ul_list" data-inset="true">
</ul>
</div><!--/content-->
<div data-role="footer">
<h4>Players list</h4>
</div><!--/footer-->
</div><!--/page-index-->
<div data-role="page" id="detail" data-add-back-btn="true">
<div data-role="header">
<h1>Player detail</h1>
</div><!--/header-->
<div data-role="content">
<ul data-role="listview" id = "" data-inset="true">
</ul>
</div><!--/content-->
<div data-role="footer">
<h4>Players list</h4>
</div><!--/footer-->
</div><!--/page-detail-->
</body>
</html>
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("<li><a id=''"+ oggetto.getId() +"det'' href=''#dettaglio''>"+oggetto.getCognome()+"</a></li>").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:
<!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]
);
}
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:
<!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 */;
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.