cargo contenido en un div con ajax y no se muestran estilos ni scripts

cristian_cena · #1 (**permalink**) 17/05/2010, 18:00

Hola gente, resulta que cree mi menu de navegacion utilizando ajax, es decir, los enlaces del mismo me quedan de esta forma:

Código:

<a href="javascript:llamarcont('pagina.php', 'cuerpo');">

y en este caso (al hacer click en el enlace) se carga pagina.php dentro de un div cuyo id es "cuerpo":

Código:

<div id="cuerpo"></div>

Tengo un index.php en cuyo <head> cargo todas las hojas de estilos y scripts.

Bien, todo marcha a la perfección cuando el contenido devuelto por ajax es código html o php (solo uso includes nada de bases de datos ni nada complicado) pero cuando intento cargar un documento html que hace uso de un plugin de jquery noto que no se estan cargando ni las hojas de estilo ni los archivos javascript vinculados al documento.

Este es mi primer acercamiento a ajax por lo cual no se si está bien que haya incluido mis archivos externos (.css y .js ) en la cabecera de mi index.php o si estos archivos deben ser pedidos con ajax. O tal vez el plugin que utilizo (coda-slider escrito usando jquery) no se adapte a esta técnica, nose, pido disculpas por la ignorancia.

Por si acaso les dejo el código del index.php

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Centro de estética integral</title>
		<script type="text/javascript" src="js/llamarcontenido.class.js"></script> 
		<!-- COMPATIBILIDAD IE7 == IE 8 -->
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
		
		<link rel="stylesheet" type="text/css" href="css/maqueta.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/resetIE.css" />	
		
		<script type="text/javascript" src="jquery/jquery.min.js"></script>
		<!--<script type="text/javascript" src="jquery/googlejquery.min.js"></script>-->
		<script type="text/javascript" src="js/menu.js"></script>
		<!--<script type="text/javascript" src="js/slidesTratamientos.js"></script>-->
		
		<!--CODA-SLIDER-->
		<link rel="stylesheet" href="css/coda-slider.css" type="text/css" media="screen" charset="utf-8">
		<script src="jquery/jquery-1.2.6.js" type="text/javascript"></script>
		<script src="jquery/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
		<script src="jquery/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
		
		
		<!--SUBIR-->
		<!--<script src='jquery/jquerySubir.js' type='text/javascript'/>-->
		<script src='js/subir.js' type='text/javascript'/></script>
		<link rel="shortcut icon" href="img/favicon.png" />

		<link rel="stylesheet" href="css/scroll.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="css/demoStyles.css" type="text/css" media="screen" charset="utf-8" />

		<!--<script src="jquery/jquery-1.2.6.js" type="text/javascript"></script>-->
		
		
		<!--Scroll-->
		<script src="jquery/jquery.min142.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/jScrollPane.css" type="text/css" media="screen" charset="utf-8" />
		<script src="jquery/jquery.mousewheel.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="jquery/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery/jquery.corner.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="contenedor">
		<?php include("reproductorSonido.php"); ?> 
		<div id="contacto"><?php include("includes/contacto.php"); ?>
		</div>	 
			<div id="cabecera">   	
				<?php include("includes/cabecera.php"); ?>  
				<ul id="menuNav">
					<li class="itemNav" id="itemNav1"><a href="javascript:llamarcont('pages/inicioXDef.php', 'cuerpo');">Bienvenidos</a></li>
					<li class="itemNav" id="itemNav2"><a href="javascript:llamarcont('pages/serviciosMedicos.php', 'cuerpo');">Servicios Médicos</a></li>
					<li class="itemNav" id="itemNav3"><a href="javascript:llamarcont('pages/tratamientosAnida.php', 'cuerpo');">Tratamientos</a></li>
				</ul>				
			</div>				
			<div id="cuerpo">	
			<!--contenido cargado con ajax-->
			</div>
		</div>
	</body>
</html>

De momento no pretendo hacer un uso avanzado de ajax como puede ser el tema de accesibilidad, solo pretendo evitar el uso de <iframes> porque tengo un reproductor de música y quiero que el sonido no se corte mientras uno navega por el sitio.

Desde ya muchas gracias por su ayuda. Un fuerte abrazo.

2D6 · #2 (**permalink**) 17/05/2010, 18:37

Hola
Cada vez que alguien entra a tu archivo index.xxx carga todas las hojas de estilo y include que hayas puesto.

Lo que cargues dentro del DIV por medio de Ajax debería heredar todo eso. Tene en cuenta que el archivo que estas cargando dentro del DIV no tiene que tener todas las cabeceras (el <head></head> los META, DOCTYPE, etc) ya que los cargaste en el index.

cristian_cena · #3 (**permalink**) 18/05/2010, 00:36

