Phonegap (Android) - Enviar parámetro por .append

Submitted by Payan on Mar, 08/23/2016 - 11:10

Hola,

He creado mi primer proyecto en phonegap con eclipse (android), la duda que tengo en este momento es lo siguiente:
- Para resumirlo brevemente, tengo dos páginas html y quiero enviar un valor de una página a otra, pero no consigo recoger el valor en la segunda página.
- En la primera página listo los registros de la base de datos y al pulsar sobre cada registro deberia de enviar un valor a la página “detalle.html”, es ahí donde no recoge el valor.

Os muestro el código por si podeis orientarme a como puedo conseguirlo, se que debe ser algo fácil pero lo he intentado en varias ocasiones pero siempre me muestra el valor ‘false’.Decir que en el pc, en el navegador si pasa los valores, entonces no se como podria hacerlo, he estado investigando y parece ser que jquery no tiene soporte sobre el paso de información con parámetros entre páginas independientes, no se hasta que punto puede ser correcto esto, de hecho existe un plugin pero lo he probado y tampoco funciona...

index.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>

<link rel="stylesheet" href="css/styles.css">
    <style>
            /*this block should go in the styles.css file*/
        .ui-panel-inner {
            padding:0px; /*make the buttons flush edge to edge*/
        }
        .ui-controlgroup {
            margin:0; /*make the buttons flush to the top*/
        }
        #header {
            height:54px;
        }
        #bars-button {
            margin:7px;
        }
    </style>
</head>

<body onload="dbConectar();">
 
<div id="home">
  <div id="header">
    <a id="bars-button" href="#navpanel">Opciones</a>
    <a id="bars-button" href="#navpanel">Menu</a>
  </div>
    <div>
       <h3>
           Menu secundario
        </h3>
    </div>
   <div>
     <ul id="List">
    </ul>
 </div>
 
<div>
  <a href="menui.html"> <src="icon/menu_inferior.png">Menu inferior</a>

 </div>
 
</div>

</body>
</html>

archivo .js que intenta enviar la variable con .append.

function dbConectar(){
     var db = window.openDatabase("amigos", "1.0", "friends", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }
 
    //create table and insert some record
    function populateDB(tx) {
   tx.executeSql('DROP TABLE IF EXISTS amigos);
        tx.executeSql('CREATE TABLE IF NOT EXISTS amigos (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Nickname TEXT NOT NULL,Image TEXT NOT NULL)');
     
        tx.executeSql('INSERT INTO amigos(Name,Nickname,Image) VALUES (Nombre1", "Apellido1","foto1.jpg")');
       
        tx.executeSql('INSERT INTO amigos(Name,Nickname,Image) VALUES ("Nombre2", "Apellido2","foto2.jpg")');
     
    }
 

    function errorCB(err) {
        alert("

Error processing SQL: "+err.code);
    }
 

    function successCB() {
      //  alert("

success!");
  var db = window.openDatabase("amigos", "1.0", "friends", 200000);
        db.transaction(queryDB,errorCB);
    }
 

    function queryDB(tx){
        tx.executeSql('SELECT * FROM amigos',[],querySuccess,errorCB);
    }
 
    function querySuccess(tx,result){
        $('#List').empty();
        $.each(result.rows,function(index){
            var row = result.rows.item(index);
          $('#List').append('<li><a href="

detalle.html?id='+25 +'">' +
            '<img src="pics/' + row['Image'] + '" />' +
            '<p class="line1">' +row['Name']+'</p>' + row['Nickname']+'</a></li>');
        });
 
        $('#List').listview();
    }// JavaScript Document

A esta página “detalle.html” quiero enviar la variable.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>

<link rel="stylesheet" href="css/styles.css">

</head>

<body>

<script type="text/javascript">

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

getQueryVariable("id");

</script>

 

</body>
</html>