[SOLUCIONADO] Pasar datos de una ventana hija (modal) a ventana padre js

bsanchez0323 · #1 (**permalink**) 28/08/2013, 12:42

Hola a todos tengo un script padre en el cual abro una ventana emergente y capturo algunos datos, los cuales quiero regresar al script padre ¿como puedo hacerlo?

He estado investigando y me encontré que tambien se puede hacer con window.open sin embargo no encuentro la forma de ocultar la barra de dirección ya he probado con:

location=no
location=0

perro me la sigue mostrando es por eso que opte x utilizar modal pero con modal no se como mandar los datos al script padre.

ayuda xfavor.

ocp001a · #2 (**permalink**) 29/08/2013, 11:07

Una ventana "modal" no es una ventana propiamente si no una capa dentro de la ventana principal. Si es así, los datos que pudiera tener una ventana modal ya están dentro de la padre.

Si muestras tu script y los datos que quieres capturar de la ventana modal se te podría orientar.

bsanchez0323 · #3 (**permalink**) 29/08/2013, 14:53

Hola ocp001a tengo estos 2 archivos
Este es el script padre que al presionar algún input de telefono manda llamar al script hijo en el cual respecto a una serie de validaciones puedo capturar en un input el número telefónico y ese número telefónico necesito regresarlo al al input del script padre lo cual hago con la funcion insertar, todo funciona bien con window open pero quisiera saber como hacerlo con window.showModalDialog

Código HTML:

Ver original<HTML>
    <head>
            <TITLE>DIALER - MODO PREDICTIVO</TITLE>
    </head>
        
<script language=javascript>
function validar_telefono(id){
    window.showModalDialog("validar_telefono.html?id="+id,window.document,"center=yes;dialogheight=410px;dialogwidth=360px;");
}
</script>
<BODY BGCOLOR="white" TEXT="#2000A0" STYLE="font-family: ARIAL,HELVETICA,SANS-SERIF">
<form action="" method="post" name="form" id="form">
 
<div id="formulario" name="Formulario">     
        
        <table border='0'style="background-color: WHITE; WIDTH:150px; margin-left: -10px;" >
        <tr>
            <td style="color: black; font-family: Arial; width: 80px;font-size:14px;" ><small>Telefono 1: </small></td>
            <td > <input id="Telefono1" name="Telefono1" value="" type="text"  onchange=" " size="12" style="font-family: Arial; font-size: 8pt;height: 16px;" onDblClick="validar_telefono('Telefono1');" readonly></td>
            <td style="color: black; font-family: Arial; font-size:14px;"><small>Telefono 2: </small></td>
            <td> <input id="Telefono2" name="Telefono2" value="" type="text"  onchange=" " size="12" style="font-family: Arial; font-size: 8pt;height: 16px;" onDblClick="validar_telefono('Telefono2');" readonly></td>
        </tr>
        <tr>
            <td style="color: black; font-family: Arial; width: 80px; font-size:14px;"><small>Telefono 3: </small></td>
            <td > <input id="Telefono3" name="Telefono3" value="" type="text"  onchange=" " size="12" style="font-family: Arial; font-size: 8pt;height: 16px;" onDblClick="validar_telefono('Telefono3');" readonly></td>
            <td style="color: black; font-family: Arial; font-size:14px;"><small>Telefono 4: </small></td>
            <td> <input id="Telefono4" name="Telefono4" value="" type="text"  onchange=" " size="12" style="font-family: Arial; font-size: 8pt;height: 16px;" onDblClick="validar_telefono('Telefono4');" readonly></td>
        </tr>
    </form>
    </table>
<iframe name="trastero" style="width:0px;height:0px;visibility:hidden"></iframe>
</div>
</Body>
</HTML>

script hijo

Código HTML:

Ver original<HTML>
    <head>
            <TITLE>Cliente Scripter</TITLE>
    </head>
    <script language=javascript>
    
    query=window.location.search.substring(1);
    q=query.split("="); //clienteid=123456789,valor=opcion1
    var id =q[1];
     document.getElementById("LargaDistancia").style.display = 'none';
     
     function larga_distancia(){
         document.getElementById("Tel_completo").disabled=true; 
         document.getElementById("LargaDistancia").style.display = '';
         document.getElementById("Local").style.display = 'none';
         document.getElementById("Tel").value=''; 
         document.getElementById("Tel_completo").value='';
     }
     
     function local(){
         document.getElementById("Tel_completo").disabled=true; 
         document.getElementById("LargaDistancia").style.display = 'none';
         document.getElementById("Local").style.display = '';
         document.getElementById("Tel").value='';
         document.getElementById("Tel_completo").value='';
     }
     function ld_fijo(){
         document.getElementById("Tel_completo").disabled=false; 
         var input = document.getElementById ("Tel_completo");
         input.maxLength = 10;
         document.getElementById("Tel").value='901'; 
         document.getElementById("num_caracteres").value= 10;
         document.getElementById("Tel_completo").value='';
         document.getElementById('Tel_completo').focus();
     }
     
     function ld_movil(){
         document.getElementById("Tel_completo").disabled=false; 
         var input = document.getElementById ("Tel_completo");
         input.maxLength = 10;
         document.getElementById("Tel").value='9045'; 
         document.getElementById("num_caracteres").value= 10;
         document.getElementById("Tel_completo").value='';
         document.getElementById('Tel_completo').focus();
     }
     
     function loc_fijo(){
         document.getElementById("Tel_completo").disabled=false; 
         var input = document.getElementById ("Tel_completo");
         input.maxLength = 8;
         document.getElementById("Tel").value='9'; 
         document.getElementById("num_caracteres").value= 8;
         document.getElementById("Tel_completo").value='';
         document.getElementById('Tel_completo').focus();
     }
     
     function loc_movilFijo(){
         document.getElementById("Tel_completo").disabled=false; 
         var input = document.getElementById ("Tel_completo");
         input.maxLength = 10;
         document.getElementById("Tel").value='9044'; 
         document.getElementById("num_caracteres").value= 10;
         document.getElementById("Tel_completo").value='';
         document.getElementById('Tel_completo').focus();
     }
     
     function insertar(){
      var ret = validar_num_caracteres();
      if (ret != false){
          if(confirm("El número " + document.getElementById("Tel").value + document.getElementById("Tel_completo").value + " ¿es correcto?")){
              window.opener.document.getElementById(id).value = document.getElementById("Tel").value + document.getElementById("Tel_completo").value;
              window.close(); 
          }
      }
     } 
     
     function validar_num_caracteres() {
         var num_caracteres = document.getElementById("num_caracteres").value;
          if (form.Tel_completo.value.length < num_caracteres) {
            alert('El número de no puede contener menos de ' + num_caracteres + " caracteres." );
            form.Tel.focus();
            return false;
          }
        }
     function validarNro(e) //Esta funcion valida que solo se acepten números donde corresponda.
     {
        var key;
                if(window.event) 
                    {
                    key = e.keyCode;
                    }
                else if(e.which) 
                    {
                    key = e.which;
                    }
                
                if (key < 48 || key > 57)
                    {
                    if(key == 46 || key == 8) 
                        { return true; }
                    else 
                        { return false; }
                    }
                return true;
     }  
     
     function cancelar(){
         window.close(); 
     } 
     
    </script>
