Pasar Valores de Ventana Hija a Padre (Pass values from Child to Parent Windows with PHP and Javascript)

En este articulo, la ventana hija es un listado de clientes, donde el usuario a darle clic a un cliente, se retorna el ID del Cliente a un objeto Input tipo hidden y el Nombre del Cliente a un objeto Input tipo Text.

En la ventana padre agrega un hipervinculo como el siguiente:

<a href="#" id="customer_search" onClick="showModalSendAndReturnValues('customers_search.php', ''); return false;">Abrir Ventana Hija</a>

y crea dos objetos HTML Input:

<input type="text" id="customer_name">

<input type="hidden" id="customer_id">

El evento onClick sera el que dispare la función que abre la ventana hija. 

El return false, es importante ya que evita que la ventana padre se auto-refresque y nos lleve a otra pagina.

La funcion showModalSendAndReturnValues, es un Javascript que puede ir en el header de tu pagina padre o en un archivo de funciones javascript. Este es el que abre la ventana hija

function showModalSendAndReturnValues(url, parameters) {

  if (parameters = '') {

      parameters = "dialogWidth="                               

              + Math.floor(screen.availWidth/2) + "px; " 

              + " dialogHeight="                           

              + Math.floor(screen.availHeight/2) + "px; "

              + " center=yes; help=yes; "                  

              + " status=yes; resizeable=no;"; 

  }

  

  var dialogWin = window.showModalDialog(url, obj, parameters); // Showing the Modal Dialog

  // Below Part will be executed after the dialog window is closed.

  document.getElementById('customer_id').value = dialogWin.id;

  document.getElementById('customer_name').value = dialogWin.value;

}

Las sentencias después de var dialogWin = window.showModalDialog(url, obj, parameters), son ejecutadas luego de cerrarse la ventana hija.

customer_id y customer_name, son los id (atributo HTML) de los objetos donde se devolverá los valores (id del cliente y nombre del cliente) elegidos en la ventana hija. 

En la ventana hija, tendrás un tabla o cuadricula donde al dar clic a un fila, se cierra la ventana y pasa el id del cliente y su nombre a la ventana padre:

<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="0">

  <tr class="dataTableHeadingRow">

    <td class="dataTableHeadingContent">Cliente</td>

    <td class="dataTableHeadingContent">Tipo Cliente</td>

    <td class="dataTableHeadingContent">Teléfono</td>

    <td class="dataTableHeadingContent">E-mail</td>

  </tr><?php

    

    $customers_query_raw = "select customer_id, customer_name, mainphone, email, customer_type from clientes";

    

    while($customers = fetch_array($customers_query)) {  ?>

        <tr class="dataTableRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="sendValues('<?php echo $customers['customer_id']; ?>', '<?php echo $customers['customer_name']; ?>');">

          <td class="dataTableContent"><?php echo $customers['customer_name']; ?></td>

          <td class="dataTableContent"><?php echo $customers['customer_type']; ?></td>

          <td class="dataTableContent"><?php echo $customers['customer_mainphone']; ?></td>

          <td class="dataTableContent"><?php echo $customers['email']; ?></td>

        </tr><?php

      }

    ?>

</table>

Al dar clic en la fila con los datos del cliente, se llamada a la función sendValues, que ordenara cerrar esta ventana y mandara los datos a la ventana padre usando la variable sendObj que es un arreglo de dos datos.

function sendValues(id, value){

   sendObj = {id:id,value:value};

   window.returnValue = sendObj;

   window.close();

 }