Hola 2D6, muchas gracias por responder, me aclaras bastante el panorama. He hecho tal como indicas incluyendo los scripts y estilos externos en la cabecera del index. Suponía que debía de hacerse así, me sonaba lógico pero necesitaba que otra voz mas experimentada me lo confirme jaj.

Bien sucede que hago tal cual indicas pero sigo teniendo problemas con la visualización del plugin, y es extraño porque copio su codicgo en un nuevo documento html y funciona mientras que cuando lo traigo con ajax ya no. es como que se crea un conflicto nose, como que se pisan entre si los scripts externos.

O tal vez sea porque anido un div-ajax dentro de otro div-ajax, es decir:

- Por un lado tengo el index.php con un menu y el <div id="cuerpo"> aca el contenido cargado con ajax</div>

- Y por otro un documento php que se llama tratamientosAnida.php que si te fijas en el codigo que comparti al principio lo incluyo en el tercer enlace del menu.
Este documento tiene un nuevo menu y un nuevo contenedor (llamado <div id="slide"> ) que cumplen la misma función que el menu y el div-ajax (<div id="cuerpo">) del index.php

Con lo que me queda como resultado:

Código:

<body>
<ul> ...menu ...</ul>
<div id="cuerpo">
<!--contenido cargado con ajax-->

... y solo cuando estamos en tratamientosAnida.php ...
<ul> ...menu ...</ul>
<div id="slide">
<!--contenido cargado con ajax-->
</div>
</div>
</body>

Tal vez en este anidamiento esté el problema, la verdad nose, mientras tanto estoy googleando y revisando las faq a ver si encuentro ejemplos parecidos a lo que me está pasando.

Muchas gracias. Un saludo.

2D6 · #4 (**permalink**) 18/05/2010, 09:32

A ver, entonces el problema es que cuando entras a tratamientosAnida.php debería cargar dentro del DIV slide otro menú mas y no lo esta haciendo?

Me parece que te estas complicando demasiado las cosas. Para que cargar el contenido de los menus mediante ajax?

Podrías hacer:
un archivo contenido_menu.php
dentro de el

Cita:

<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>

Y despues incluyes el menu asi:

Cita:

<ul>...menu...
haces <?PHP include ("contenido_menu.php"); ?>
</ul>

Después en tratamientosAnida.php haces lo mismo.
O usas PHP y un If

if ($seccion == 'tratamiendosAnida.php')
{
include ("contenido_menu_anida.php");
}
else { }

Otra cosa que vi en el código que pusiste al principio es que incluyes diferentes versiones de jquery.js, eso crea conflictos. Deberías siempre incluir la ultima versión disponible y nada mas. Si el script si o si necesita una versión u otra se recomienda no usarlo.

Espero haber ayudado.

cristian_cena · #5 (**permalink**) 18/05/2010, 11:08

Hola D26, gracias por responder, en realidad en tratamientosAnida.php lo que hago es incluir un menu y un nuevo div-ajax. (<div id="slide">) Hago esto para que al hacer clik en los items del menu se me muestre el contenido ajax en el div.

Porque incluyo aqui el menu?
Bien, porque tengo un sitio con tres paginas y una de ellas (tratamientosAnida.php) contiene otras 4 páginas.

Este es el codigo de tratamientosAnida.php:

Código:

	
		<ul id="menuTopSlide">
			<li class="itemMTS" id="MTS0"><a href="javascript:llamarcont('pages/facialesXDef.php', 'slide');"><span class="OcultaItems">Faciales  </span></a></li>
			<li class="itemMTS" id="MTS1"><a href="javascript:llamarcont('pages/corporales.php', 'slide');"><span class="OcultaItems">Corporales</span></a></li>
			<li class="itemMTS" id="MTS2"><a href="javascript:llamarcont('pages/antiage.php', 'slide');"><span class="OcultaItems">Antiage   </span></a></li>
			<li class="itemMTS" id="MTS3"><a href="javascript:llamarcont('pages/tratesp.php', 'slide');"><span class="OcultaItems">Especiales</span></a></li>
		</ul>
		
		<div id="slide">
		<!--contenido cargado con ajax (cargo aqui una página con el slide coda-slider que no me funciona, Lo extraño es que solo no funciona cuando lo cargo con ajax)-->	
		</div>

Es decir el slide funciona de maravilla pero solo cuando lo traigo con ajax no anda. Como que no se ejecutan los scripts.

Que demonios le esta pasando a esto por dios!!

2D6 · #6 (**permalink**) 18/05/2010, 11:32

Por eso digo, para que traerlo con Ajax si haciendo un include con php es el mismo resultado.

Si no, proba con volver a linkear las librerias en tratamientosAnida.php a ver que pasa. No es lo mejor pero tal vez funcione