<BODY BGCOLOR="white" TEXT="#2000A0" STYLE="font-family: ARIAL,HELVETICA,SANS-SERIF">
<form id="form" method="post" action="" id="form">
<center style="color: black; font-family: Arial;"><h3>Tipo de teléfono</h3></center>
<table align="center">
  <tr>
      <td style="color: black; font-family: Arial;"><input type="radio" name="myradio" value="Desabasto" onClick="larga_distancia();">Larga Distancia </td>     
      <td style="color: black; font-family: Arial;"><input type="radio" name="myradio" value="No le interesa" onClick="local();">Local</td>
      <td style="color: black; font-family: Arial;" height="10"></td>       
    </tr>
</table>
<div id="LargaDistancia" style="display:none;"  name="LargaDistancia">
<table align="center">
    <tr>
        <td style="color: black; font-family: Arial;"><input type="radio" name="myradio_2" value="Baja rotacion" onClick="ld_fijo();">Teléfono fijo</td>        
        <td style="color: black; font-family: Arial;"><input type="radio" name="myradio_2" value="No esta en portafolio" onClick="ld_movil();">Teléfono movil</td>
        <td style="color: black; font-family: Arial;" height="10"></td>             
    </tr>
</table>
</div>
<div id="Local" style="display:none;"  name="Local">
<table align="center">
    <tr>
        <td style="color: black; font-family: Arial;"><input type="radio" name="myradio_2" value="Baja rotacion" onClick="loc_fijo();">Teléfono fijo</td>       
        <td style="color: black; font-family: Arial;"><input type="radio" name="myradio_2" value="No esta en portafolio" onClick="loc_movilFijo();">Movil fijo</td>
        <td style="color: black; font-family: Arial;" height="10"></td>         
    </td>               
    </tr>
</table>
</div>
<center>
  <input id="Tel" name="Tel" value="" type="text"  size="12" style="font-family: Arial; font-size: 8pt;height: 16px; border:none;" disabled onkeypress="javascript:return validarNro(event)">
  <input id="Tel_completo" name="Tel_completo" value="" type="text"  size="12" style="font-family: Arial; font-size: 8pt;height: 16px; " disabled onkeypress="javascript:return validarNro(event)">
  <input id="num_caracteres" name="num_caracteres" value="" type="hidden"  size="12" style="font-family: Arial; font-size: 8pt;height: 16px;" >
  <br>
  <br>
  <input type="button" value="Guardar" onClick="insertar();" style="WIDTH: 125px; HEIGHT: 25px">
  <input type="button" value="Cancelar" onClick="cancelar();" style="WIDTH: 125px; HEIGHT: 25px">
</center>
 
</form>     
</Body>
</HTML>

Gracias por anticipado =)

bsanchez0323 · #4 (**permalink**) 03/09/2013, 14:40

Hola despues de buscar en varios lados encontre la solución por si le sirve a alguien aki se las pongo:

Debo mencionar que esta opción solo funciona en Internet explorer.

Modal1.htm

Código HTML:

Ver original<html>
<head><title>Demo modal dialog</title></head>
<script language="JavaScript">
function changeMe(szName)
{
    var szUrl;
    var szFeatures;
 
    szUrl = 'modal2.htm';
    szFeatures = 'dialogWidth:20; dialogHeight:10; status:0; help:0';
 
    szName = window.showModalDialog(szUrl, szName, szFeatures)
    Name.innerText = szName;
}
</script>
<body>
<p>Hello, your name is <b><span id="Name">Unknown</span></b>.</p>
<p><input type="button" onClick="changeMe(Name.innerText)" value="Change Name"></p>
</body>
</html>

Modal2.htm

Código HTML:

Ver original<html>
<head><title>Enter your name</title></head>
<script language="JavaScript" for="window" event="onLoad">
    Name.value = window.dialogArguments;
</script>
<script language="JavaScript">
function closeMe()
{
    window.returnValue = Name.value;
    event.returnValue = false;
    window.close();
}
</script>
<body>
<p><input type="text" name="Name" value=""></p>
<p><input type="button" value="Submit" onClick="closeMe()"></p>
</body>
</html>