Cargar contenido js dentro de un div con ajax, Me falla ay Dios !!

[Luisa29]

Hola amigos !! Resulta que intento cargar contenido con ajax dentro de un div. Funciona todo perfectamente, pero resulta que el contenido a cargar lleva código js y no funciona (es un slider). Me sale el contenido (fotos una encima de otras) pero no carga el javascript.

Aquí os dejo el código ajax:

Código:

function nuevoAjax(){

    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
    
} 




function Cargar(url){


var centro_galeria = document.getElementById('centro_galeria');
       
ajax=nuevoAjax(); 
ajax.open("GET", url,true); 
ajax.onreadystatechange=function(){

if(http.readyState==4){

centro_galeria.innerHTML=ajax.responseText;

}

}
        
ajax.send(null);



}

¿Qué puede estar fallando? ¿Me podéis echar una manita? Estoy un poco pez con ajax. Muchas gracias !!

Edit: Después de estar horas investigando no consigo hacer que funcione, chicos, sois mi única esperanza. Por favor echadme una mano.

[Alexis88]

Esta línea:

Código Javascript:

if(http.readyState==4){
 

Debes reemplazarla por esta otra:

Código Javascript:

if(ajax.readyState==4){
 

La variable ajax es la que posee el objeto XHR. No existe la variable http en el código que muestras.

Saludos

[Luisa29]

Iniciado por Alexis88

Esta línea:

Código Javascript:

if(http.readyState==4){
 

Debes reemplazarla por esta otra:

Código Javascript:

if(ajax.readyState==4){
 

La variable ajax es la que posee el objeto XHR. No existe la variable http en el código que muestras.

Saludos

Modificado y sigue igual.

[Alexis88]

Muéstranos el contenido del archivo que devuelve la respuesta, o dicho de otro modo, el archivo que es representado en la variable url.

[Luisa29]

Código:

<div class="container">

<div class="slider">
<div id="slider1">
	<img  src="imagenes-galeria/1.jpg"   />
	<img  src="imagenes-galeria/2.jpg"   />
	<img  src="imagenes-galeria/3.jpg"   />
	<img  src="imagenes-galeria/4.jpg"   />
	<img  src="imagenes-galeria/5.jpg"   />
	<img  src="imagenes-galeria/6.jpg"   />

</div>
<ul id="thumb"></ul>
<div id='next' class="slider_next"><img  src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
<div id='prev' class="slider_prev"><img  src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
</div>

Este es uno de ellos, son los tres iguales, lo único que cambia son las imagenes. Sólo carga el primero al abrir la página, pero al cambiar el contenido del div con un botón (mediante ajax) para que salga el siguiente aparece como si el javascript que lo hace funcionar no se activase.

Estos son los archivos js que hacen funcionar el slider:

Código:

<link href="estilo-pagina-css" rel="stylesheet" type="text/css" /><script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

Este es el código del slider:

Código:

<script language="javascript">
$(document).ready(function(){

	$('#slider1').cycle({
		fx: 'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
		speed:  '600', 
   		timeout: '7000',
   		next:   '#next', 
    	prev:   '#prev',
    	pager:  '#thumb',
		   pauseOnHover: false, 				// if you hover pauses the slider
            startClockOnMouseOut: false, 		// if clock should start on MouseOut
  
    	 
		pagerAnchorBuilder: function(idx, slide) { 
        	return '<li><a href="#"><img src="' + slide.src + '" width="43" height="29" /></a></li>'; 
    	}  
	});

});
</script>

Muchas gracias Alexis88 por tu tiempoo

[Luisa29]

Aquí os dejo los archivos, está todo patas arriba pero así podréis decirme donde está el fallo:

https://dl.dropboxusercontent.com/u/...74/ejemplo.rar

Muchas graciass !!

[vick90]

Inlcuye los scripts en el archivo principal(donde cargas el slider con ajax) y con eso queda arreglado

[Luisa29]

Iniciado por vick90

Inlcuye los scripts en el archivo principal(donde cargas el slider con ajax) y con eso queda arreglado

¿A qué te refieres con incluirlos? o sea en este caso y según el ejemplo en el galeria.html no?

Edito: Si te refieres a incluir el código de los archivos javascript en el mismo galería.html lo acabo de probar y sigue igual, o sea carga el primero que sale pero los demás no.

[Luisa29]

Hola a todos de nuevo, ahora quiero ver si hay alguna otra forma de cargar contenido dinámico de la manera siguiente:

Quiero cargar en un div, llamémosle centro diferentes contenidos, llamémosles:

galería1.php, galería2.php, galería3.php

Mediante tres botones como estos:

Código:

<ul class="menu-galeria">
  <li><a href="#" onclick="Cargar('galeria1.php');">CONTENIDO 1</a></li>
    <li><a href="#" onclick="Cargar('galeria2.php');">CONTENIDO 2</a></li>
      <li><a href="#" onclick="Cargar('galeria3.php');">CONTENIDO 3</a></li>
</ul>

Los tres llevan un slider que necesita javascript para funcionar, con ajax parece que no hay forma de solucionarlo (o sí).

Estos son los archivos que no se cargan (sólo se cargan la primera vez, pero al pulsar los botones se vuelve todo loco):

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

Lo malo es que tengo poca idea de programación a ese nivel y lo necesito para mi web. A ver si un alma caritativa puede mostrarme un código ya elaborado que me sirva.

[vick90]

En donde tienes incluidos esos archivos ?

[Luisa29]

A qué te refieres? a veces no os entiendo, dais una respuesta muy escueta.

[rottenp4nx]

Están bien las rutas de los archivos de galeria.php ? están en la raíz del sitio ?

[Luisa29]

Claro, están allí.


Al final he conseguido que cargue, pero se me mezcla y se vuelve loco el slider.

Lo he conseguido con este código:

Código:

<script>
function cargar(div, desde)
{
     $(div).load(desde);
}
$.getScript( "jquery.min.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
$.getScript( "jquery.cycle.all.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
$.getScript( "codigo-slider.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
  $(document).ready(function(){
   $("#Reload").click(function(){
      $("#result").html("result reloaded successfully");
   });
});
</script>

Seguramente el slider se vuelva loco porque carga el script y el primero que carga sale bien, pero luego al cambiar el div por otro slider es como si quedase aún restos del anterior. ¿Habría alguna manera de solucionarlo chicos? Gracias por contestar