Suerte!

cristian_cena · #7 (**permalink**) 18/05/2010, 13:06

Hola 2D6, me parece que no estoy explicando bien el problema, porque el conflicto no pasa por el menú sino por el contenido que se carga con ajax en el div "slide".

Rehice el ejemplo y lo subí a un servidor para que lo puedas ver.

Si entras en esta url: http://www.inicio2770.com.ar/sliding...lidingTabs.php
Podrás ver el plugin slide funcionando

Si en cambio entras a esta url: http://www.inicio2770.com.ar/slidingTabs/index.php
Podrás ver como cuando cargo la página con ajax dejan de funcionar los scripts.
Para esto tome solo el contenido del body del archivo SlidingTabs.php, lo copié y lo pegué en otro llamado asd.php.

Guarde estos archivos en un .rar por si quieres verlo en tu pc: http://www.mediafire.com/?zftyzdjewmu

Desde ya te agradezco de antemano si le pegas una miradita porque me estoy volviendo loco sin poder resolverlo.

Un saludo!

2D6 · #8 (**permalink**) 18/05/2010, 13:34

Hola
Lo estuve mirando un buen rato y no logro darme cuenta de que es lo que le pasa.

Pero, mirando el codigo en la linea 107
tenes esto

Cita:

E inmediatamente despues tenes

Cita:

</head>
<body>

Estas cerrando el </body> antes que se cargue el sitio. Probra borrar esas etiquetas al fina de la linea 107 y fijate.

Suerte!

cristian_cena · #9 (**permalink**) 18/05/2010, 13:47

Hola 2D6 muchas gracias por mirar los archivos y ayudarme en esta situación, te comento que quite "</head><body>" (jaj esto pasa porque estoy tarado)

y bien, como era de esperar todo sigue igual asi que entre a buscar en las faq de ajax y me encontré con este hilo tal vez aquí este la solución, de momento estoy probando, si me sale te cuento.

Un fuerte abrazo.

p-d: aquí me encontre otro hilo relacionado al tema también.

2D6 · #10 (**permalink**) 21/05/2010, 18:57

Hola
Lograste solucionar el problema? Porque creo que tengo la solucion.
Casualmente empece a trabajar en un proyecto y se me presento el mismo problema.

Cargaba una seccion dentro de un DVI con Ajax y el script (un efecto zoom con imagenes) no funcionaba pero, si entraba al archivo directamente desde el navegador si.

Lo solucione con $.getScript();

Te muestro como quedo mi codigo

Código Javascript:

Ver originalfunction creaciones(){
    $.ajax( {
        async:true,
        dataType: "html",
        type: "POST",
        url: "secciones/creaciones.php",
        data: "",
        global: true,
        ifModified: false,
        processData:true,
        contentType: "application/x-www-form-urlencoded",
        success: function(datos){
            $("#datos").html(datos)
            $.getScript("magiczoom.js"); <<< Script que no funcionaba
        }
    });
}

Saludos!

cristian_cena · #11 (**permalink**) 22/05/2010, 03:00

Hola D26, Lo pude hacer funcionar al fin!! mi reproductor de música anda sin que el sonido se corte al navegar

y estoy super contento!!

Lo hice con mootools, con el siguiente código

en el head ...

Código:

<script src="mootools.js" type="text/javascript"></script>

<script type="text/javascript">
function Carga(url,id) {
var myAjax = new Ajax(url, {method: 'get', update: id, evalScripts: true}).request();
}
</script>

<link ... todas las hojas de estilo.../>
<script ...todos los .js que quieras...></script>

en el body...

Código:

<a href="javascript:Carga('pagina.xxx','cuerpo');">
<div id="cuerpo"> aca dentro se carga la pagina</div>

El milagro lo hace "evalScripts: true".

Bien, hablando con amigos me recomendaron usar una librería como jquery o mootools (yo use mootools porque el plugin que cargo con ajax esta escrito en mootools) y bueno, eso hice y andubo, es sumamente simple ya que estas librerías lo hacen casi todo por ti.

Igualmente probaré tu código para ir aprendiendo ajax de un modo más "manual" digamos. Gracias por compartirlo!! y sobre todo gracias por bancarme en este problema, que bueno, con constancia logramos que tenga un final felíz.

Un fuerte abrazo!

#12 (**permalink**) 11/07/2010, 22:57

Con JQUERY yo simplemente utilizo esto (en el index):

<script type="text/javascript">
var x;
x=$(document);
x.ready(inimenu);

function inimenu(){
var x;
x=$('#content');
x.load('music.html');
return false;}
</script>

y me carga todo los plugins sin ningun problema :
cargó todo el html , asi de simple...