abrir ventana y mandar parámetros

[Papito18]

buen dia amigos.

supongamos que yo estoy calculando cierta información en mi pagina principal, y en un boton de esa misma pagina yo quiero llamar a una ventana y mandar valores de la pagina principal a esta ventana... con metodo post.

quiero que esa ventana sea pequeña algo así como modal porque no quiero que mi pagina principal se recargue o se refresque.

alguien tiene algun ejemplo?

un ejemplo sencillo que no me pierda mas de lo que estoy...

[xfxstudios]

Yo lo he hecho con las modales de bootstap, solo que utilizamdo un iframe

[Papito18]

Iniciado por xfxstudios

Yo lo he hecho con las modales de bootstap, solo que utilizamdo un iframe

y eso como es amigo ?

[Triby]

"algo así como modal"?

Sugiérote Tinybox2, donde puedes usar AJAX para no recargar la página. Ejemplos de uso: http://sandbox.scriptiny.com/tinybox2/

[Papito18]

Iniciado por Triby

"algo así como modal"?

Sugiérote Tinybox2, donde puedes usar AJAX para no recargar la página. Ejemplos de uso: http://sandbox.scriptiny.com/tinybox2/

amigo no hago nada con que me digas como funciona lo que quiero, necesito un ejemplo pero quiero ver el codigo...

muy lindo verlo funcionando pero no me es de beneficio.

[xfxstudios]

Iniciado por Papito18

amigo no hago nada con que me digas como funciona lo que quiero, necesito un ejemplo pero quiero ver el codigo...

muy lindo verlo funcionando pero no me es de beneficio.

de esa manera no creo que consigas nada, esa actitud no te va a servir, es decir, ya con que te digan que ese script te sirve creo que puedes buscar, no todo el tiempo se te puede dar un codigo de como funciona todo, acabo de visitar la web de tinybox y ya tengo una idea de que hacer con el, solo ve los ejemplos, visualiza el codigo y ve si te sirve o no

[Triby]

A mí me es de menor beneficio intentar ayudar a alguien que no mueve un dedo para buscar la solución a partir de una pista recibida; no sé si es falta de iniciativa o crees que por alguna razón estamos obligados a darte una solución completa, pero eso no lo hacemos aquí, mucho menos cuando vemos que el "interesado" es el que menos interés tiene en avanzar.

[caricatos]

Hola:

No es necesario usar ventanas, con Ajax puedes hacer peticiones sin abrir ventanas... de todos modos sería solo una parte en php y otra en javascript...

Saludos

[horusorion]

Iniciado por Papito18

buen dia amigos.

supongamos que yo estoy calculando cierta información en mi pagina principal, y en un boton de esa misma pagina yo quiero llamar a una ventana y mandar valores de la pagina principal a esta ventana... con metodo post.

quiero que esa ventana sea pequeña algo así como modal porque no quiero que mi pagina principal se recargue o se refresque.

alguien tiene algun ejemplo?

un ejemplo sencillo que no me pierda mas de lo que estoy...

Hola amigo, para que te sea mas facil, puedes usar ajax de Jquery, es muy facil, puedes enviar peticiones de tipo POST, GET sin recargar, pero es mejor que te leas un tutorial, y si tienes dudas me agregas como amigo y te ayudo.

[conf1982]

Pero bueno San Google dice

http://www.ibermega.com/tutoriales/ventana-modales-bootstrap-wordpress/

[caricatos]

Hola:

Iniciado por horusorion

...puedes usar ajax de Jquery¡¡¡

Para qué un incremento adicional de datos, siendo Ajax nativo (javascript) muy fácil de implementar...

Iniciado por horusorion

... me agregas como amigo y te ayudo.

¿Necesitas amigos...?

Iniciado por conf1982

Pero bueno San Google dice

http://www.ibermega.com/tutoriales/v...rap-wordpress/

¿San google?, ¿bootstrap?, ¿wordpress?... para mí que San Google no leyó el mensaje original...

Saludos

[Papito18]

Iniciado por Triby

A mí me es de menor beneficio intentar ayudar a alguien que no mueve un dedo para buscar la solución a partir de una pista recibida; no sé si es falta de iniciativa o crees que por alguna razón estamos obligados a darte una solución completa, pero eso no lo hacemos aquí, mucho menos cuando vemos que el "interesado" es el que menos interés tiene en avanzar.

