Problemas con Jquery y Ajax

Hallking · #1 (**permalink**) 17/06/2012, 20:42

Buenas a todos.
mi problema es que cargo una pagina usando ajax y la carga bien pero esta pagina tiene unos efectos que se lo doy con jquery y este es el problema que estos efectos no se ejecutan cuando llamo la pagina con ajax, pues si lo ejecuto fuera del ajax me funciona bien. Nota no se mucho sobre sobre sobre estos lenguaje de programación...

Con este código jquery que da el efecto

Código:

// JavaScript Document
$(document).ready(function(){
$('.flip').click(function(){
          $('.panel').hide(); // oculte todos los paneles
          $(this).next('div').slideDown(); // el div que sigue aplique slideToggle     
      });
$(".e-mail").click(function(){
    $(".funcion").slideToggle("slow");
  });
});

Esta es la pagina que cargo con ajax

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../JavaScript/FuncionJavaScrip.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
        <div id="conten" class="grid_5 alpha_2">
                <h1>Contactenos</h1>
                    <div id="formulario">
                    <b>Dirección:</b>
                    </div>
                    
                    <div id="datos">
                    Calle Julio de Peña Valdes #212<br/>Sector 24 de Abril Sto. Dgo., D.N
                    </div>    
                    
                    <div id="formulario">
                    <b>Telefonos:</b>
                    </div>
                    
                    <div id="datos">
                    809-681-5856 <br />
                    809-986-1117
                    </div> 
                    
                    <div id="formulario">
                    <b>E-Mail:</b>
                    </div>
                    
                    <div id="datos" class="e-mail pointer">
                    <b><i>[email protected]</i></b>
                    </div>      
        </div>
        
        <div class="grid_5 omega funcion panel" id="conten">
                <h1>Formulario</h1>
                    <form id="form1" name="form1" method="post" action="">
                    <p>Nombre:
                    <label>
                    <input type="text" name="textfield" id="textfield" />
                    </label>
                    </p>
                    <p>E-Mail:
                    <label>
                    <input type="text" name="textfield2" id="textfield2" />
                    </label>
                    </p>
                    <p>Comentario:
                    <label>
                    <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
                    </label>
                    </p>
                    </form>
        </div>
</body>
</html>

y esta es la pagina donde la llamo.

Código HTML:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url+".html",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<div onClick="loadXMLDoc('Contactenos')">Prueva</div>

</body>
</html>

dontexplain · #2 (**permalink**) 17/06/2012, 21:22

Lo lógico si añades eventos dentro de

.ready()

o

.click() | .hover | .keypress | .keydown [...]

es que esos eventos se añadan a elementos del documento que estén cargados al "cargar" el documento y no a aquellos elementos que en un futuro puedan formar parte del DOM, o sea, a elementos que puedas recibir mediante AJAX.

Para ello simplemente, sustituir el evento original por .live, y añadir el listener por cada elemento...

$(".e-mail").live('click'.(function(){
$(".funcion").slideToggle("slow");
});

y de esa forma por cada elemento.

Un saludo.

Hallking · #3 (**permalink**) 17/06/2012, 22:37

Bueno mano gracias pero no entendí mucho y tu idea no me funciono....

dontexplain · #4 (**permalink**) 17/06/2012, 22:53

Código Javascript:

Ver original// JavaScript Document
 
$('.flip').live('click',function(){
          $('.panel').hide(); // oculte todos los paneles
          $(this).next('div').slideDown(); // el div que sigue aplique slideToggle     
      });
 
$(".e-mail").live('click',function(){
    $(".funcion").slideToggle("slow");
  });

Por otro lado, si usas jquery para qué lo cargas en la siguiente página, añade el script en la principal y ejecuta la petición AJAX desde jQuery

Código Javascript:

Ver originalfunction loadXMLDoc(url)
{
 
 
$.ajax({
  url: url+".html",
  type:"GET",
  success: function(data) {
   $("#myDiv").html(data);
 
  }
});
 
}

Y para tu caso, ni siquiera te hace falta lo anterior, te basta con

Código Javascript:

Ver originalfunction loadXMLDoc(url)
{
$('#myDiv').load(url + ".html");
}

marcosrfn · #5 (**permalink**) 20/06/2012, 13:15

Prueba a usar un iframe en vez de una llamada ajax.

Puedes incluir en el html el iframe:

Código HTML:

Ver original<iframe id="if"></iframe>
<div onClick="loadXMLDoc('Contactenos')">Prueva</div>

y cargar el contenido con jquery usando el siguiente código:

Código Javascript:

Ver original<script type="text/javascript">
function loadXMLDoc(url)
{
   url = url + ".html";
   $( '#if' ).attr( 'src', url );
}
</script>

Si no quieres usar jquery creo que puedes hacerlo de esta manera:

Código Javascript:

Ver originaldocument.getElementById("if").setAttribute("src",url).

matolinh · #6 (**permalink**) 25/10/2012, 15:52

Cita:

Iniciado por dontexplain

Lo lógico si añades eventos dentro de

.ready()

o

.click() | .hover | .keypress | .keydown [...]

es que esos eventos se añadan a elementos del documento que estén cargados al "cargar" el documento y no a aquellos elementos que en un futuro puedan formar parte del DOM, o sea, a elementos que puedas recibir mediante AJAX.

Para ello simplemente, sustituir el evento original por .live, y añadir el listener por cada elemento...

$(".e-mail").live('click'.(function(){
$(".funcion").slideToggle("slow");
});

y de esa forma por cada elemento.

Un saludo.

excelente! funciona perfecto