PROBLEMA JQUERY LOAD--no carga script de la segunda pagina

[kapazapa]

Hola, antes que nada deciros que soy novato en js, espero hacerme entender con esta pregunta, tengo un problema con una pagina "a.php" que "carga" una pagina nueva "b.php" dentro de ella utilizando para esto la función load de jquery.

La página "b" contiene un script también de jquery que permite que un menú tenga un scroll personalizado de jscrollpane.

Al probar las páginas independientemente todo funciona ok, pero al cargar la pagina "b" dentro de la página "a", no reconoce o no lee o no entiende el script que trae la página "b" y que crea el scroll del menu.

He intentado copiar el mismo script en ambas páginas para ver si funcionaba pero nada. copio parte del script por si alguien me puede dar una luz.
gracias.

SCRIPT DE LA PAGINA "b"

<script type="text/javascript">

$(document).ready(function () {
// this initialises the demo scollpanes on the page.


$('#menufotos').jScrollPane({dragMaxHeight:75});

});



</script>

SCRIPT DE LA PAGINA "a"


<script type="text/javascript">

$(document).ready(function () {

$(document).ready(function () {
// this initialises the demo scollpanes on the page.

$("#contenedormenu a").each(function(){
var href = $(this).attr("href");
$(this).click(function(){
$("#contenido").hide().load(href).fadeIn("slow") ; //Le damos efecto
$(this).attr({ href: "#"});
});
});
</script>

[mayid]

Antes que nada, tener dos veces document.ready no esta ok para el documento a:

$(document).ready(function () {

$(document).ready(function () {

En cuanto a traer scripts por ajax, esta bien, pero te conviene tener la libreria declarada ya en el documento a. Luego, desde b haces la llama tal como la haces.

Te sugiero leas el tuto de Cristalab sobre Ajax en jQUery. Vos estas usando lo minimo, que es load, pero existen metodos mas potentes o mas completos. Especificamente, fijate en "dataType", que es en donde se le dice al ajax que tipo de datos hay que traer (javascript, xml, html, etc).

Esto segundo esta bueno tenerlo como metodo alternativo a load, pero en si, teniendo todas las librerias en la pagina principal evitas el problema que tenes.

[kapazapa]

Hol mayid, gracias por tu respuesta, lo voy a intentar, lo de declarar todas las librerias en la pagina principal no lo tengo muy claro, si te refieres a hacer el llamado en el head a la ruta donde están todos los scripts ,eso si lo tengo en las dos paginas, algo así:

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>

En todo caso voy a probar lo que dices de ajax pues a lo mejor por ese camino lo logro.
gracias de nuevo.

[mayid]

Me refiero a eso mismo, pero no a la inclusion de jQuery dos veces, sino a la inclusion de tu pugin:

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jsscroll.js"></script>

... en la pagina principal, no en b.

[juanjoseab]

tengo el mismo problema pero dentro de la función load mando a llamar un dialogo, pero no se ejecuta, al inicio le coloque una alert para saber si entra a load y efectivamente, no se si es factible hacer esto o existe alguna otra manera de hacer esto.

Gracias.

[kapazapa]

Bueno pues si hay alguien a quién le sirva de algo les cuento que hice más o menos lo que me dijo mayid, lo que he hecho es crear un archivo del tipo miarchivo.js, con el script de la página "b", luego lo llamo al inicio de los scripts desde la página "a" de la siguiente forma:

$.getScript("scripts/miarchivo.js");

y listo... al cargar la segunda página desde la primera funciona ok, debo decir que antes funcionaba correctamente en Internet Explorer pero no en otros navegadores, para ser más exacto en opera y firefox, pero con este llamado funciona en los 3 correctamente.
gracias por la ayuda.

[mayid]

$.getScript("scripts/miarchivo.js");

No conocía esto. Yo siempre uso:

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

Pero imagino que lo tuyo carga el script solo si hay una pagina traida por ajax que lo tiene que usar.

[juliettevc]

He leido lo que han puesto en este foro y me está pasando algo similar pero no puede solucionarlo, tal ves fue que no entendí bien. Espero me puedan ayudar.
Tengo una pagina principal y dentro de ella cargo otra pagina mediante la función load() asi:
$(document).ready(function() {
$('#list_product').load('uno.htm');
});

list_product es un div de la página principal donde quiero que se me carge la otra pagina(uno.htm).
Ahora bien dentro de uno.htm quiero que se me ejecute un código javascript y pongo entonces en esa página
<script language="javascript" type="text/javascript">
alert('HOLA!!!');
</script>
El contenido de la página uno.htm si se carga pero el mensaje de alerta me funciona bien en los navegadores IE8, Firefox y Opera, pero cuando lo pruebo en Chrome no me sale el mensaje de alerta.
He estado buscando sobre el tema pero no he encontrado nada, gracias de ante mano.

[mayid]

<script language="javascript" type="text/javascript">
alert('HOLA!!!');
</script>

Nunca probe esto en Chrome, pero a veces lo uso tambien. Será cuestion de chequear si realmente se puede ejecutar codigo desde una pagina traida por ajax así, que sea crossbrowser.

Solo una duda: tu segunda pagina tiene etiquetas head y body?

[ukix]

Yo también he tenido este mismo problema.
Al cargar asíncronamente una página B, que tenía que ejecutar funciones en javascript estas no funcionaban correctamente.

Si añadía el código javascript sobre la página B funcionaba en Firefox, pero no así en Explorer.

Despues de estar horas buscando una solución he encontrado algo que parece que funciona y tiene lógica.. estos son los códigos:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cargador de B</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/a.js"></script>
</head>
 
<body>
<div><a href="#" id="cargarb">Pincha para cargar as&iacute;ncronamente la  p&aacute;gina B</a></div>
<div id="destinob"></div>
</body>
</html>
 

Este código nos carga la pagina b.php sobre la capa "destinob"
La función que realiza esta carga está en "a.js"

Código Javascript:

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
    $j("a#cargarb").click( function()
                            {
                                $j.ajax(
                                    {
                                        url:'b.php',
                                        success: function(resultado)
                                                    {
                                                        $j('#destinob').html(resultado);
                                                        $j.getScript('js/b.js');
                                                    }
                                    });
 
                                
                                return false;
                            }
                        );
 
 
});
 

Lo primero que hace al clickar en el enlace es cargar la página correspondiente, "b.php". Esto lo hago con $.ajax, para así controlar cuando se ha efectuaco la carga.. mediante success hago visible la capa y justo despues cargo el script que necesita la página B para funcionar.
Si cargo el script "b.js" antes que la página que estoy cargando, b.php, el script no funciona en b.php. Los scripts deben cargarse una vez están listas las páginas cargadas.

Código HTML:

<div id="paginab">Usted ha cargado  la p&aacute;gina B as&iacute;ncronamente mediante ajax</div>
 

Y este es el script que necesita:

Código Javascript:

var $j = jQuery.noConflict();
$j(document).ready(function(){
    window.alert("Acaba de cargar asincronamente el archivo b.js");
    $j("#paginab").hover(
                        function()
                            {
                                $j(this).css('color', '#ff6600');
                            },
                        function()
                            {
                                $j(this).css('color', '#000000');
                            }
                        );
 
});
 

El código es muy sencillo, es solo a modo de ejemplo y he comprobado que funciona en todos los navegadores que he probado, Firefox, Explorer 7, Chorme y Safari.

Había probado otras cosas que he encontrado en la Web, pero no llegaban a funcionar en todos los navegadores por igual.

Había probado el escribir directamente el script en la página a cargar B, en FIrefox esto funcionaba, pero no en explorer, que no ejecutaba el script.

Creo que el detalle está en cargar los scripts una vez que la página que los va a usar está cargada, no antes.

Cualquier observación sobre este problema y a esta solución será bien recibida

[mayid]

Buen aporte. Yo hace un tiempo empecé a incluir scripts en el body de la segunda pagina, pero no sabía que hubiera problemas en algunos navegadores. Tendré que retomar esos proyectos y chequearlos.

[rigoxls]

vaya pues a mi me sirvio bastante la ayuda puesta en este foro, en mi caso el truco era agregar la siguiente linea:

Código:

$.getScript('js/b.js');

Porque hay que recordar que una vez que la pagina se carga completamente, se deben cargar los scripts...

gracias ..

[jcortesm29]

Hola a todos, yo utilice el ejemplo propuesto por ukix, pero para validar un formulario con el plugin de validación de jquery.

Lo hice como ukix pero tengo un problema, me funcion en firefox y en chrome. Pero no me funciona en ninguna versión del internet explorer.

Pongo mis archivos para ver en que me pueden ayudar.

index.html

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cargador de B</title>
<script type="text/javascript" src="jquery_min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="js/a.js"></script>
</head>
 
<body>
<div><a href="#" id="cargarb">Pincha para cargar as&iacute;ncronamente la  p&aacute;gina B</a></div>
<div id="destinob"></div>
</body>
</html> 

a.js

Código:

var $j = jQuery.noConflict();
$j(document).ready(function(){

   $j("a#cargarb").click( function()
   {
      $j.ajax(
      {
        url:'b.php',
        success: function(resultado)
        {
          $j('#destinob').html(resultado);
          $j.getScript('js/b.js');
    }
 });
 return false;
 }
 );
});

b.php

Código PHP:

  <form class="regForm" id="login_form" name="form1" method="post" action="">
  <fieldset>
  <legend>Formulario de Ingreso</legend>
  <p>
    <label for="reg_email">Email:</label>
    <input type="text" name="reg_email" id="reg_email">
  </p>
  <p>
    <label for="reg_password">Clave</label>
    <input type="password" name="reg_password" id="reg_password">
  </p>
  <p>
    <label for="reg_sesion">No cerrar sesi&oacute;n</label>
    <input type="checkbox" name="reg_sesion" id="reg_sesion">
  </p>
  </fieldset>  
  <p>
    <input type="submit" name="reg_submit" id="reg_submit" value="Ingresar">
    <input type="reset" name="reg_clean" id="reg_clean" value="Limpiar">
  </p>
  
</form>  
   

b.js

Código:

$j("#login_form").validate({
		rules:{
			reg_email: {
				required: true,
				email: true
			},				
			reg_password:{
				required: true
			}
		},
		messages:{
			reg_email: {
				required: "Ingrese su Email",
				email: "Ingrese un email válido"
			},				
			reg_password:{
				required: "Escriba una contraseña"
			}
		}
});

[marianito89]

Necesito ayuda por favor lo que estoy tratando de hacer es que con el metodo .load() de javascript me cargue la pagina php en un div, la pagina me carga bien pero no me carga los scripts. osea la pagina "pagina.php" tiene codigo con javascript y jquery, me carga todo el contenido pero no los script.

ejemplo de codigo:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#enlace").click(function(event){
$('#contenido').load('pagina.php #main');
});
});
</script>
este ejemplo carga la pagina dentro del div perfecto pero el problema es que pagina.php tiene codigo javascript y jquery pero no los carga osea no puedo enviar formularios ni abrir ventanas al estilo facebook dentro del div contenido y si pagina.php la abro en una pestaña aparte en el navegador todo funciona bien.

[JulioVera]

Yo tengo un problema parecido, lo que pasa es que al momento de cargar la pagina b dentro de la pagina a si me reconoce el codigo javascript púro, pero lo que no me reconoce son las librerias de JQuery y AngularJs alguna idea ....???
intente con getScript(); .Load(); .ajax();