4

Estoy realizando una aplicación con Jquery Mobile y mi duda es la siguiente.

Tengo todo el html que se necesita para visualizar la aplicación en un index.html, cuando el usuario interactua con algún elemento del doom se carga una parte del contenido del index.html y otra parte dinámicamente después de procesar la respuesta del servidor con los datos que quiere visualizar el usuario. Hasta aquí todo correcto, el problema viene cuando estás en una "pantalla" que parte de ella se ha generado dinámicamente y refrescas la página, evidentemente se carga la parte estática de la página y se pierde toda la parte dinámica que se ha generado.

Ejemplo concreto: Cuando el usuario se loguea con su cuenta y quiere ver su perfil, se carga la vista estática HTML que contiene diferentes inputs que dependiendo del usuario que se ha logueado contendrá una información u otra, si después de haber cargado la página con sus datos, dicha página se refresca, se borra todo el contenido dinámico de la misma y se queda toda la parte estática del HTML, con los inputs vacios.

Quisiera saber si hay alguna solución fácil, para que al recargar la página se pueda seguir visualizando todo el contenido, ya sea estático o dinámico.

Código:

// Mi perfil público
$("#myprofile").on("click", function(){

//comprobamos que el usuario esta logueado
if (localStorage.rnl01user && localStorage.rnl01password) {

        //spinner de cargado
        $.mobile.loading("show");

        //creamos petición XML con valores necesarios
        var getprofile = getLoginRequest(localStorage.rnl01user, localStorage.rnl01password);

        //petición AJAX al servidor con el código XML generado
        callWebServiceAsync(URL_API_KERNEL, getprofile, successGetProfile);

        //Reiniciamos los valores
        $("#ProfileImg").html("");
        $("#ProfileCountry").html("");
        $("#ProfileTown").html("");
        $("#ProfileEvents").html("");
        $("#ProfileDescriptionTitle").html("");
        $("#ProfileDescriptionText").html("");
        $("#ProfileEmail").html("");
        $("#editProfilePass").text("Cambiar Contraseña");
        $("#editProfilePass").attr("data-pass", localStorage.rnl01password);
        $("#editProfileCity").text("Privado");
        $("#ProfileEventsIns").html("");
        $("#ProfileOrgGest").html("");


    }else{
        $.mobile.changePage("#nologinMsg");
    }

    // Función que se encarga de procesar el XML devuelto por el servidor, donde se encuentran todos los datos
    function successGetProfile(data, textStatus, jqXHR)  {

        //creamos variables
        var name="",email="",surName="",country="",region="",description="",image="",events="";

        //si devuelve valores los guardamos
        if ($(data).find("LoginRequestResult")) {
            var name = $(data).find('Name').text();
            var email = $(data).find('Email').text();
            var surName = $(data).find('Surname').text();
            var country = $(data).find('Country').text();
            var region = $(data).find('Region').text();
            var description = $(data).find('Description').text();
            var image = $(data).find('Image').text();
            var events = parseInt($(data).find('ActiveEvents').text()) + parseInt($(data).find('ClosedEvents').text());
            var cityCode=$(data).find("CityCode").text();
            var phone=$(data).find("PhoneNumber").text();
            var city=$(data).find("City").text();
            var inscribedevents=$(data).find("InscribedEvents").text();
            var orgestion=$(data).find("ManagedOrganizations").text();

        //si el usuario tiene imagen si pinta la imagen y el nombre, sino se pinta solo el nombre
        if (image!=""){
            $("#ProfileImg").html('<img class="ProfileImage" src="'+image+'" /><h2 style="display:inline;margin-left:25px;">'+ name+'</h2>');
        }else{
            $("#ProfileImg").html('<h2>'+ name+'</h2>')
        }

        //pintamos los valores obtenidos en los campos del html
        $("#ProfileCountry").html(country);
        $("#ProfileTown").html(region);
        $("#ProfileEvents").html(events);
        $("#ProfileDescriptionTitle").html("Presentacion de "+name);
        $("#ProfileDescriptionText").html(description);
        $("#ProfileEmail").html(email);

        //ponemos atributo codigo de la ciudad
        if (cityCode!=""){
            $("#editProfileCity").attr("city-code",cityCode);
        }else{
            $("#editProfileCity").attr("city-code","791000");
        }

        //pintamos los valores obtenidos en los campos
        $("#profileDescription").val(description);
        $("#profilePhone").val(phone);
        $("#ProfilePhone").html(phone);

        //pintamos el nombre de la ciudad
        if (city!=""){
            $("#editProfileCity").text(city);   
        }

        $("#ProfileEventsIns").html(inscribedevents);
        $("#ProfileOrgGest").html(orgestion);

        }

        //Cambiamos a la página que contiene los datos del perfil del usuario
        $.mobile.changePage("#mypublicprofile");

        //quitamos el spinner de carga
        $.mobile.loading("hide");
    }

});

