He desarrollado una aplicación móvil con "Jquery Mobile" y "Html5", inicialmente cargaba un (.html) local de ésta forma.
pagina index.html
Cita:
y en la página2.html tengo el siguiente código. <a href="pagina2.html" data-ajax="false" data-transition="none" >
Cita:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Titulo de la página</title>
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/scripts.js" type="text/javascript" charset="iso-8859-1"></script>
</head>
<body>
<ul id="ftro" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Filtrar..." ></ul>
<button onclick="mifuncion();" id="btnprueba">Probar</button>
<script>
$j.ajax({
url: "http://localhost/Service1.svc/data",
data: '',
type: "GET",
contentType: "application/x-www-form-urlencoded",
dataType: 'JSON',
success: function (data) {
result = JSON.parse(data);
List = '';
$j.each(result, function (key, val) {
List += "<li class='List ui-li ui-li-static ui-btn-up-d ui-screen-hidden'>" + val.name+ "</li>";
})
var sugList = $j("#ftro");
sugList.html(List);
}
}, error:
function (XmlHttpError, error, description) {
}
})
</script>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Titulo de la página</title>
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/scripts.js" type="text/javascript" charset="iso-8859-1"></script>
</head>
<body>
<ul id="ftro" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Filtrar..." ></ul>
<button onclick="mifuncion();" id="btnprueba">Probar</button>
<script>
$j.ajax({
url: "http://localhost/Service1.svc/data",
data: '',
type: "GET",
contentType: "application/x-www-form-urlencoded",
dataType: 'JSON',
success: function (data) {
result = JSON.parse(data);
List = '';
$j.each(result, function (key, val) {
List += "<li class='List ui-li ui-li-static ui-btn-up-d ui-screen-hidden'>" + val.name+ "</li>";
})
var sugList = $j("#ftro");
sugList.html(List);
}
}, error:
function (XmlHttpError, error, description) {
}
})
</script>
<body>
y en el archivo scripts.js tengo lo siguiente.
Cita:
function mifuncion(){
alert('');
}
alert('');
}
éste código funciona perfecto en el computador, pero en el celular cuando se abre la pagina2.html muestra pantalla blanca.
para solucionar este problema he cambiado la forma en como se carga la pagina2.html de esta forma
Cita:
Con este código en el computador me sale un "error loading page", pero en el celular abre la pagina2.html muy rápido y con un efecto muy elegante, pero el problema ahora es que no funciona nada del javascript, es decir, el <UL> que debió llenarse con el ajax ya no se llena, y el mensaje que debió salir cuando le doy click en el botón ya no sale. <a href="pagina2.html" data-transition="slidedown" >
agradezco cualquier ayuda.
gracias.
