[SOLUCIONADO] [v2] Cambiar contenido dinamicamente a un elemento html o contenido


#1

Hola de antemano muchas gracias, tengo una dificultad a la hora de un login ( ya lo tengo funcionando ) el tema es que quiero hacer cuando inicie el login, en la siguiente pagina agregue el nombre de usuario en algun elemento html, en la pagina login-page.html (de la carpeta pages/ ) lo tengo asi donde redirecciona al home una vez los datos son correctos:

app.router.navigate("/home/");
$(’.userma’).html(username);

donde .userma es una etiqueta html donde deseo salga el nombre ( siento que deje el codigo donde no era )

Un punto importante es que la pagina home.html no esstá dentro de un < templat e></t emplat e> ya que lo intenté pero al hacer login no queria funcionar para irse a esa pagina, entonces se los quité y ahí si funcionó, pero mi problema es ahora como modificar eso dinamicamente el contenido de un elemento HTML, la ayuda es de suma urgencia.

Si puedes ayudarme con ello, te agradeceria mucho.


#2

Hola!

Gracias por mover la publicación, te comento.

Cuando el usuario inicia sesión deberías guardar los valores de id, nombre, token, etc en la variable principal así siempre las tendrás disponibles.

Puedes hacer lo siguiente. En el evento onPageInit de la página que vas a cargar es donde tienes que hacer ese cambio de dato, ya que cuando se lanza el navigate después haces el cambio pero aún no está en el DOM, la única opción es que uses el evento onPageInit.

El cambio lo estás haciendo a través de la clase, por lo tanto deberías tener algo como

<div class="userma">AQUI VA EL NOMBRE</div>

Prueba y me cuentas :slight_smile:
Saludos


#3

Hola amigo, creo que la solucion que me dices funcionaria si mi pagina fuera tipo pero no es asi, la pagina la cual necesito que cargue dinamicamente el nombre de usuario ( lo tengo como localstorage ) pero mi pagina empieza con “<div class="page">” en javascript si agrego el evento “onPageInit” no me ejecutaria el evento, en cambio si mi pagina fuera con etiquetas template el evento “onPageInit” creo que si me cargaría, sim embargo voy a mirar la forma de ponerlo tipo template esa pagina en especial, agradezco mucho tu ayuda amigo!!! ya te contaré como me fué


#4

Hola

El evento no tiene porque estar en la página que estás creando a no ser que sea template7, el evento puedes crearlo cuando creas la variable iniciar new Framework7.

Es un evento del DOM y las páginas aunque sean separadas funciona.


#5

ahhhhh entendido, asi en verdad no lo he probado, pero voy a tomar tu consejo a ver que tal!, ya te cuento amigo! mil gracias!!!


#6

Amigo, por cierto, yo tengo la version 2.0.2 la ultima, creo que el evento “onPageInit” no existe… sin embargo estoy buscando a ver si encuentro otro evento.


#7

Hola amigo, ya se ha solucionado el inconveniente, te comento :slight_smile:
mi error era en el archivo de routes.js

lo tenia de la siguiente manera:
{
path: ‘/home/’,
url: ‘./pages/home.html’,
name: ‘home’,
},

lo cambié a :

{
path: ‘/home/’,
componentUrl: ‘./pages/home.html’,
},

y la funcion que me diste para la versión 2.0.2 es:

pageInit: function(e, page) {
console.log(‘pageInit’, page);
$$(’.userma’).html(username);
},
entonces al cargar la pagina el metodo pageinit ejecuta lo que necesito y le asigno el nombre de usuario!!!, muchas gracias por tu ayuda mi amigo!!! muchas gracias! tema solucionado!


#8

#9

Hola! Para finalizar, puedes usar este evento para el “pageInit” en cualquier parte de tu código javascript, solo tienes que tener en el div con la clase page añadir una clase propia para esa página, o un id.

Este evento se lanzará cuando se inicie la página y cuando se reinicie.

$ tiene que tener el valor Dom7.

$(document).on("page:init page:reinit",".page-ejemplo", function(){
	console.log("Iniciada Página Ejemplo");
});

Saludos


#10

#11

Entendido mil gracias lo voy a tener muy en cuenta!