problemas con ajax: Acciones de href cargados con ajax

#1 (**permalink**) 26/05/2011, 02:28

Cómo puedo hacer para cuando cargue html mediante ajax en una página, que los href de ese html realicen funciones javascript sin necesidad de poner el onclick en cada uno???

Necesitaré incluir javascript en cada html cargado indicando las acciones de esos href??

Panino5001 · #2 (**permalink**) 26/05/2011, 08:30

Probá así:
enlaces.txt:

Código PHP:

  <a href="#">decir hola</a> | <a href="#">decir chau</a> | <a href="#">hacer algo</a>

loquesea.html:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<script type="text/javascript">
function http(){
    if(typeof window.XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();    
    }else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('Su navegador no soporta AJAX');
            return false;
        }    
    }    
}
function request(url,callback,params){
    var H=new http();
    if(!H)return;
    var p='';
    for(var i in params){
        p+='&'+i+'='+encodeURIComponent(params[i]);    
    }
    H.open('get',url+'?'+p+'&'+Math.random(),true);
    H.onreadystatechange=function(){
        if(H.readyState==4){
            callback(H.responseText);
            H.onreadystatechange=function(){}
            H.abort();
            H=null;
        }
    }
    H.send(null);
}
function setEvents(el,type,callback){
    el[type]=callback;
    el=null;//eliminamos referencias circulares
}
function asignar(r){
    document.getElementById('rta').innerHTML=r;
    var callbacks=[function(){alert('hola');},function(){alert('chau');},function(){alert('¿qué hacemos?');}];
    var enlaces=document.getElementById('rta').getElementsByTagName('a');
    for(var i=0,o;o=enlaces[i];i++){
        o.href='javascript:;';
        setEvents(o,'onclick',callbacks[i]);
    }
    
}
onload=function(){
    request('enlaces.txt',asignar,{});
}
</script>

</head>

<body>
<div id="rta"></div>
</body>
</html>

#3 (**permalink**) 26/05/2011, 09:19

La cosa es que tengo el html:

origen.html:

Código HTML:

<a href="" id="jquery_ajax">carga ajax</a>
<div class="donde_se_carga_el_html_por_ajax"></div>

<script>
	$.ajax({
			type: 'post', 
			  url: "ajax.php",
			  success: function(respuesta){
                                     $("donde_se_carga_el_html_por_ajax").html(respuesta);
			  }
			});

    $("jquery_ajax").click(function(e){
            alert("eco");
     });
</script>

ajax.php contiene:

Código HTML:

<a href="" id="jquery_ajax">carga ajax</a>

Con esto lo que quiero hacer es que pueda hacer click en el enlace que se carga por ajax y que pueda utilizar el código javascript declarado en el orígen, osea que el enlace que cargo mediante ajax pueda mostrar la ventanita de "eco".

Panino5001 · #4 (**permalink**) 26/05/2011, 09:24

No sé mucho acerca de la librería que usás, pero probaste esto?

Código PHP:

  <script>
    $.ajax({
            type: 'post', 
              url: "ajax.php",
              success: function(respuesta){
                                     $("donde_se_carga_el_html_por_ajax").html(respuesta);
                                     $("jquery_ajax").click(function(e){
                                            alert("eco");
                                     });
              }
            });


</script>

#5 (**permalink**) 26/05/2011, 09:57

pero no hay manera de que el html que cargo por ajax, utilice el javascript de la página de origen??

No tenga que volver a declarar el mismo código js en el html que cargo...

Panino5001 · #6 (**permalink**) 26/05/2011, 10:06

Seguramente jQuery debe tener algún método para eso. El problema es que en el momento en que escribís esto:

Código PHP:

  $("jquery_ajax").click(function(e){

            alert("eco");

     });

$("jquery_ajax") no es una referencia válida (no existe el elemento). Lo mejor sería que te documentaras un poco acerca de jQuery, pero principalmente acerca de javascript.

#7 (**permalink**) 27/05/2011, 00:48

Si documentarme ya me he documentado ya...

Pero este problema no me lo ha sabido resolver nadie y no he conseguido documentación al respecto en ningún lado. Ni en la declaración de ajax de jquery ni javascript ni nada...

:((

Ya puse algo parecido en este post: http://www.forosdelweb.com/f127/no-l...n-ajax-586419/

Y no he tenido respuesta..

Panino5001 · #8 (**permalink**) 27/05/2011, 01:37

Lo que sucede es que hay que comprender bien cómo es el funcionamiento.

El primer error es querer colocar una referencia a un elemento que no existe. Eso no es posible: hay que esperar a que el elemento exista para poder referirse a él. Eso se logra con callbacks, que se invocan cuando AJAX entrega su respuesta (en eso se basa el ejemplo que te mostré) y eso también es justamente de lo que se trata el método success.

Otra cosa que podés hacer es cargar un html que tenga el javascript a ejecutar incluído (a eso se refería venkman en la respuesta que te dio en otro post, cuando mencionó evalscripts). No lo considero una buena práctica, pero si es lo que te interesa, te pongo un ejemplo:
enlaces.php

Código PHP:

  <a id="a" href="#">decir hola</a> | <a id="b" href="#">decir chau</a> | <a id="c" href="#">hacer algo</a>

<script type="text/javascript">

function setEvents(el,type,callback){

    el[type]=callback;

    el=null;//eliminamos referencias circulares

}

function asignar(){

    var callbacks=[function(){alert('hola');},function(){alert('chau');},function(){alert('¿qué hacemos?');}];

    var enlaces=[document.getElementById('a'),document.getElementById('b'),document.getElementById('c')];

    for(var i=0,o;o=enlaces[i];i++){

        o.href='javascript:;';

        setEvents(o,'onclick',callbacks[i]);

    }

}

asignar();

</script>

documento principal:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script type="text/javascript">

String.prototype.tratarResponseText=function(){

    var pat=/<script[^>]*>([Ss]*?)</script[^>]*>/ig;

    var pat2=/bsrc=[^>s]+b/g;

    var elementos = this.match(pat) || [];

    for(i=0;i<elementos.length;i++) {

        var nuevoScript = document.createElement('script');

        nuevoScript.type = 'text/javascript';

        var tienesrc=elementos[i].match(pat2) || [];

        if(tienesrc.length){

            nuevoScript.src=tienesrc[0].split("'").join('').split('"').join('').split('src=').join('').split(' ').join('');

        }else{

            var elemento = elementos[i].replace(pat,'$1');

            nuevoScript.text = elemento;

        }

        document.getElementsByTagName('body')[0].appendChild(nuevoScript);

    }

    return this.replace(pat,'');

} 

 
function http(){

    if(typeof window.XMLHttpRequest!='undefined'){

        return new XMLHttpRequest();    

    }else{

        try{

            return new ActiveXObject('Microsoft.XMLHTTP');

        }catch(e){

            alert('Su navegador no soporta AJAX');

            return false;

        }    

    }    

}

function request(url,callback,params){

    var H=new http();

    if(!H)return;

    var p='';

    for(var i in params){

        p+='&'+i+'='+encodeURIComponent(params[i]);    

    }

    H.open('get',url+'?'+p+'&'+Math.random(),true);

    H.onreadystatechange=function(){

        if(H.readyState==4){

            callback(H.responseText);

            H.onreadystatechange=function(){}

            H.abort();

            H=null;

        }

    }

    H.send(null);

}

onload=function(){

    request('enlaces.php',function(r){ document.getElementById('rta').innerHTML=r;r.tratarResponseText();},{});

}

</script>

 
</head>

 
<body>

<div id="rta"></div>

</body>

</html>

#9 (**permalink**) 27/05/2011, 03:34

Tiene que haber algo más sencillo, estoy seguro...

Otra de las opciones es declarar funciones y poner onclick en todos los enlaces que cargo con ajax, para que tengan asociada esa función sin necesidad de volver a escribir el mismo javascript...

...Pero es una solución no muy elegante...

masterpuppet · #10 (**permalink**) 27/05/2011, 04:09

Buenas,

jQuery tiene soporte para event delegation a traves de delegate y live.

Saludos.

#11 (**permalink**) 27/05/2011, 04:30

yeeeeeeeeeeeeeeeeeeeeeeeeeeees!!!!

Thanks!