Problema al cargar HTML+JS con AJAX

[_vincen_]

Aclarar que es la primera vez que toco AJAX o JS, nunca lo he usado, siempre lo he hecho todo de forma "plana" si quieres nueva informacion, actualiza la pagina.


Al cargar HTML mediante AJAX no me funciona el javascript que usa ese HTML, me refiero a que cargo una lista de imágenes de la base de datos y al pasar el ratón por encima se debería de oscurecer y mostrar el nombre de la imagen, pero si lo hago mediante AJAX no funciona, es como si no cargara los JS.

Os dejo el código a ver si me podéis ayudar.


En el index.PHP

Código HTML:

<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","scripts/ajaxmysqlhome.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>


<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select:</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  </select>
</form>
<br>
<div id="txtHint"><b>here...</b></div><br> 

En scripts/ajaxmysqlhome.php

Simplemente un GET, y segun el valor del numero busca una cosa u otra en la base de datos, después hago un WHILE y muestro los siguientes resultados con echo

Código HTML:

<article class="border c-two" style="background-image:url(<?php echo $header; ?>); background-size: 314px 157px;">
	<div style="opacity: 0;" class="fdw-background">
		<h4><a href="<?php echo "/item/".$id."/".$clean; ?>" style="color:#fff;"><?php echo $name; ?></a></h4>
		<br>
		<div class="fdw-subtitle a-center"> <a href="<?php echo "/item/".$id."/".$clean; ?>"><?php echo $rsss; ?></a></div>
		<br>
		<center> <p><a class="btn btn-info btn-xs" href="<?php echo "/item/".$id."/".$clean; ?>" role="button">Test </a></p></center>
	</div>
</article>
					

Entonces ese codigo de arriba aparece en el INDEX.PHP, pero no funciona lo de pasar el raton y mostrar nombre y boton.


Cuando paso el ratón debería de aparecer esto, pero repito, si llamo el HTML por AJAX no funciona.

[caricatos]

Hola:

Leo y re-leo, y no veo ningún "mouseover"... ni un estilo ":hover"; creo que falta código, pero por regla general, debes asignar los eventos a los nuevos elementos que se añaden a las páginas mediante Ajax/javascript...

Saludos

[_vincen_]

Iniciado por caricatos

Hola:

Leo y re-leo, y no veo ningún "mouseover"... ni un estilo ":hover"; creo que falta código, pero por regla general, debes asignar los eventos a los nuevos elementos que se añaden a las páginas mediante Ajax/javascript...

Saludos

Todo eso que dices lo llamo en el index.php

Código HTML:

 <script src="dist/jscd/custom.js" type="text/javascript"></script> 

Sin usar AJAX (poniendo el html directamente en el index ) funciona perfectamente.

Como se asignan los eventos que se añaden mediante ajax/javascript? No tengo ni idea, es muy complejo?

[Alexis88]

Lo que necesitas es delegar eventos. Por ejemplo, supongamos que en mi documento cargaré mediante una petición asíncrona (Ajax), N imágenes que están en otro archivo y que son resultado de una búsqueda en la BD, luego, quiero que al darle clic a cada imagen, se haga más opaca. Entonces, al ser varias imágenes que tendrán el mismo efecto, en lugar de asignarles el evento a cada una mediante sus id, utilizo una clase en común, de tal modo que quedaría así:

Código Javascript:

[].forEach.call(document.querySelector(".laClase"), function(img){
    img.addEventListener("click", function(){
        this.style.opacity = 0.75;
    }, false);
});
 

Pero como originalmente no existen esas imágenes pues cargarán después mediante Ajax, desisto de lo anterior y mejor delego dicho evento ya sea al documento o a la ventana y mediante la propiedad target del objeto del evento, obtengo al elemento en el cual se ha producido el evento:

Código Javascript:

window.addEventListener("click", function(event){
    if (event.target.className == "laClase"){
        event.target.style.opacity = 0.75;
    }
}, false);
 

De esta manera, cada vez que se de un clic en cualquier parte de la ventana, se verificará si la clase del elemento pulsado corresponde con el de las imágenes y de ser así, lo hacemos opaco, y al ser la ventana la que siempre se verá afectada por el evento, dará igual si las imágenes se añaden después.

También puedes añadir el script al documento, pero eso ya lo decidirás tú.

Saludos

[_vincen_]

Iniciado por Alexis88

Lo que necesitas es delegar eventos. Por ejemplo, supongamos que en mi documento cargaré mediante una petición asíncrona (Ajax), N imágenes que están en otro archivo y que son resultado de una búsqueda en la BD, luego, quiero que al darle clic a cada imagen, se haga más opaca. Entonces, al ser varias imágenes que tendrán el mismo efecto, en lugar de asignarles el evento a cada una mediante sus id, utilizo una clase en común, de tal modo que quedaría así:

Código Javascript:

[].forEach.call(document.querySelector(".laClase"), function(img){
    img.addEventListener("click", function(){
        this.style.opacity = 0.75;
    }, false);
});
 

Pero como originalmente no existen esas imágenes pues cargarán después mediante Ajax, desisto de lo anterior y mejor delego dicho evento ya sea al documento o a la ventana y mediante la propiedad target del objeto del evento, obtengo al elemento en el cual se ha producido el evento:

Código Javascript:

window.addEventListener("click", function(event){
    if (event.target.className == "laClase"){
        event.target.style.opacity = 0.75;
    }
}, false);
 

De esta manera, cada vez que se de un clic en cualquier parte de la ventana, se verificará si la clase del elemento pulsado corresponde con el de las imágenes y de ser así, lo hacemos opaco, y al ser la ventana la que siempre se verá afectada por el evento, dará igual si las imágenes se añaden después.

También puedes añadir el script al documento, pero eso ya lo decidirás tú.

Saludos

Muchas gracias! Funciona :D

[Alexis88]

Y para que no tengas que utilizar varias condiciones en el caso de que desearas delegar los eventos que aplicarás en elementos de varios contenedores, en lugar de delegarlos a la ventana, hazlo con los contenedores.

Por ejemplo, supongamos que tengo el <div> de id 'foo' y en él cargaré N imágenes que luego deseo afectar, entonces, la delegación sería así:

Código Javascript:

document.querySelector("#foo").addEventListener("click", function(event){
    if (event.target.className == "laClase"){
        event.target.style.opacity = 0.75;
    }
}, false);
 

Y si tuviera otros contenedores en donde cargaré otros elementos a los cuales afectaré con otros eventos y efectos, tendrías que escribir otro bloque similar de código.

Saludos