Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] recarga de js

Estas en el tema de recarga de js en el foro de Javascript en Foros del Web. Buenas noches amigos, Tengo un problema y se cual es pero no la solución Imaginen lo siguiente: Tengo una aplicacion donde uso ajax para cargar ...
  #1 (permalink)  
Antiguo 27/07/2015, 22:52
Avatar de andresbetancourt  
Fecha de Ingreso: julio-2008
Ubicación: colombia
Mensajes: 334
Antigüedad: 15 años, 8 meses
Puntos: 2
recarga de js

Buenas noches amigos,

Tengo un problema y se cual es pero no la solución

Imaginen lo siguiente:

Tengo una aplicacion donde uso ajax para cargar trozos de codigo html asincronamente.

Al cargar la pagina web inicial se carga un archivo js
Ese archivo adiciona listener de eventos acada conponente del html como enlaces, botones...

Cuando cargo de forma asincrona contenido html dentro de un div en la página principal desde la cual se navega en la app con ajax, esos nuevos componentes html se quedan sin listeners
Porque el js que contiene los addevent ya se ejecuto en si totalidad con la carga total de la pagina principal, y en ese primer momentos no se pudieron adicionar los listener a los componentes html cargados con ajax, simplemente porque no existian en el DOM de la página pues estos (componentes html) se van cargando con ajax de acuerdo a la navegacion del usuario por la web.

Como se soluciona eso? Es decir poder agregarles los escuchadores de eventos a nuevos componentes html que se van agregando al DOM inicialmente cargado.

Gracias
__________________
http://tecnologiaco.com/
  #2 (permalink)  
Antiguo 28/07/2015, 01:59
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 8 meses
Puntos: 72
Respuesta: recarga de js

Cita:
Iniciado por andresbetancourt Ver Mensaje
Como se soluciona eso? Es decir poder agregarles los escuchadores de eventos a nuevos componentes html que se van agregando al DOM inicialmente cargado.
De la misma manera, es decir, una vez creados los nuevos elementos se asignan los manejadores de eventos correspondientes con addEventListener, por ejemplo:
Código Javascript:
Ver original
  1. document.getElementById('divContenido').innerHTML= '<a href="#" id="elementoNuevo">un enlace</a>';
  2. document.getElementById('elementoNuevo').addEventListener('click', miFuncion, false);
  #3 (permalink)  
Antiguo 28/07/2015, 06:45
Avatar de andresbetancourt  
Fecha de Ingreso: julio-2008
Ubicación: colombia
Mensajes: 334
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: recarga de js

Hola lubtufano, gracias por tomarte el tiempo de responder

Si!, eso que dices lo se hacer.

Pero a lo que me refiero es que deseo hacer codigo limpio, es decir el codigo js lo tengo en archivos y no mezclado con el html.

Al cargar la página inicial, de hecho es la unica pagina html que se carga totalmente.

En ella se llama el archivo js y éste en su interior adiciona todos los escuchadores de event una vez la pagina ha cargado totalmente.

El problema es que no se puede en ese momento adicionar los escuchadores a elementos html que aun no se han cargado al DOM, y la razon por la que no se han cargado, es porque el usuario aun no ha empezado a interactuar con la aplicación, por ende no se ha cargado codigo html con ajax.

Una vez el usuario hace clic en algun enlace y con ajax se carga contenido hrml en un div destino, ese trozo de html cargado tiene enlaces y botones a los cuales no se como adicionarles los escuchadores de event, lo anterior, porque el js ya se ha cargado en su totalidad cuando el usuario accedio al sitio web por primera vez y allí es la unica vez donde se cargo el js con la función de "adiciones los escuchadores una vez la pagina haya cargado totalmente".

Como hago para recargar el archivo js para que adiciones los listener a los nuevos componentes html que se van cargando con ajax?????

De antemano gracias

Quedo a la espera de tu ayuda o la de cualquier otro.
__________________
http://tecnologiaco.com/
  #4 (permalink)  
Antiguo 28/07/2015, 10:15
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: recarga de js

Delega los eventos.

Si, por ejemplo, vas a cargar un botón con el id "bar" dentro de un <div> con el id "foo", tendrías que aplicar primero el evento click en el <div> y mediante la propiedad target del objeto del evento, tomas al elemento en el cual se produjo el evento y verificas si su id es igual a "bar"; de ser así, ejecutas tus instrucciones.

Un ejemplo:

Código Javascript:
Ver original
  1. document.querySelector("#foo").addEventListener("click", function(event){
  2.     if (event.target.id == "bar"){
  3.         console.log("¡Delegaste el evento!");
  4.     }
  5. }, false);

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 28/07/2015, 11:13
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 8 meses
Puntos: 72
Respuesta: recarga de js

Cita:
Pero a lo que me refiero es que deseo hacer codigo limpio, es decir el codigo js lo tengo en archivos y no mezclado con el html.
No necesitas mezclar código, mira este ejemplo.

escuchadores.html
Código HTML:
Ver original
  1.  
  2.     <title>titulo</title>
  3.     <script type="text/javascript" src="escuchadores.js"></script>
  4. </head>
  5.  
  6.     <input type="button" value="crear nuevo elemento" id="boton1">
  7.     <br>
  8.     <input type="button" value="mostrar alert" class="botonAlert">
  9.     <input type="button" value="mostrar alert" class="botonAlert">
  10.     <p id="parrafo"></p>
  11. </body>
  12.  
  13. </html>

escuchadores.js
Código Javascript:
Ver original
  1. window.addEventListener('load', asignarEscuchadores, false);
  2.  
  3. function asignarEscuchadores() {
  4.     document.getElementById('boton1').addEventListener('click', creaBoton, false);
  5.    
  6.     var botones= document.getElementsByClassName('botonAlert');
  7.     for(i=0; i<botones.length; i++) {
  8.         botones[i].addEventListener('click', verAlert, false);
  9.     }
  10. }
  11.  
  12. function creaBoton() {
  13.     document.getElementById('parrafo').innerHTML= document.getElementById('parrafo').innerHTML + '<input type="button" value="boton nuevo" class="botonAlert">'
  14.    
  15.         //se asigna el manejador a los nuevos elementos
  16.     var inputs= document.getElementById('parrafo').getElementsByTagName('input');
  17.     for(i=0; i<inputs.length; i++) {
  18.         inputs[i].addEventListener('click', verAlert, false);
  19.     }
  20. }
  21.  
  22. function verAlert() {
  23.     alert('Has pinchado un boton');
  24. }

Al tratarse de ajax creo que lo más adecuado es asignar los manejadores de eventos a los nuevos elementos en la misma función que se ejecuta al suceder el evento onreadystatechage.
  #6 (permalink)  
Antiguo 28/07/2015, 12:02
Avatar de andresbetancourt  
Fecha de Ingreso: julio-2008
Ubicación: colombia
Mensajes: 334
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: recarga de js

Muchas gracias muchachos por su ayuda

Son muy buenas ideas

Voy a ensayarlo y les cuento, creo que lo que mencionan va a funcionar.

Les estare contando
__________________
http://tecnologiaco.com/
  #7 (permalink)  
Antiguo 28/07/2015, 13:19
Avatar de andresbetancourt  
Fecha de Ingreso: julio-2008
Ubicación: colombia
Mensajes: 334
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: recarga de js

lubtufano y alexis88

estoy seguro que lo que mencionan va a funcionar, de verdad muchas gracias por su gran ayuda y tomar el tiempo para hacerlo.

ambas respuestas ayudan a tener un código limpio, separando la logica js de la vista html(interfaz grafica)
__________________
http://tecnologiaco.com/
  #8 (permalink)  
Antiguo 28/07/2015, 15:04
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: recarga de js

También tienes como opción el tener en un archivo aparte al script con las instrucciones que aplicarás en los elementos a añadir, luego, cuando vayas a añadir elementos, cargas el archivo y así podrás afectar a los elementos añadidos, pero la delegación de eventos es lo mejor para estos casos. En este capítulo del libro jQuery Fundamentals, tratan sobre eso. Te sugiero leerlo porque el concepto aplica igual para JS nativo como para alguna de sus librerías.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 28/07/2015 a las 15:12 Razón: Enlace
  #9 (permalink)  
Antiguo 07/08/2015, 16:48
Avatar de andresbetancourt  
Fecha de Ingreso: julio-2008
Ubicación: colombia
Mensajes: 334
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: recarga de js

muchas gracias a todos, sus respuestas fueron acertadas y me funciono, no había repuesto antes porque estaba ocupado y no lo había podido programar, pero ya lo probé y funciono.
__________________
http://tecnologiaco.com/

Etiquetas: html, js, recarga
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:08.