• Publicidad

Copiar datos desde popup a opener

Discute todo acerca de JavaScript así como DHTML o la tecnología AJAX.

Copiar datos desde popup a opener

Notapor adrolmar » 2010-08-05 05:52 @286

¡Hola a todos!

Desde la ventana principal abro una popup con una tabla donde los <td> son cajas de texto editables. Creo dos <div>, uno en la ventana principal llamado 'destino' y otro en la popup llamado 'origen' que contiene la tabla mencionada. Cuando pulso en un botón de la popup me pega el contenido de un div en el otro. El problema es que si modifico los valores de la tabla desde la popup no se reflejan en la principal, únicamente me pega los valores de la tabla con los valores que tenía por defecto :s

Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. function enviarACL(){
  2.   //copiamos la ACL al docu principal
  3.   if(window.opener && !window.opener.closed){
  4.         window.close();
  5.         var dest=opener.document.getElementById('destino');
  6.         dest.innerHTML=document.getElementById('origen').innerHTML;
  7.   }
  8. }
  9.  
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


A ver qué alma caritativa puede echarme un cable.
GRACIAS
Última edición por adrolmar el 2010-08-06 03:32 @189, editado 1 vez en total
adrolmar
 

Publicidad

Re: Copiar datos desde popup a opener

Notapor explorer » 2010-08-05 06:18 @304

Humm... quizás no sirva lo que voy a decir, pero en los ejemplos que he visto de esto, el windows.close() se hace al final. Es decir, ponerla como última línea del if(), no la primera.

Aquí hay un hilo parecido.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Copiar datos desde popup a opener

Notapor adrolmar » 2010-08-05 10:47 @491

Buenas de nuevo,
explorer: puse la línea en primer lugar para evitar que se viera, aunque sólo fuera por una fracción de segundo, cómo desaparece una columna que le elimino a la tabla (con iconos para eliminar cada una de las entradas de la tabla de manera individual). El caso es que no me fijé antes si guardaba cambios o no, probaré y posteo.

¡¡Gracias!!
adrolmar
 

Re: Copiar datos desde popup a opener

Notapor adrolmar » 2010-08-06 02:42 @154

Buenas,
parece que todo sigue igual cambiando de lugar la linea window.close();
¿qué extraño, no? se supone que cuando vuelca el <div> origen sobre el destino lo pega tal cual en ese momento, y no en el estado en el que se encontraba inicialmente, o eso creía yo.

No sé qué puedo probar, pero no tiene sentido esa parte de código si no guarda cambios: precisamente por eso abro la popup, para poder modificar la tabla y luego, una vez confirmada, se envía a la página principal para ser enviada en un formulario para ser procesada.

Si a alguien se le ocurre alguna idea más, ¡bienvenida sea!

¡Muchas gracias!

EDITO:
Analizando el código con 'Firebug' de Firefox me he dado cuenta de que, por más que cambie el valor de un textbox de la tabla, el atributo 'value' no se modifica internamente, y conserva en todo momento el valor inicial, o sea el que le doy al 'value' desde PHP para cargar la tabla (como se trata de direcciones MAC pongo "00:00:00:00:00:00").

También cambio otros atributos de los textbox como por ejemplo 'readOnly' de manera dinámica justo antes de pasar la tabla a la página padre (de manera que dicha tabla es editable únicamente en la popup), y sin problemas.

¡No entiendo nada!

A ver si he arrojado luz sobre el asunto ;)
adrolmar
 

Re: Copiar datos desde popup a opener

Notapor explorer » 2010-08-06 05:19 @263

Aquí te he preparado un ejemplo que funciona con mi Firefox
Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <html>
  2. <head>
  3. <title>Principal</title>
  4.  
  5. <SCRIPT LANGUAGE="JavaScript">
  6.  
  7. function mostrarLista() {
  8.   lista = window.open("secundaria.html", "lista", "width=150,height=210");
  9. }
  10.  
  11. function quitarsecundaria() {
  12.   if (window.lista && window.lista.open && !window.lista.closed) {
  13.    window.lista.opener = null;
  14.     lista.close();
  15.   }
  16. }
  17.  
  18. </SCRIPT>
  19.  
  20. </head>
  21. <body onUnload="quitarsecundaria()">
  22.  
  23. <FORM NAME="destino">Entre el precio correcto:
  24. <INPUT TYPE="text" NAME="cajadestino" SIZE="10" VALUE="">
  25. <INPUT TYPE="button" VALUE="listar" onClick="mostrarLista()">
  26. </FORM>
  27.  
  28. </body>
  29. </html>
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <html>
  2. <head>
  3. <title>Secundaria</title>
  4.  
  5. <SCRIPT LANGUAGE="JavaScript">
  6.  
  7. function escoge(simbolo) {
  8.     if (window.opener && !window.opener.closed)
  9.        window.opener.document.destino.cajadestino.value = simbolo;
  10.     window.close();
  11. }
  12.  
  13. </SCRIPT>
  14.  
  15. </head>
  16. <body>
  17. <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
  18. <TR BGCOLOR="#cccccc"><TD><B>NYSE</B></TD><TD><B>NASDAQ</B></TD></TR>
  19. <TR><TD><A HREF="javascript&#058;escoge('AOL')">AOL</A></TD>
  20. <TD><A HREF="javascript&#058;escoge('CSCO')">CSCO</A></TD></TR>
  21. <TR><TD><A HREF="javascript&#058;escoge('CPQ')">CPQ</A></TD>
  22. <TD><A HREF="javascript&#058;escoge('INTC')">INTC</A></TD></TR>
  23. <TR><TD><A HREF="javascript&#058;escoge('NOK')">NOK</A></TD>
  24. <TD><A HREF="javascript&#058;escoge('SUNW')">SUNW</A></TD></TR>
  25. <TR><TD><A HREF="javascript&#058;escoge('LU')">LU</A></TD>
  26. <TD><A HREF="javascript&#058;escoge('AMZN')">AMZN</A></TD></TR>
  27. <TR><TD><A HREF="javascript&#058;escoge('T')">T</A></TD>
  28. <TD><A HREF="javascript&#058;escoge('MSFT')">MSFT</A></TD></TR>
  29. </TABLE>
  30. </body>
  31. </html>
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4