disculpa amigo, no pensé que te molestaría.

[Papito18]

buscando por ahi, he logrado la comunicacion entre las paginas usando javascrip, pero tengo un problema porque si yo mando el valor a una caja de texto pues no funciona,

hasta ahorita recibo el valor en un <p id="deHijo"></p>

paginaPadre.html

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>facturacion</title>
<title>prueba-padre</title>
<script type="text/javascript">

function abrirHijo() {
window.open("paginaHijo.php", "popupId", "location=no,menubar=no,titlebar=no,resizable=no,t oolbar=no, menubar=no,width=500,height=500");
}

</script>
</head>
<body>
<h1 id="text">Comunicación entre dos páginas con Javascript.</h1>
<button onclick="abrirHijo();">Abrir Página Hijo.</button>
<p id="deHijo">

<input type="text" name="p" id="p">
</p>
</body>
</html>

esta es la paginaHijo que es de donde mando el valor a paginaPadre.html

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>facturacion</title>
<title>prueba-beforeclose</title>
<script type="text/javascript">
function cerrar() {
var data = window.document.getElementById('val1').value;

window.opener.document.getElementById('deHijo').in nerHTML =data;
this.window.close();
}
</script>
</head>
<body>
<h1 id="text">Ésta es la página hijo que procesa un query string</h1>
<input type="text" id="val1" /> <button onclick="cerrar();">Cerrar</button>
</body>
</html>

no se en que parte puede esetar el error del porque no me manda el valor a la caja de texto

[NSD]

padre.html

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Box Ventanas</title>
        <style>
            .modal {
                position: fixed;
                z-index: 9999;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.8);
            }
            .modal > div {
                width: 80%;
                height: 100vh;
                padding: 20px;
                margin: 0 auto;
                background-color: #FFF;
                box-shadow: 0 0 10px #000000;
            }
            .modal > div > h2 {
                margin:0;
                padding:0 0 10px 0px;
                border-bottom:1px #ccc solid;
                font-size:22px;
            }
            .modal > div > div{
                display:block;
                padding:10px 0 0 0px;
                font-size:18px;
                line-height:22px;
            }
            .modal > div > span {
                float:right;
                display:block;
                font-size:22px;
                color:#858585;
            }
        </style>
        <script>
            Modal = function(url) {
                this.open = this.open.bind(this);
                this.close = this.close.bind(this);
                this.load = this.load.bind(this);
 
                this.url = url;
                this.box = null;
            }
 
            Modal.prototype = {
                "open" : function(title, params) {
                    this.load(params, function(status, responseText) {
                        var templ = document.createElement("template");
                        templ.innerHTML = '<div>'+
                                            '<span>X</span>'+
                                            '<h2>' + title + '</h2>'+
                                            '<div>' + responseText + '</div>'+
                                          '</div>';
                        
                        this.box = document.createElement("div");                 
                        this.box.classList.add("modal");
                        document.body.appendChild(this.box);
                        this.box.appendChild(document.importNode(templ.content, true));
                        this.box.firstChild.firstChild.addEventListener("click", this.close);
                    });
                },
                "close" : function() {
                    document.body.removeChild(this.box);
                    this.box = null;
                },
                "load" : function(params, callback) {
                    var request = new XMLHttpRequest();
                    request.open("POST", this.url);
                    request.onreadystatechange = function(callback) {
                        if(this.readyState == 4)
                            callback(this.status, this.responseText);
                    }.bind(request, callback.bind(this));
                    request.send(params);
                }
            };
        </script>
    </head>
    <body>
        <h1>Modal de comunicacion entre paginas via AJAX</h1>
        <form id="datos-origen">
            <label>
                Un numero:
                <input type="text" name="numero" value="5">
            </label>
        </form>
        <button id="open">ABRIR MODAL</button>
 
        <script>
            document.getElementById("open").addEventListener("click", function(){
                var onemodal = new Modal("hijo.php");
                onemodal.open("Pagina hijo", new FormData(document.getElementById("datos-origen")));
            });
        </script>
    </body>
</html>
 

hijo.php

Código PHP:

