JavaScript - Refresh de contenido Sqlite

 
Vista:
sin imagen de perfil

Refresh de contenido Sqlite

Publicado por g (3 intervenciones) el 15/05/2015 15:42:37
Hola, tengo dos archivos HTML, index.html llama a opcion1.html

Mi problema es que opcion1.html si lo ejecuto solo, genera una base de datos sqlite y la muestra en una lista sencilla, pero si ejecuto el index, y llamo a opcion1, este no la muestra. Que pasa cuando llamo a opcion1 que no muestra la tabla de la base ? Gracias !!!

index.html
1
<li><a href="opcion1.html" data-role="button" data-icon="search" data-iconpos="notext">Personas</a></li>

opcion1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<title>personal de la GAyF</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
var db = window.openDatabase("GayF", "1.0", "GayF personas", 800000);
db.transaction(populateDB, errorCB, successCB);
}
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS SoccerPlayer');
tx.executeSql('CREATE TABLE IF NOT EXISTS SoccerPlayer (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Club TEXT NOT NULL)');
tx.executeSql('INSERT INTO SoccerPlayer(Name,Club) VALUES ("Alexandre Pato", "AC Milan")');
tx.executeSql('INSERT INTO SoccerPlayer(Name,Club) VALUES ("Van Persie", "Arsenal")');
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
alert("Ok el insert");
var db = window.openDatabase("GayF", "1.0", "GayF personas", 800000);
db.transaction(queryDB,errorCB);
}
function queryDB(tx){
tx.executeSql('SELECT * FROM SoccerPlayer',[],querySuccess,errorCB);
}
function querySuccess(tx,result){
$('#SoccerPlayerList').empty();
for(index=0;index<result.rows.length;index++)
{
var row = result.rows.item(index);
$('#SoccerPlayerList').append('<li><a href="#"><h3 class="ui-li-heading">'+row['Name']+'</h3><p class="ui-li-desc">Club '+row['Club']+'</p></a></li>');
}
$('#SoccerPlayerList').listview();
$('#SoccerPlayerList').listview('refresh');
$('#SoccerPlayerList').listview().listview('refresh');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Jugadores</h1>
</div>
<div data-role="content">
<ul id="SoccerPlayerList">
</ul>
</div>
</div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Refresh de contenido Sqlite

Publicado por Vainas (258 intervenciones) el 18/05/2015 09:23:03
Buenas:

Esto me suena que ya estaba antes por el foro. Si mal no recuerdo la solucion que di es algo asi:

Lo que sucede es que jquery mobile carga las paginas por ajax (no es que se refresque entero la web sino que trae por ajax el html que le estas pidiento) y cuando hace esto busca solo dentro el contenido bajo data-role="page" (esto no me lo invento, lo lei aqui: http://stackoverflow.com/questions/9418309/jquery-mobile-not-loading-new-page-scripts

Entonces tus opciones son:

1. Colocar el contenido dentro del div data-role="page"
2. puedes usar en el enlace que llama a la pagina <a href="/" data-ajax="false"> para que carge toda la pagina. Dicen que esto ultimo puede tener el inconveniente que si usas algo mas de codigo en las paginas anteriores tendras que ir cargandolo en cada una de las paginas que llames asi con lo cual duplicas codigo...

Creo que habia otra opcion pero ahora mismo no me acuerdo. La busco y te lo digo.

Espero que sirva.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Refresh de contenido Sqlite

Publicado por guille (3 intervenciones) el 18/05/2015 15:12:40
Gracias, está funcionando perfecto !
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Refresh de contenido Sqlite

Publicado por guille (3 intervenciones) el 18/05/2015 17:36:43
Una pregunta, cómo podría agregarle a la lista, un filter y un autodivider ? si m e pudieras ayudar, lo agradecería.

Lo debo hacer dentro de la function, verdad ?

function querySuccess(tx,result){
$('#SoccerPlayerList').empty();
for(index=0;index<result.rows.length;index++)
{
var row = result.rows.item(index);
$('#SoccerPlayerList').append('<li><a href="#"><h3 class="ui-li-heading">'+row['Name']+'</h3><p class="ui-li-desc">Club '+row['Club']+'</p></a></li>');
}
$('#SoccerPlayerList').listview();
$('#SoccerPlayerList').listview('refresh');
$('#SoccerPlayerList').listview().listview('refresh');
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Refresh de contenido Sqlite

Publicado por Vainas (258 intervenciones) el 18/05/2015 18:29:33
Buenas:

Segun la documentacion un filter solo es colocar un el formulario y la etiqueta ul darle un atributo data-input http://demos.jquerymobile.com/1.4.0/filterable/ Eso sera fuera de el script. tendra que estar en tu codigo html.

El divider veo que solo es el atributo data-autodividers="true" en la etiqueta ul siempre y cuando sea dividir texto (cosas que empiecen por 'A', 'B', ....).

Si tienes que hacer algo mas aqui hay un ejemplo: http://www.raymondcamden.com/2013/12/17/Using-the-autodivider-feature-in-jQuery-Mobile

No lo veo complicado. Si necesitas ayuda dime.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Refresh de contenido Sqlite

Publicado por Vainas (258 intervenciones) el 18/05/2015 09:36:51
Buenas:

Creo que lo otro que puedes usar es esto:

1
2
3
$( document ).delegate("#aboutPage", "pageinit", function() {
  alert('A page with an id of "aboutPage" was just created by jQuery Mobile!');
});

Se trata basicamente de que en el la pagina principal coloques esto y el selector sea el enlace (#aboutPgae). En function ira el codigo a cargar cuando se carge la pagina que llamas (que es tu javascript).

El codigo de la pagina a llamar quedaria solo asi:

1
2
3
4
5
6
7
8
9
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Jugadores</h1>
</div>
<div data-role="content">
<ul id="SoccerPlayerList">
</ul>
</div>
</div>

Y en la principal el codigo que quieres cargar.

Espero haberme explicado. Tendria que probarlo tambien pero entiendo que esto es asi.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar