[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!


#12

Estimado Daniel saludos, tienes un ejemplo funcional de F7 que contemple unas 5 páginas, te cuento tengo por ejemplo 5 páginas: index, page1, page2, page3, page4, donde en index se ingrese el user y pass, y luego pase a page1 quien recibe los datos de usuario para mostrarlos, luego pasa a la page2 donde realiza una operacion por ejemplo seleccionar algo, luego pasa a la page3, donde realiza otra operación cualquiera, y luego a la page4 donde finaliza la operación. Estas páginas se pasan información una a otra para complatar la operación y finalmente el cierre de seción del usuario. La verdad amigo no he encontrado nada que me ayude a realizar una aplicación así sensilla pero con F7, ya que es complicado entenderlo de primera instancia. Si puedes orientarme sería genial Muchas Gracias!


#13

Hola Pablo

He visto que has publicado en mi blog, te respondo mejor por aquí para que tenga mayor visibilidad.

Ejemplo como tal no tengo, pero te puedo hacer un resumen de funciones, igualmente, has visto los tutoriales de mi blog?

¿Que versión de F7 usas?

Saludos


#14

hola pablo,
Yo uso f7-vue, con vuex, un state management.
Si no usas vue, podes probar con esto


Por ahi es una solucion un poco extrema, pero en principio se adapta a lo que necesitas.


#15

Hola Daniel gracias por tu respuesta, estoy usando Framework7 V2 con el template simple sin Vue aunque quiero integrarlo también (https://framework7io.github.io/framework7-template-single-view/), vi tus tutoriales estaán rebuenos pero están para la versión 1 según vi

Esto es lo que hago con cada pagina pero creo que no es la mejor forma para manipular cada página y poder traspasar data entre ellas:

Mucgas gracias

var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({
root: ‘#app’, // App root element
id: ‘io.framework7.testapp’, // App bundle ID
name: ‘Tamed Service’, // App name
theme: ‘auto’, // Automatic theme detection
// App routes
routes: routes,
});

var mainView = app.views.create(’.view-main’, {
url: ‘/’
});

$$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (e) {

app.input.focus(’[name=“username”]’);
$$(’#btnAcceder’).on(‘click’, function () {
var username = $$(’[name=“username”]’).val();
var password = $$(’[name=“password”]’).val();

      app.router.navigate("/perfil_usuario/?username="+username+"&password="+password);
    }
  });
}

});
})

$$(document).on(‘page:init’, ‘.page[data-name=“perfil_usuario”]’, function (e, page) {

var page = e.detail;

var username = page.route.query.username;
var username = page.route.query.password;

})


routes = [
{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/perfil_usuario/’,
url: ‘./pages/perfil.html’,
},
]


#16

Hi good morning, I have a question and I need help you again please, how to can data insert from api to local array, this is my code that I have in a page template using component with Framework7:

return {
data () {
return {
userName: this.$route.params.userName,
userData: null,
data: []
}
},
on: {
pageInit: function (e, page) {
this.getUserData()
console.log('parametro desde pagian anterior: ’ + this.userName)
}
},
methods: {
getUserData () {
// ej llamas a una api
app.request.json(‘https://api.dominio.com/userdata/’ + this.userName, function (res){
console.log(res);
data.push(res.username);
})
}
}
}

Thank you!


Hola buenos días, tengo una pregunta y necesito ayuda otra vez, por favor, cómo puedo insertar datos desde una API a una matriz local, este es mi código que tengo en una plantilla de página que usa un componente con Framework7

return {
data () {
return {
userName: this.$route.params.userName,
userData: null,
data: []
}
},
on: {
pageInit: function (e, page) {
this.getUserData()
console.log('parametro desde pagian anterior: ’ + this.userName)
}
},
methods: {
getUserData () {
// ej llamas a una api
app.request.json(‘https://api.dominio.com/userdata/’ + this.userName, function (res){
console.log(res);
data.push(res.username);
})
}
}
}

Muchas Gracias !