Hola! Soy hijo.php, me mandaste el numero "<?=$_POST["numero"];?>", yo te devuelvo el doble, cuando cierres esta ventana lo vas a ver.
<script>
    document.getElementById("datos-origen").elements.numero.value = <?=($_POST["numero"]*2);?>;
</script>
 

[conf1982]

Iniciado por caricatos

Hola:



¿San google?, ¿bootstrap?, ¿wordpress?... para mí que San Google no leyó el mensaje original...

Saludos

Vaya tela... solo queria decir que si buscaba en google, encontraba el codigo de las ventanas modales o algo parecido que puede aplicar a su código... pero en fin...

[Papito18]

Iniciado por NSD

padre.html

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Box Ventanas</title>
        <style>
            .modal {
                position: fixed;
                z-index: 9999;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.8);
            }
            .modal > div {
                width: 80%;
                height: 100vh;
                padding: 20px;
                margin: 0 auto;
                background-color: #FFF;
                box-shadow: 0 0 10px #000000;
            }
            .modal > div > h2 {
                margin:0;
                padding:0 0 10px 0px;
                border-bottom:1px #ccc solid;
                font-size:22px;
            }
            .modal > div > div{
                display:block;
                padding:10px 0 0 0px;
                font-size:18px;
                line-height:22px;
            }
            .modal > div > span {
                float:right;
                display:block;
                font-size:22px;
                color:#858585;
            }
        </style>
        <script>
            Modal = function(url) {
                this.open = this.open.bind(this);
                this.close = this.close.bind(this);
                this.load = this.load.bind(this);
 
                this.url = url;
                this.box = null;
            }
 
            Modal.prototype = {
                "open" : function(title, params) {
                    this.load(params, function(status, responseText) {
                        var templ = document.createElement("template");
                        templ.innerHTML = '<div>'+
                                            '<span>X</span>'+
                                            '<h2>' + title + '</h2>'+
                                            '<div>' + responseText + '</div>'+
                                          '</div>';
                        
                        this.box = document.createElement("div");                 
                        this.box.classList.add("modal");
                        document.body.appendChild(this.box);
                        this.box.appendChild(document.importNode(templ.content, true));
                        this.box.firstChild.firstChild.addEventListener("click", this.close);
                    });
                },
                "close" : function() {
                    document.body.removeChild(this.box);
                    this.box = null;
                },
                "load" : function(params, callback) {
                    var request = new XMLHttpRequest();
                    request.open("POST", this.url);
                    request.onreadystatechange = function(callback) {
                        if(this.readyState == 4)
                            callback(this.status, this.responseText);
                    }.bind(request, callback.bind(this));
                    request.send(params);
                }
            };
        </script>
    </head>
    <body>
        <h1>Modal de comunicacion entre paginas via AJAX</h1>
        <form id="datos-origen">
            <label>
                Un numero:
                <input type="text" name="numero" value="5">
            </label>
        </form>
        <button id="open">ABRIR MODAL</button>
 
        <script>
            document.getElementById("open").addEventListener("click", function(){
                var onemodal = new Modal("hijo.php");
                onemodal.open("Pagina hijo", new FormData(document.getElementById("datos-origen")));
            });
        </script>
    </body>
</html>
 

hijo.php

Código PHP:

Hola! Soy hijo.php, me mandaste el numero "<?=$_POST["numero"];?>", yo te devuelvo el doble, cuando cierres esta ventana lo vas a ver.
<script>
    document.getElementById("datos-origen").elements.numero.value = <?=($_POST["numero"]*2);?>;
</script>
 

Amigo muy bueno tu ejemplo, a principio me dio lata porque no recibia el valor pero no se porque razon de la forma en que aperturas o entras a php mi navegador no lo comprende.
tu no tienes <? ?>, yo lo cambie a <?php ?>.

[horusorion]

Iniciado por caricatos

Hola:



Para qué un incremento adicional de datos, siendo Ajax nativo (javascript) muy fácil de implementar...



¿Necesitas amigos...?



¿San google?, ¿bootstrap?, ¿wordpress?... para mí que San Google no leyó el mensaje original...

Saludos