La ventana principal abre la secundaria cuando el usuario pulsa el botón de lista. En la secundaria, según lo que escoja el usuario, se modifica la caja de texto del formulario de la ventana llamante, y luego se cierra.

Del código tuyo, quizás lo que no me gusta es la línea

dest=opener.document.getElementById('destino');

pues en realidad debería ser

dest = window.opener.document.getElementById('destino');

O, todo en una sola línea:

window.opener.document.destino.innerHTML = window.document.origen.innerHTML;

aunque, esto último, no lo he probado.

Actualización: Los & #058; que ves, se refieren al carácter ':'.

Actualización: ¿Y, no sería mejor, en lugar de intentar copiar el HTML, copiar el contenido de los objetos? Ya que dices que en la ventana secundaria hay una tabla cuyas celdas contienen cajas editables, podrías referirte al contenido de las cajas editables, y no al HTML que las ha generado.

¿No podrías publicar un ejemplo mínimo de lo que estás haciendo, como he hecho yo?
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Copiar datos desde popup a opener

Notapor adrolmar » 2010-08-09 05:59 @291

Hola de nuevo,

probé anteponiendo 'window' tal y como sugerías, explorer, pero todo sigue igual. Pero primero paso a explicar qué es lo que hago a modo resumen.

Primero, desde el código PHP de la página principal, muestro una tabla, con datos de dispositivos, en el que una de las columnas es un enlace que abre un popup donde cargo unos datos (direcciones MAC) del dispositivo correspondiente vía SNMP y los muestro en una tabla en un popup para ser editados. Posteriormente el usuario confirma desde la popup y -en teoría- toda la tabla editada pasa a la página principal y se cierra el popup.

Un ejemplo de código que genera enlaces, en la tabla de la ventana principal, al popup:

Sintáxis: [ Descargar ] [ Ocultar ]
Using php Syntax Highlighting
  1. $options = 'width=350,height=400,scrollbars=1';
  2. $url = 'this.href';
  3. //mostramos enlace a popup con ACL del dispositivo
  4. $result = "<a href='" . $_SERVER['SELF_PHP'] . "?parametro=$parametro&ip=$ip&oid=$oid' onclick=\"window.open(" . $url . ", this.target, '" . $options . "'); return false;\">ACL</a>";
Coloreado en 0.019 segundos, usando GeSHi 1.0.8.4


Bucle que muestra la tabla editable con MACs en el popup:
Sintáxis: [ Descargar ] [ Ocultar ]
Using php Syntax Highlighting
  1. <div id='origen'>
  2. <table>
  3. foreach($acl as $i=>$mac){
  4.         echo <<<EOF
  5.         <tr>
  6.                         <td><input type='text' name ='mac[]' id='$i' value='$mac' maxlength='17' size='17'></td>
  7.                         <td><a href='#' onclick='eliminarFila(this)'><img border='0' src='../images/delete.gif' title='delete entry'></a></td>
  8.         </tr>
  9. EOF;
  10.         }
  11. </table>
  12. </div>
Coloreado en 0.009 segundos, usando GeSHi 1.0.8.4


También muestro botones en el popup para agregar y eliminar entradas a la tabla de manera dinámica mediante JavaScript. Las filas agregadas dinámicamente tienen como valor inicial '00:00:00:00:00:00' y lógicamente el usuario ha de modificarlas.

