Cargar .js dentro de DIV

waldette · #1 (**permalink**) 28/01/2011, 04:47

Bueno, se que hay montones de posts, pero creo que ninguno de ellos está claro.
Voy a formular con detalle mi pregunta, aver si así, entre todos, podemos solucionarla.

- Tengo una web php normal y corriente, con estructura HTML. (web1.php)
- Cargo otra página (web2.php) con AJAX dentro de un DIV que está en esa misma web.
- Dentro de web2.php hago una llamada a un archivo .JS que se encarga de la gestion asincrona del foro (web2.php)

Hay alguna forma para que cargue el archivo .js dentro de web2.php cargada previamente en ajax????

Sinceramente he perdido monton de tiempo buscando, y solo he encontrado como cargar un javascript dentro de otra web cargada en ajax, pero NO un archivo cargado dentro de esta...

Alguien me puede ayudar plis?

waldette · #2 (**permalink**) 28/01/2011, 10:46

Pongo el ejemplo para que quede claro.
La cosa está en que solo me funciona UNA SOLA VEZ!
Es suuuper simple, hay únicamente dos links, si le doy por primera vez a uno funciona a la perfeccion, pero a la que cambio y vuelvo de nuevo ya no funciona.

El archivo al que llamo es un fancybox, una ventana emergente con javascript...

Alguien me ayuda plis??

index.php

Código HTML:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carga DIV Ajax</title>

<script language="javascript" src="jquery.js"></script>

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

<script language="javascript">
	function ajaxdiv(){
		$.ajax( {
			async:true,
			dataType: "html",
			type: "POST",
			url: "foro.php",
			data: "",
			global: true,
			ifModified: false,
			processData:true,
			contentType: "application/x-www-form-urlencoded",
			success: function(datos){
				$("#contenedor").html(datos)
				
			}
		});
}
		function ajaxdiv2(){
		$.ajax( {
			async:true,
			dataType: "html",
			type: "POST",
			url: "text.php",
			data: "",
			global: true,
			ifModified: false,
			processData:true,
			contentType: "application/x-www-form-urlencoded",
			success: function(datos){
				$("#contenedor").html(datos)
				
			}
		});
	}
</script>
<style type="text/css">
#menu{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#menu a:hover{
background-color: #FFFF80;
}

#contenedor{
float:left;
width:950px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #contenedor{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>
<div id="menu">
<a href="javascript:ajaxdiv();">Menu 1</a>
<br>
<a href="javascript:ajaxdiv2();">Menu 2</a>
</div>

<div id="contenedor"><h3>Prova!</h3></div>

</body>

</html>

faustofernandez86 · #3 (**permalink**) 28/01/2011, 11:08

Buenas

Lo que podes hacer es incluir todos los script en web1.php asi estara cargado antes de que mostres web2.php. "<script type="text/javascript" src="archivo.js"></script>"

Código HTML:

<!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" lang="en" xml:lang="en">
<head>


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


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carga DIV Ajax</title>

<script language="javascript" src="jquery.js"></script>

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

<script language="javascript">
	function ajaxdiv(){
		$.ajax( {
			async:true,
			dataType: "html",
			type: "POST",
			url: "foro.php",
			data: "",
			global: true,
			ifModified: false,
			processData:true,
			contentType: "application/x-www-form-urlencoded",
			success: function(datos){
				$("#contenedor").html(datos)
				
			}
		});
}
		function ajaxdiv2(){
		$.ajax( {
			async:true,
			dataType: "html",
			type: "POST",
			url: "text.php",
			data: "",
			global: true,
			ifModified: false,
			processData:true,
			contentType: "application/x-www-form-urlencoded",
			success: function(datos){
				$("#contenedor").html(datos)
				
			}
		});
	}
</script>
<style type="text/css">
#menu{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#menu a:hover{
background-color: #FFFF80;
}

#contenedor{
float:left;
width:950px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #contenedor{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>
<div id="menu">
<a href="javascript:ajaxdiv();">Menu 1</a>
<br>
<a href="javascript:ajaxdiv2();">Menu 2</a>
</div>

<div id="contenedor"><h3>Prova!</h3></div>

</body>

</html>

WeSoRz · #4 (**permalink**) 31/01/2011, 06:43

Buenas,

Comparto una función que adapté hace ya unos meses de otra que encontré googleando y que ejecuta el código JS dentro de etiquetas script (incluido si en uno de los parámetros va indicada el src).

Indicando simplemente el elemento (en tu caso el div de respuesta del AJAX), se debería ejecutar el JS sin problemas.

Código PHP:

  function executeJS (element) {

    var elems = document.getElementById(element).getElementsByTagName('script');

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

      var elem = elems[i];

      newScript = document.createElement('script');

      newScript.text = unescape(elem.innerHTML);

      newScript.type = 'text/javascript';

      if ((elem.src != null) && (elem.src.length > 0))

        newScript.src = elem.src;

      elem.parentNode.replaceChild(newScript,elem);

    }

}

Espero que te sirva :)