Foros del Web » Programando para Internet » Javascript » Frameworks JS »

problemas con ajax: Acciones de href cargados con ajax

Estas en el tema de problemas con ajax: Acciones de href cargados con ajax en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/05/2011, 02:28
 
Fecha de Ingreso: abril-2005
Mensajes: 80
Antigüedad: 16 años, 5 meses
Puntos: 0
problemas con ajax: Acciones de href cargados con ajax

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??
  #2 (permalink)  
Antiguo 26/05/2011, 08:30
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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)  
Antiguo 26/05/2011, 09:19
 
Fecha de Ingreso: abril-2005
Mensajes: 80
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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".
  #4 (permalink)  
Antiguo 26/05/2011, 09:24
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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)  
Antiguo 26/05/2011, 09:57
 
Fecha de Ingreso: abril-2005
Mensajes: 80
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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...
  #6 (permalink)  
Antiguo 26/05/2011, 10:06
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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)  
Antiguo 27/05/2011, 00:48
 
Fecha de Ingreso: abril-2005
Mensajes: 80
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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..
  #8 (permalink)  
Antiguo 27/05/2011, 01:37
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.141
Antigüedad: 17 años, 3 meses
Puntos: 831
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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)  
Antiguo 27/05/2011, 03:34
 
Fecha de Ingreso: abril-2005
Mensajes: 80
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: problemas con ajax: Acciones de href cargados con ajax

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...
  #10 (permalink)  
Antiguo 27/05/2011, 04:09
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 13 años, 8 meses
Puntos: 845
Respuesta: problemas con ajax: Acciones de href cargados con ajax

Buenas,

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

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #11 (permalink)  
Antiguo 27/05/2011, 04:30
 
Fecha de Ingreso: abril-2005
Mensajes: 80
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: problemas con ajax: Acciones de href cargados con ajax

yeeeeeeeeeeeeeeeeeeeeeeeeeeees!!!!

Thanks!

Etiquetas: ajax, javascript, jquery
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 04:47.