Bien, os explico el código por encima para que sea más sencillo para todos:

Lo primero que hacemos es comprobar que el usuario está logueado, de no ser así se redirige a una página que lo único que hace es informar de que para ver el contenido de la página tiene que estar loqueado, con un botón que le lleva a la pantalla del login.

Si el usuario está loqueado creamos un XML, que se enviará al servidor mediante una petición AJAX, dicho XML se genera con la función getLoginRequest y los parámetros que le hemos pasado.

Una vez que se ha generado el XML, se guarda en una variable en este caso var getprofile, que contendrá el XML. Después esta variable la pasamos como parámetro a una función callWebServiceAsync que se encarga de hacer la llamada al servidor mediante AJAX con el XML que se ha generado. Más adelante reiniciamos los valores de todos los elementos del HTML por si ya contenían alguno.

Cuando el servidor nos responde con un status 200, va a la función que le hemos indicado, en este caso successGetProfile. La cual recoge toda la información que nos ha devuelto el servidor y la procesa.

Lo que hace esta función sencillamente es buscar todos los valores que necesitamos pintar en el HTML, como el nombre, ciudad, provincia, etc.

Imagenes:

Botón que provoca el evento

Datos que pinta

Después de refrescar

4
  • Hola y bienvenido David, sería mucho mejor para todos si mostraras parte dle código que tienes para poder analziar mejor las posibles respuestas. Un saludo. Commented el 28 jun. 2016 a las 10:17
  • 1
    Gracias por contestar tan rápido, he vuelto a editar la pregunta con parte de código de ejemplo, por si os sirve de algo más. Un saludo
    – David
    Commented el 28 jun. 2016 a las 11:52
  • deberías intentar reproducir el problema con el mínimo código posible: un solo campo, sin XML, solo un par de líneas de código ... elimina todo lo superfluo, y edita tu pregunta con esa mínima porción
    – PA.
    Commented el 28 jun. 2016 a las 15:20
  • Hola de nuevo Shaz, al final buscando por google me he dado cuenta de que es muy complicado hacer lo que yo quiero hacer, así que hemos pensado que el usuario cuando refresque la página se vaya al inicio de la aplicación, pero sigo encontrándome con un problema..., cuando se refresca la página y cambia a la página de bienvenida, dejan de funcionar todos los botones, osea todos los listeners de la página dejan de funcionar con lo que no se puede hacer ninguna acción, hay alguna forma de decirle a se vuelva a recargar todo estilos, javascripts, html?
    – David
    Commented el 29 jun. 2016 a las 7:27

3 respuestas 3

1

Dinamicamente sin refrescar absolutamente nada.

Cada que hacen un evento "y este genera contenido dinámico", puedes modificar la URL así como lo hace facebook a la hora de abrir una foto (la URL cambia y la foto aparece, pero jamás se carga/recarga la ventana.)

Ejemplo, tengo la siguiente URL

httx:////projectwatchfree.tv/tv-listings/

var current_url = (window.location.href).split('page');
	current_url = (current_url[0]).split('?');

    var pagex = 3;
    var url_letter = 'd';
	window.history.pushState("", "", current_url[0]+"page/"+pagex+"/letter/"+url_letter);

la linea 1 extrae la URL y la recorta desde "page"

la linea 2 extrae el primer resultado del anterior y lo corta donde haiga un "?"

Nuestra url quedaría igual

La linea 3 agrega automaticamente/dinamicamente/ó cambia la URL y sin recargar la ventana.

Entonces con este ejemplo mi URL queda asi

httx:////projectwatchfree.tv/tv-listings/page/3/letter/d

y lo mejor es que si el usuario copea y pega esa URL, vuelve a dar entero actualiza.

Mis parámetros aun se conservan,los leo y muestro los resultados dinámicos que había mostrado anteriormente (no se pierden).

Saludos.

2
  • Gracias por contestar John, el problema que tengo es que Jquery Mobile nativamente no permite pasar parámetros por la URL, todo lo que venga después se lo carga. Este problema lo he resuelto hace poco para poder compartir una página por facebook y whatsapp, puedo guardar parámetros que me los guardo en una variable local del navegador y después compruebo si existe esa variable local, si existe recojo los parámetros que necesito para hacer la llamada al servidor y le paso los parámetros a la llamada... Otro problema es que aparte de generar contenido dinámico se hacen muchas cosas más
    – David
    Commented el 28 jun. 2016 a las 13:33
  • Con lo que debería de volver a repetir todo el código, lo interesante sería poder hacer un trigger del evento que genera esa llamada con los parámetros que le pase con alguna variable almacenada localmente
    – David
    Commented el 28 jun. 2016 a las 13:35
1

Podrías utilizar el localStorage (Documentación) para ir guardando los valores que necesites.

Para guardarlos, crea un evento onblur, ontextchanged o lo que necesites y guarda el valor:

function campo1modificado() {
    var valor = document.getElementById("campo1").value;
    localStorage['campo1'] = valor;
}

Y añade este código en el document ready para que cada vez que se cargue la página compruebe si has guardado valores.

$(document).ready(function() {
    var campo1= localStorage['campo1'];
    if (campo1.lenght > 0) {
        // guarda dónde queires este campo
        document.getElementById("campo1").value = campo1;
    }
}

EDIT: Si se opta por ir a la página principal y queires reiniciar los elementos en javascript utiliza esta función en el document ready:

$(document).ready(function() {
    window.location.reload(false); //firefox
    window.location = self.location; //chrome
    window.location.href = window.location.href //IE
}
10
  • Hola Miquel, gracias por contestar, lo que dices es guardar cada vez que se genere una página con contenido dinámico todos los valores de dicha página con por el ejemplo el id del elemento DOM y el valor que se le ha establecido verdad?, lo que pasa que si tengo que guardar cada uno de los valores a estas alturas de la aplicación me puedo volver loco. No sé si habrá otra forma de hacerlo, guardándome todo el html en sí que se ha generado o algo y en caso de que se encuentre en la session storage mostrar dicho HTML. A ver si alguien más puede inspirarme jejeje, a malas tendré que hacerlo asi
    – David
    Commented el 28 jun. 2016 a las 11:55
  • Hola @David, en las distintas aplicaciones que he realizado yo el mejor resultado siempre ha sido ese. Piensa que sólo lo tienes que hacer por aquellas páginas en las que necesites que en caso de refresh de la página no pierdas nada. Cuándo lo has echo un par de veces es más rápido de lo que parece. Commented el 28 jun. 2016 a las 11:58
  • Hola de nuevo Miquel, al final buscando por google me he dado cuenta de que es muy complicado hacer lo que yo quiero hacer, así que hemos pensado que el usuario cuando refresque la página se vaya al inicio de la aplicación, pero sigo encontrándome con un problema..., cuando se refresca la página y cambia a la página de bienvenida, dejan de funcionar todos los botones, osea todos los listeners de la página dejan de funcionar con lo que no se puede hacer ninguna acción, hay alguna forma de decirle a se vuelva a recargar todo estilos, javascripts, html?
    – David
    Commented el 29 jun. 2016 a las 7:43
  • Edito mi respuesta indicando lo que me preguntas. Commented el 29 jun. 2016 a las 7:45
  • Hola Miquel gracias por la contestación, pero me sigue sin funcionar, lo raro es que en firefox si que funciona correctamente, no entiendo xq en chrome no me funciona...., voy a seguir investigando a ver a que se debe. Me estoy volviendo loco ya!!! jejej
    – David
    Commented el 29 jun. 2016 a las 8:32
0

al final vi inviable el guardarme todas las variables en localStorage, ya que aparte de las variables cuando se genera un evento se hacen muchas otras cosas aparte de recoger datos, con lo que debería de recrear todo el proceso otra vez, así que decidí que mandarlo al login cuando el usuario hiciera un refresh de la página advirtiéndole primero de que la información se podría perder....este método me funcionaba bien en Chrome, Opera y Firefox, pero no en IE y Safari, estos dos últimos navegadores no dejan cambiar de página antes de que refresque la página, con lo que me quedaba en las mismas, así que en el HTML puse un script para que me redireccionara en caso de que el documento se intentara recargar de una URL distinta a la del login. Con esto arreglé las incompatibilidades de estos dos navegadores respecto a lo otros. Un saludo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.