El DOM y Ventanas secundarias

[nestorjescala]

Saludos Moderadores y Usuarios de forosdelweb.. Este es mi primera publicación.. Tengo un problema hace unas semanas que me ha atrasado un poco en mi proyecto de tesis..

Quisiera saber si tienen alguna idea de como crear una tabla desde una Ventana Emergente a una Ventana Principal utilizando createelement y appendchild??

En la Ventana Emergente tengo un listado de opciones leidas desde una base de datos en Postgres y quiero que en la Ventana Principal se me dibuje la misma tabla con los mismos datos al seleccionar cada opcion del listado..

Espero que puedan ayudarme.. Se los agradeceria mucho! Saludos desde Venezuela..

[chinanzio]

Te sirve algo asi ?
Estoy suponiendo que la vetana secundaria la abres con window.open

En la ventana principal

Código Javascript:

function dibujaTabla(datos) {
    // manipulacion de los datos
    // los createElement y los appendChild
}
 

Y en el popup

Código Javascript:

var datos = {"los" : "datos que sean"};
window.opener.dibujaTabla(datos);
 

[nestorjescala]

Gracias por responder chinanzio.. Yo el Popup lo llamo de esta forma:

Código Javascript:

function nueva_ventana(url, ancho, alto, barra)
{  
    day = new Date();
    id = day.getTime();
    URL='usuarios_listado.php?cedula=' + document.frmasignar.o_cedula.value;
   eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400');");
 
}
 

Y los valores se los envio a la ventana principal usando esta funcion:

Código Javascript:

function AgregarFila(obj){
        obj.value = parseInt(obj.value) + 1;
        var oId = obj.value;
        var cedula = document.getElementById("ced");
        var nombres = document.getElementById("nomb");
        var indicador = document.getElementById("ind");
        var extension = document.getElementById("ext");
        
        var strHtml1 = cedula.value + '<input type="hidden" id="hdnCedula_' + oId + '" name="hdnCedula_' + oId + '" value="' + cedula.value + '"/>' ;
        var strHtml2 = nombres.value + '<input type="hidden" id="hdnNombres_' + oId + '" name="hdnNombres_' + oId + '" value="' + nombres.value + '"/>' ;
        var strHtml3 = indicador.value + '<input type="hidden" id="hdnIndicador_' + oId + '" name="hdnIndicador_' + oId + '" value="' + indicador.value + '"/>' ;
        var strHtml4 = extension.value + '<input type="hidden" id="hdnExtension_' + oId + '" name="hdnExtension_' + oId + '" value="' + extension.value + '"/>' ;
 
        var objTr = document.createElement("tr");
        objTr.id = "rowDetalle_" + oId;
        var objTd1 = document.createElement("td");
        objTd1.id = "tdDetalle_1_" + oId;
        objTd1.innerHTML = strHtml1;
        var objTd2 = document.createElement("td");
        objTd2.id = "tdDetalle_2_" + oId;   
        objTd2.innerHTML = strHtml2;
        var objTd3 = document.createElement("td");
        objTd3.id = "tdDetall_3_" + oId;    
        objTd3.innerHTML = strHtml3;
        var objTd4 = document.createElement("td");
        objTd4.id = "tdDetalle_4_" + oId;   
        objTd4.innerHTML = strHtml4;
 
        objTr.appendChild(objTd1);
        objTr.appendChild(objTd2);
        objTr.appendChild(objTd3);
        objTr.appendChild(objTd4);
 
        var objTbody = document.getElementById("tbDetalle");
        objTbody.appendChild(objTr);
        return false;
    }
 

Espero puedas entender el codigo y lo que intento lograr..

[chinanzio]

entiendo que nueva_ventana está en la ventana principal
AgregarFila tambien ?
Si es asi, a simple vista pareciera que llamando a AgregarFila desde la pagina del popup funcionaría
Tenes algún problema en particular ?

[nestorjescala]

La verdad es que AgregarFila() se encuentra en el Popup.. En el cual cada elemento del listado que se muestra tiene un icono con el onClick=AgregarFila()..

Tu crees que colocando esa funcion en la Ventana Principal funcione correctamente?? y disculpa mi ignorancia respecto al tema..

[chinanzio]

OK, entonces no creo que funcione asi directamente
Haz lo siguiente, recoge los datos que necesitas en una funcion en el popup, y una vez los tengas, llama a la función de la página principal que crea la tabla.
Mas o menos como puse en la primera respuesta

[chinanzio]

Mas o menos una cosa asi:

En el popup:

Código Javascript:

function AgregarFila(obj) {
    obj.value = parseInt(obj.value) + 1;
    var oId = obj.value;
    // ESTOY SUPONIENDO QUE LOS SIGUIENTES ELEMENTOS ESTAN EN EL POPUP
    var cedula = document.getElementById("ced");
    var nombres = document.getElementById("nomb");
    var indicador = document.getElementById("ind");
    var extension = document.getElementById("ext");
 
    var strHtml1 = cedula.value + '<input type="hidden" id="hdnCedula_' + oId + '" name="hdnCedula_' + oId + '" value="' + cedula.value + '"/>';
    var strHtml2 = nombres.value + '<input type="hidden" id="hdnNombres_' + oId + '" name="hdnNombres_' + oId + '" value="' + nombres.value + '"/>';
    var strHtml3 = indicador.value + '<input type="hidden" id="hdnIndicador_' + oId + '" name="hdnIndicador_' + oId + '" value="' + indicador.value + '"/>';
    var strHtml4 = extension.value + '<input type="hidden" id="hdnExtension_' + oId + '" name="hdnExtension_' + oId + '" value="' + extension.value + '"/>';
 
    var params = {};
    params.oId = oId;
    params.strHtml1 = strHtml1;
    params.strHtml2 = strHtml2;
    params.strHtml3 = strHtml3;
    params.strHtml4 = strHtml4;
 
    window.opener.appendTr(params);
    return false;
}
 

y en la principal:

Código Javascript:

function appendTr(params) {
    var objTr = document.createElement("tr");
    objTr.id = "rowDetalle_" + params.oId;
    var objTd1 = document.createElement("td");
    objTd1.id = "tdDetalle_1_" + params.oId;
    objTd1.innerHTML = params.strHtml1;
    var objTd2 = document.createElement("td");
    objTd2.id = "tdDetalle_2_" + params.oId;
    objTd2.innerHTML = params.strHtml2;
    var objTd3 = document.createElement("td");
    objTd3.id = "tdDetall_3_" + params.oId;
    objTd3.innerHTML = params.strHtml3;
    var objTd4 = document.createElement("td");
    objTd4.id = "tdDetalle_4_" + params.oId;
    objTd4.innerHTML = params.strHtml4;
 
    objTr.appendChild(objTd1);
    objTr.appendChild(objTd2);
    objTr.appendChild(objTd3);
    objTr.appendChild(objTd4);
 
    // Y ACA ESTOY SUPONE¡IENDO QUE EL TBODY ESTA EN LA PAGINA PRINCIPAL
    var objTbody = document.getElementById("tbDetalle");
    objTbody.appendChild(objTr);
}
 

[nestorjescala]

Interesante sugerencia! Voy a probar tu codigo y te aviso como me va!

De verdad muchas gracias por las respuestas Chinanzio..

[nestorjescala]

Sigo sin poder solucionar mi problema, pero creo que ya estoy cerca de hacerlo!

Ahora me muestra el siguiente error: objTbody is null en este fragmento de codigo:

Código Javascript:

var objTbody = document.getElementById("tbDetalle");
objTbody.appendChild(objTr);
 

Saludos!

[chinanzio]

Hola , yo estoy suponiendo que en la pagina principal existe un tbody con el id tbDetalle, y que la función appendTr también está en la página principal.
lo tenes asi ?

[nestorjescala]

Iniciado por nestorjescala

Sigo sin poder solucionar mi problema, pero creo que ya estoy cerca de hacerlo!

Ahora me muestra el siguiente error: objTbody is null en este fragmento de codigo:

Código Javascript:

var objTbody = document.getElementById("tbDetalle");
objTbody.appendChild(objTr);
 

Saludos!

P.D: El Error lo muestra en el Popup cuando selecciono el valor de la lista pero hace referencia a la Ventana Principal..

[nestorjescala]

Exacto! Esta en la Ventana Principal el codigo es este:

Código HTML:

<div class="clear"></div>
<div id="formasignar">
<table width="100%" id="tblDetalle">
<thead>
  <tr>
    <td align="center" bgcolor="#EBEBEB" class="Tabla_encabezado_stm">Cedula</td>
    <td align="center" bgcolor="#EBEBEB" class="Tabla_encabezado_stm">Nombre Y Apellido</td>
    <td align="center" bgcolor="#EBEBEB" class="Tabla_encabezado_stm">Indicador</td>
    <td align="center" bgcolor="#EBEBEB" class="Tabla_encabezado_stm">Extension</td>
    <td align="center" bgcolor="#EBEBEB" class="Tabla_encabezado_stm">Quitar</td>
  </tr>
</thead>
<tbody id="tbDetalle">
</tbody>
</table>
</div>
 

Hice una prueba colocandolo en el Popup pero igual sigue marcando el mismo error..

[chinanzio]

A lo mejor el siguiente ejemplo te sirve

PAGINA PRINCIPAL

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=UTF-8" />
<title>Insert title here</title>
</head>
<body>
    <table>
        <tbody id="tbDetalle">
        <tr>
            <td>uno</td>
        </tr>
        <tr>
            <td>dos</td>
        </tr>
        </tbody>
    </table>
    <script>
    function appendTr(datos) {
        var tbody = document.getElementById("tbDetalle");
 
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.innerHTML = datos.los;
        tr.appendChild(td);
 
        tbody.appendChild(tr);
    }
 
    var day = new Date();
    var id = day.getTime();
    var URL = 'popup.html';
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400');");
        
    </script>
</body>
</html>
 

Y ESTO EN popup.html

Código HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!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=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<script>
function appendToPrincipal() {
    var datos = {"los" : "los datos que sean"};
    window.opener.appendTr(datos);  
}
</script>
<input type="button" value="añadir en la principal" onclick="appendToPrincipal();" />
</body>
</html>
 

[nestorjescala]

Por lo visto este era el codigo que andaba buscando! Jeje sino me funciona cambio de carrera!

Muchas gracias Chinanzio.. Muy agradecido! +10
Jajaja