Código JavaScript que agrega una fila dinámicamente en el popup:
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. var tabla=document.getElementById('tabla').getElementsByTagName('tbody')[0];
  2. var row=document.createElement('tr');
  3. var col=document.createElement('td');
  4. col.innerHTML = "<input type='text' name='mac[]' id='"+numFilas+"' value='00:00:00:00:00:00' maxlength='17' size='17'>";
  5. var aux=document.createElement('td');
  6. aux.innerHTML = "<a href='#' onclick='eliminarFila(this)'><img border='0' src='../images/delete.gif' title='delete entry'></a>";
  7. row.appendChild(col);
  8. row.appendChild(aux);
  9. tabla.appendChild(row);
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


En la parte inferior de la página principal, mediante PHP, creo un <div id='destino'>Select an ACL to edit first</div>, que será machacado con la tabla del popup, una vez el usuario ha terminado de editarla.

El problema viene al pegar el innerHTML() del <div id='origen'> (la tabla del popup) sobre el <div id='destino'> en la página principal no contempla los cambios realizados por el usuario, sino que los textboxes contienen los valores por defecto que yo les dí inicialmente ('00:00:00:00:00:00').

Por último, el código que pega el contenido del <div> en el popup al otro en la página principal.
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. if(window.opener && !window.opener.closed){
  2. eliminarColumna('tabla');
  3.         soloLectura();
  4.         var dest=window.opener.document.getElementById('magico');
  5.         dest.innerHTML=window.document.getElementById('origen').innerHTML;
  6.         window.opener.document.getElementById('Commit').style.display='block';
  7.         habilitarCheckboxes();
  8.         window.close();
  9. }
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4


Explorer, lo que me comentaste de referirme a los textboxes en lugar del código interno del <div>, probaré a crear en lugar de un div 'destino' otra tabla vacía (pues mi idea es no mostrar cajas de texto vacías en la página principal, sino que aparezca todo relleno y listo en cuanto se confirme desde la popup) y con JavaScript desde el popup ir rellenándola con los datos que introduzca/modifique el usuario en lugar de copiar el div entero tal cual. A ver si así se reflejan los cambios realizados.

Es curioso que, en el momento de pegar un div sobre otro, mediante sentencias estilo 'alert(caja.value);' me muestre el valor correcto en la popup mientras que luego se pegue el '00:00:00:00:00:00' dichoso inicial en la principal.

Bueno, en cuanto pruebe eso, posteo nuevamente.
adrolmar
 

Re: Copiar datos desde popup a opener

Notapor adrolmar » 2010-08-10 04:50 @243

Hola de nuevo,
Finalmente lo solucioné así, aunque no será la manera más ortodoxa ni la más eficiente. Probé al estilo appendChild() pero daba problemas el dichoso IE, así que una vez más tuve que sucumbir a lo práctico en detrimento de lo estándar ¬¬.

Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. //vaciamos tabla destino por si hubiera filas
  2. vaciarTabla();
  3. //copiamos tabla al docu principal
  4.     var objs=document.getElementsByTagName('input');
  5.     var destino=opener.document.getElementById('destino');
  6.     var aux="<table $STATUS width='10%'><tr><th $STATUS>Start MAC</th><th $STATUS>End MAC</th></tr>";
  7.     for(var i=0; i<objs.length; i++){
  8.             if(objs[i].type=='text'){
  9.                 aux+=(i%2==0)? "<tr><td><input type='text' name='mac[]' id='"+ i +"' value='"+ objs[i].value +"' readOnly maxlength='17' size='17'></td>" :
  10.                                "<td><input type='text' name='mac[]' id='"+ i +"' value='"+ objs[i].value +"' readOnly maxlength='17' size='17'></td></tr>";
  11.              }
  12.     }
  13. destino.innerHTML=aux;
  14. window.close();
  15. }
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4
adrolmar
 

Re: Copiar datos desde popup a opener

Notapor explorer » 2010-08-10 16:00 @708

Sí, algo así era lo que te había dicho: no copiar el HTML del popup, sino navegar por el DOM del popup. No sé si será una diferencia en cuanto al contenido, pero parece ser que sí.

Y... un detalle con respecta a tu firma... dices que

«Dios nos dio boca para pedir y el kernel de Linux para conceder/denegar servicios»

No creo que a Linus Torvalds le guste la idea de que concedas la paternidad de su Linux a un dios, pues se ha declarado un completo a-religioso - ateísta ;)
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Copiar datos desde popup a opener

Notapor adrolmar » 2010-08-11 03:35 @191

¡Hola!
Como bien dices, hay diferencias en cuanto al contenido, pero además hay diferencia -abismal- en cuanto al tiempo de proceso: mientras que con el copia-pega del innerHTML() era instantáneo, con el recorrido-copia-pega se nota que 'algo se cuece' en el navegador por un instante. En fin, después de todo quedó como esperaba xD

En lo referente a mi firma... es una frase bastante recurrida por un antiguo profesor de la Universidad, el tío era un 'freaky' de los buenos. Qué tostón hubieran sido mis clases de kernel Linux y arquitectura Intel sin esas frasecillas :)

A todo esto, con permiso del Sr. Torvalds, que como buen escandinavo será comprensivo y tolerante xD
adrolmar
 


Volver a JavaScript

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado