Comunidad de diseño web y desarrollo en internet online

llamar a una funcion padre desde un hijo en AJAX

Citar            
MensajeEscrito el 12 Sep 2009 08:31 am
Hola.
Los ultimos 2 dias he buscado por internet y no he podido hallar una solucion al siguiente problema.

Tengo una pagina padre que carga una pagina hijo en un div gracias a AJAX, pero desde la pagina hijo necesito llamar a una funcion en javascript que esta en el padre y no he sabido como, ya he intentado todo lo que conozco de javascrip parent, top, etc.
agradeceria su ayuda.

Pagina Padre

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>Cargar</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
Aqui se mostrara la informacion
<div id="informacion"></div>
<script type="text/javascript">
llamarasincrono("hijo.php?ID=<?php echo $id;?>&"+new Date(), 'informacion', '', '');
function aleto(i)
{
   alert('si aleto '+i);
}
</script>
</body>
</html>


Pagina Hijo

Código HTML :

<script type="text/javascript">
top.aleto('<?php echo $_GET['ID']; ?>');
</script>


Por favor ayudenme, no he podido que me muestre la advertencia con el ID.....

Por mmarulanda

7 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Sep 2009 03:55 pm
mmarulanda

Hola man!!!, bueno a mi se me ocurrió una solución un poco no ortodoxa pero por lo menos funciono

Página padre

Código HTML :

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Cargar</title> 
<script language="javascript" type="text/javascript">
////Funciones para AJAX
function objetoAjax(){
   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;
}

// Esta función cargará las paginas
function llamarasincrono(url, id_contenedor){
   ajax = objetoAjax();
   ajax.onreadystatechange=function(){ // función de respuesta
      if (ajax.readyState == 4){
         retornado = cargarpagina(ajax, id_contenedor);   
         if(retornado.length != 0){
            aleto(retornado);
         }
      }
      //alert(retornado);
      
   }   
   ajax.open('GET', url, true); // asignamos los métodos open y send
   ajax.send(null);
}

// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, id_contenedor){
      //creo unas variables para trabajar los datos
      var valor = pagina_requerida.responseText;
      var elem = valor.split('[JS]');

      document.getElementById(id_contenedor).innerHTML = elem[0];
      //alert(elem[1].length);
      return elem[1];
}

function aleto(i) { 
   alert(i); 
} 
</script>

</head> 
<body> 

<p>Aqui se mostrara la informacion </p>

<div id="informacion"></div> 

<script type="text/javascript"> 
llamarasincrono("hijo.html", "informacion"); 
</script> 

</body> 
</html> 

Página hijo

Código HTML :

<p><font color="#FF0000">Este es el contenido de la página hijo, el cual no necesita las etiquetas html, head body, ya que están incrustadas en el padre</font></p>
[JS]valor enviado por la pagina secundaria
------------------------------------------
Ahora una breve explicación de que se hizo, existe un pequeño problema cuando retornas datos por AJAX, el cuál es que al retornar solo devuelve texto debido a que utilizas un XMLHttpRequest y el atributo responseText, por lo cual no puedes retornar nada en javascript, ni hacer que se ejecuten funciones desde una petición de javascript de la página hijo, es más hasta donde sé (puedo estar pecando de ignorante :( ) ni siquiera se ejecutan los javascripts de la página hijo.

No probé con el atributo responseBody que retorna un array. Puede que con este atributo si se ejecuten los javascript, como puede que no.

Utilizando la idea básica que se implementa en el BBCode, pues lo que se hace en la página hijo es crear una especie de "delimitador" en mi caso opte por [JS], con [JS] al obtener los datos asincronicamente se divide la cadena por dicho delimitador con la función split(), la cual genera un array. en mi caso en la posición 0 del array, coloque el contenido que quiero que se muestre en el div de la página padre (disculpas por el font, pero me dio pereza ponerle el color con css) y en la posición 1 un valor que utilizare para javascript.

El valor de javascript de la página hijo es retornado, si no colocas nada osea así

Código HTML :

<p><font color="#FF0000">Este es el contenido de la página hijo, el cual no necesita las etiquetas html, head body, ya que están incrustadas en el padre</font></p>
[JS]
(Advertencia: ten cuidado con los espacios en blanco después de [JS])No se ejecutara ninguna acción, ya que el valor retornado tendrá una longitud 0.

Bueno cualquier duda, pregunta de nuevo, espero te de una pista de como resolver tu dilema :wink:

Por esutoraiki

Claber

548 de clabLevel

4 tutoriales

Genero:Masculino  

Aplicaciones para Web

opera
Citar            
MensajeEscrito el 14 Sep 2009 06:11 am
Muchas Gracias....
Funciona perfectamente....

Por mmarulanda

7 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Sep 2009 06:34 pm
mmarulanda

Hola man!!! bueno encontré una manera de mejorar el desempeño, si cambias en la Página padre en la función llamarasincrono

Código Javascript :

retornado = cargarpagina(ajax, id_contenedor);    
if(retornado.length != 0){ 
      aleto(retornado); 
} 
Por esto:

Código Javascript :

retornado = cargarpagina(ajax, id_contenedor);
eval(retornado);
Con esto puedes enviar directamente de la Página hijo algo como esto:

Código HTML :

<p><font color="#FF0000">Este es el contenido de la página hijo, el cual no necesita las etiquetas html, head body, ya que están incrustadas en el padre</font></p>
[JS]var dato = "pollo"; aleto("lo enviado fue " + dato);
Con lo cual ya no importa si después de [JS] envías espacios en blanco.

Una breve explicación: La función eval permite la ejecución dinámica de código de origen javascript. Es decir, transforma un string a código javascript. (No sé si me hago entender) Por ejemplo:

Código :

var variable="alert('hola');";
eval(variable);
El anterior código abriría la ventana de alert con el texto Hola.

Con esta función ya no importa que se retorne un string, al momento de querer ejecutar un script dinámico asincronico (ummm este es el nombre que mejor se acomoda a esta idea) ^^

Por esutoraiki

Claber

548 de clabLevel

4 tutoriales

Genero:Masculino  

Aplicaciones para Web

opera
Citar            
MensajeEscrito el 29 Sep 2009 09:01 pm
segun entiedo y me corrijes.. si no es así pero creo que si te puedo ayudar... namas hay que entrar al mismo canal...

segun entiendo..
tienes una pagina donde cargas un .html en un div
padre = index.html
hijo = formulario.html
x ejemplo.

entoces en index.html tienes un JS que con AJAX se trae a formulario.html y lo cola en divFormulario (x ejemplo), y en formulario.html.. se supone que tiene algun script para manipular index.html... ???... ese es el caso???


si lo hes estas viendo el problema desde una prespectiva equivocada, no tienes pagina hijo ni padre.. al mandar llamar formulario.html, este se incorpora al DOM de index.html, por lo cual tambien tendrias que traerte los script que apartir del momento en que te traes formulario.html vas a utilizar, y en si las dos son el mismo DOM... pero no se si este sea tu caso. por que al inicio pense que estaba o utlizando un IFRAME o un PopUp.. pero creo que no creo que es lo que entiendo o me equivoco?

Por wariodiaz

55 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Oct 2009 02:51 am
wariodiaz

Hola man!!! No te equivocas. El nombre de padre e hijo solo fue para poder expresar de una manera sencilla mmarulanda su problema. Solo fue una manera con los cuales los bautizo; Pudo llamarlos página 1 y página 2 :lol:

Mandanos el código alternativo de lo que propones.

Por esutoraiki

Claber

548 de clabLevel

4 tutoriales

Genero:Masculino  

Aplicaciones para Web

opera
Citar            
MensajeEscrito el 18 Ago 2010 12:22 am
Hola mmarulanda,

Con esto LO SOLUCIONAS sin modificar nada de tu funcion Ajax.

Cierto es que lo que cargues no lee Javascript, pero si lee Html. Por lo que podes ejecutar de funciones de la pagina desde que cargas mediante por ejemplos: onfocus, onmouseover, onblur, etc. Seguramente se te ocurran cosas apartir de esto.

Ejemplo:

Pagina que llama

Código Javascript :

function fLoquequieroejecutar(mLosvaloresquedeseotraer)
{
var sTumaterial = mLosvaloresquedeseotraer;
}


Pagina que es llamada

Código HTML :

<input type="text" onfocus="fLoquequieroejecutar('todotuPHPocualquiercosaquieras');" />


Espero te haya servido esta :ninja: (tecnica), se que se puede resolver directamente ejecutando javascript pero quiza esto te sea mas rapido para un caso particular, atte Nicolas Migali.

Por nicolasmigali

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Ago 2010 05:36 pm
Hola nicolasmigali
Si te fijaste que la idea era desde AJAX :? y no sobre un evento, y que este post fue hace casi 1 año

Por esutoraiki

Claber

548 de clabLevel

4 tutoriales

Genero:Masculino  

Aplicaciones para Web

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.