PhoneGap con uso de PHP: Rutas relativas del documento.

joseanjim · #1 (**permalink**) 20/02/2012, 23:13

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?

ZiTAL · #2 (**permalink**) 21/02/2012, 03:05

podrías probar con rutas absolutas o con el tag BASE:

http://www.w3schools.com/tags/tag_base.asp

joseanjim · #3 (**permalink**) 23/02/2012, 03:44

Por lo que sé... normalmente en un proyecto phonegap todo el contenido suele estar en el directorio www del workspace de eclipse. Se suelen usar rutas relativas...
He estado investigando en foros de habla inglesa. Voy a probar a meter el resultado de window.location.href en una variable para poder volver ahí en un momento dado... Ya os contaré si consigo algo...

unbudah · #4 (**permalink**) 14/01/2013, 12:05

Lo conseguistes poniendo url Absoluta?