Disculpa, se que ajax es nativo de javascript, pero hay metodos de jquery que te permiten utilizarlo y es menos complicado, segundo no necesito amigos, solo busco ayudar.
Creo que tienes un problema con las respuestas de las demas personas, no estamos aqui para creiticar si a los demas le hacen falta amigos o no, si no para ayudar, no lo crees?

[horusorion]

la forma en que aperturas o entras a php mi navegador no lo comprende.
tu no tienes <? ?>, yo lo cambie a <?php ?>.

para eso debes editar el archivo php.ini para que puedas introducir las etiquetas <? ?> en vez de <?php ?>.

[Papito18]

Iniciado por horusorion

para eso debes editar el archivo php.ini para que puedas introducir las etiquetas <? ?> en vez de <?php ?>.

excelente, gracias.

[Papito18]

Iniciado por NSD

padre.html

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Box Ventanas</title>
        <style>
            .modal {
                position: fixed;
                z-index: 9999;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.8);
            }
            .modal > div {
                width: 80%;
                height: 100vh;
                padding: 20px;
                margin: 0 auto;
                background-color: #FFF;
                box-shadow: 0 0 10px #000000;
            }
            .modal > div > h2 {
                margin:0;
                padding:0 0 10px 0px;
                border-bottom:1px #ccc solid;
                font-size:22px;
            }
            .modal > div > div{
                display:block;
                padding:10px 0 0 0px;
                font-size:18px;
                line-height:22px;
            }
            .modal > div > span {
                float:right;
                display:block;
                font-size:22px;
                color:#858585;
            }
        </style>
        <script>
            Modal = function(url) {
                this.open = this.open.bind(this);
                this.close = this.close.bind(this);
                this.load = this.load.bind(this);
 
                this.url = url;
                this.box = null;
            }
 
            Modal.prototype = {
                "open" : function(title, params) {
                    this.load(params, function(status, responseText) {
                        var templ = document.createElement("template");
                        templ.innerHTML = '<div>'+
                                            '<span>X</span>'+
                                            '<h2>' + title + '</h2>'+
                                            '<div>' + responseText + '</div>'+
                                          '</div>';
                        
                        this.box = document.createElement("div");                 
                        this.box.classList.add("modal");
                        document.body.appendChild(this.box);
                        this.box.appendChild(document.importNode(templ.content, true));
                        this.box.firstChild.firstChild.addEventListener("click", this.close);
                    });
                },
                "close" : function() {
                    document.body.removeChild(this.box);
                    this.box = null;
                },
                "load" : function(params, callback) {
                    var request = new XMLHttpRequest();
                    request.open("POST", this.url);
                    request.onreadystatechange = function(callback) {
                        if(this.readyState == 4)
                            callback(this.status, this.responseText);
                    }.bind(request, callback.bind(this));
                    request.send(params);
                }
            };
        </script>
    </head>
    <body>
        <h1>Modal de comunicacion entre paginas via AJAX</h1>
        <form id="datos-origen">
            <label>
                Un numero:
                <input type="text" name="numero" value="5">
            </label>
        </form>
        <button id="open">ABRIR MODAL</button>
 
        <script>
            document.getElementById("open").addEventListener("click", function(){
                var onemodal = new Modal("hijo.php");
                onemodal.open("Pagina hijo", new FormData(document.getElementById("datos-origen")));
            });
        </script>
    </body>
</html>
 

hijo.php

Código PHP:

Hola! Soy hijo.php, me mandaste el numero "<?=$_POST["numero"];?>", yo te devuelvo el doble, cuando cierres esta ventana lo vas a ver.
<script>
    document.getElementById("datos-origen").elements.numero.value = <?=($_POST["numero"]*2);?>;
</script>
 

amigo, veo que tus scrips están en la misma pagina del contenido, yo estoy trabajando con funciones de js, en un documentos aparte donde creo tosas mis funciones y cada vez que ocupo una función las llamo de forma individual, me gustaría que me ayudaras a como resumo en una sola función tu escript, ´porque veo que tu tienes mas de una función y que se asocia con modal, y donde llamaría esta función.

ya separe el stilo a mi hoja de estilos pero el script aun no lo logro, espero me ayudes...

[horusorion]

Iniciado por Papito18

excelente, gracias.

De nada... siempre a la orden de ayudar...