Estoy empezando a trastear con PhoneGap, que como muchos sabréis permite desarrollar aplicaciones web para android y otros s.o. moviles (compatibles con las APIs de Google y con el Market).
En las pruebas que estoy haciendo ya he usado un enlace con una ruta relativa y funciona correctamente...
Código HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css" />
<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>¡Hola mundo!</h1>
<p>Esto es sólo el comienzo...</p>
<a href="nuevo.html">Nuevo juego</a>
</body>
</html>
Luego hice pruebas con jquery y ajax, mandando datos por post a scripts php que los procesan y devuelven html que se muestra en un div vacio sin recargar la página. Tambien funciona.
Código HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css" />
<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<p>Elige una clase de personaje.</p>
<form action="http://www.joseanjim.es/android/practica/guardar.php" name="formu" method="post">
<input type="radio" name="clase" value="caballero">Caballero<br>
<input type="radio" name="clase" value="mercenario">Mercenario<br>
<input type="radio" name="clase" value="guardabosques">Guardabosques<br>
<input type="radio" name="clase" value="ladrón">Ladrón<br>
<p>¿Cómo te llamas?</p>
<input type="text" name="nombre">
</form>
<script language="javascript">
$(document).ready(function() {
// Esta primera parte crea un loader no es necesaria
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
// Interceptamos el evento submit
$('#form, #fat, #formu').submit(function() {
// Enviamos el formulario usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
<div id="result">
<input type='button' name='empezar' value='Empezar' onclick="location.href='main.html'" >
</div>
</body>
</html> Lo malo es que a partir de ese momento parece ser que la ruta asignada al documento pasa a ser la de mi servidor. Cuando intento usar un evento onclick para hacer que un botón cargue un documento html que se encuentra en el interior del proyecto PhoneGap me intenta buscar esa ruta relativa en mi server...
Conclusión: ¿Alguien sabría como volver a situar la ruta del documento en los archivos del proyecto?