Pasar parametros de form a ventana modal

[JavierMMM]

Hola a todos, estoy algo enredado con las ventanas modales de jquery. Lo que necesito es de un formulario en asp, pasar los valores de este a una ventana modal que será de confirmación, lo he intentado de la siguiente manera con nulos resultados:

Código Javascript:

$( "#create-user" )
.button()
.click(function() {
    $.ajax({
type: "POST",
url: "confirmacion.asp",
data: "dato",
success: "null",
dataType: "html"
});
$( "#dialog-form" ).dialog( "open" );
});
 

Código HTML:

<button id="create-user">Crear nuevo usuario</button>
 

pero hasta ahora nada.

He estado intentando otras opciones por ejemplo

Código Javascript:

$dialog_contenedor.html
 

pero sin obtener nada hasta ahora.

Quiero saber si me pueden orientar de cómo puedo hacerlo de la manera correcta.

De antemano gracias.

[fhederico]

Hola,

Los cuadros de dialogo son HTML, es decir, el carga lo que exista en a el DIV "$( "#dialog-form" )".

Por ejemplo, si quiero que al cargar me muestre un textarea, simplemente pongo asi

Código:

$("#dialog-modal").html('<textarea id="textareaDialog">Holaaaa soy un textarea</textarea>');

Me explico? solo debes modificar el contenido HTML que tenga este DIV y cuando le envies la orden "open" el te mostrara lo que exista en dicho div


Obviamente debes tener este div creado

Código:

<div id="dialog-modal" title=""></div>

Saludos

[JavierMMM]

Muchas gracias por responder. Lo que necesito es que se habrá en una ventama modal y los datos que tengo en mi formulario que está en index.asp se reflejen en esa modal.

Mi problema es que no se cómo enviar los datos a mi modal.

Saludos.

[fhederico]

Bueno, asumamos que no tienes nada, asi que lo haremos de cero

Cargamos los Script

Código:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src='js/jquery-ui-1.10.3.custom.min.js'></script>

Y el CSS del Modal

Código:

<link href='css/jquery-ui.css' type="text/css" rel="stylesheet" />

Necesitaremos al menos un DIV en nuestro html para el contenido

Código:

<div id="dialog-modal" title=""></div>

Ahora en nuestro codigo, llamamos el modal

Código:

<script type="text/javascript">

//Lo declaramos como una variable global, para que pueda cerrarse desde cualquier funcion
var cuadroDialog = "";

//Inicializamos el modal
$(document).ready(function()
{
                    cuadroDialog = $("#dialog-modal").dialog({
                        autoOpen: false,
                        width: 450,
                        height: 280,
                        modal: true
                    });

     //Asumimos que tenemos una funcion con la cual cargaremos los datos
    function hola()
    {
          //Cargamos los datos via ajax, asumiendo que retorna un html
          $.ajax(
          {
                 type: "POST",
                 url: url, //URL a llamar
                 //data: parametros, //Si necesitamos pasarle algun parametro
                 success: function(data, textStatus, XMLHttpRequest)
                {
                 
                    //Podemos ponerle un titulo diferente si lo deseamos
                    $(".ui-dialog-title").text("soy una tellible ventana modal :D");
  
                   //Cargamos los datos retornados limpiando los espacios en blanco
                    $("#dialog-modal").html(data.trim());

                   //Personalizamos los botones a mostrar
                      cuadroDialog.dialog({
                        buttons: {
                            "soy un boton": function() {
                                alert("si, soy un boton o puedo ser una funcion, tu decides");
                            },
                            "cerrar": function() {
                                cerrar();
                            }
                        }
                    });    
                    
                    //abrimos la ventana
                    cuadroDialog.dialog('open');

                 },
                 error:  function(data, textStatus, XMLHttpRequest)
                {
                      alert("nooo, tenemos un error "+textStatus);
                }
           }); 
      }

      //cerramos ventana
           function cerrar()
                {
                    //Limpiamos el DIV por si alguien mas lo necesita ocupar
                    $("#dialog-modal").html('');
                    $(".ui-dialog-title").text('');
                     //cerrar
                    cuadroDialog.dialog('close');
                }
});
</script>

Saludos