Nueva pregunta

Pregunta:

Fecha: 17-12-2015 05:08:37 (En Español)

¿Cómo usar el dialog de JQuery UI?[Resuelta]

Hoy quisiera compartir como usar el "dialog" de jquery ui , hare un ejemplo de como crear un dialog con sus respectivo botones agregar y cancelar , espero que le guste

adjunto codigo

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {

     $(document).on("click","#save",function(){

            $( "#frm" ).dialog({
                width : 500,
                height : 200,
                modal : true,
                show : "blind",
                hide : "slideUp",
                dragable : true,
                buttons:{
                  "guardar":function(){

                       // Aqui pondria el codigo para guardar//
                       alert("Hola Comunidad");

                   },"cancelar":function(){
                       $("#frm").dialog("close");
                    }
                 }
            });            
     })

  });
  </script>
</head>
<body>

<a href="javascript:void(0)" id="save">Abrir formulario</a>
 
<div id="frm" title="Registro" style="display:none">
     Ingrese Su nombre  : <input type="text" name="txtnombre" id="txtnombre" style="border:1px solid #000"/>
</div>
 
</body>
</html>


Saludos
Etiquetas: Aporte - HTML - Javascript - JQuery - JQuery UI - Plugin Votos: 4 - Respuestas: 11 - Vistas: 20 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 17-12-2015 09:57:57 Se te agradece tu buen aporte a la comunidad +1

    Dejo el ejemplo en ejecución online

    Aprovecho a decirles que si quieren probar codigos online o dejar un demo Onlien de algun ejercicio o ejemplo lo pueden hacer en https://jsfiddle.net

    Saludos
      Votos: 4 - Link respuesta
     
  • Fecha: 17-12-2015 10:13:23 De nada walter y gracias por tomarte la molestias de poner el codigo online , saludo +1   Votos: 5 - Link respuesta
     
  • Fecha: 17-12-2015 13:07:23 De nada para eso estamos para ayudarnos
    Saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 17-12-2015 15:33:24 Ok esto tiene algunos detalles ya que hay que hacer la asociación de los botones del modal con los del formulario, es fácil, aquí les dejo el código, que uso para subir archivos al servidor, la verdad me da mucha hueva subirlo a jsfiddle, espero te sirva...

    Saludos


    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
    </head>
    <body>
    
    
    <a href="#">Upload Files</a>
    
    
    <div id="uploadImg" title="Upload Image">
        <form id="myForm" action="javascript:;" method="Post" enctype="multipart/form-data">
    
            <input type="file" name="image[]" size="20"/>
            <input type="text" name="sku" value="" size="20"/>
    
            <input type="submit" value="Submit">
        </form>
    </div>
    
    <div id="mydialog"></div>
    
    <div id="success" title="Success">
        <p>File successfully uploaded</p>
    </div>
    
    <div id="error" title="Error">
        <p>Something went wrong when saving the file</p>
    </div>
    
    
    <script>
    
    $(function () {
            var success = $("#success").dialog({autoOpen: false});
            var error = $("#error").dialog({autoOpen: false});
            var myDialog = $("#uploadImg").dialog({
                autoOpen: false,
                height: 430,
                width: 390,
                modal: true,
                open: function () {
                    var sku = $(this).data('sku');
                    $(this).find("[type=submit]").hide();
                    $(this).find("form")[0].reset();
                    $(this).find("[name=sku]").val(sku).hide();
    
                },
                buttons: [
                    {
                        text: "Submit",
                        click: $.noop,
                        type: "submit",
                        form: "myForm" //Aqui esta la asociacion con el boton del formulario
                    },
    
                    {
                        text: "Close",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
    
                ],
                close: function () {
                    $('#grid').trigger("reloadGrid");
                }
            });
    
            myDialog.find("form").on("submit", function (event) {
                event.preventDefault();
                var sku = $(this).find("[name=sku]").val();
    
                var formData = $(this).serializefiles();
    
                $.ajax({
                    type: "POST",
                    url: 'uploadImages',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
    
                    success: function (data, sku) {
                        if (data == 1) {
                            success.dialog("open");
                            myDialog.dialog('close');
                        } else {
                            error.dialog("open");
                        }
    
                    },
                });
            });
    
    
            $("a").click(function () {
                myDialog.dialog('open');
            });
    
        });
    
    
        </script>
    </body>
    </html>
    
    
      Votos: 3 - Link respuesta
     
  • Fecha: 18-12-2015 07:59:46 Hola faustino acabo de probar tu codigo y no funciona
    me sale un error en esta linea
    var formData = $(this).serializefiles();


    estoy analizando el codigo que compartiste y veo esta linea que atrapas al input con name "sku"

    myDialog.find("form").on("submit", function (event) {
     var sku = $(this).find("[name=sku]").val();
     var formData = $(this).serializefiles();
    
     aqui haces el $.ajax
    
    });
    


    no se el porque atrapas si cuando abre tu dialog lo ocultas y ademas lo asignas un valor , un valor que siempre va hacer vacio

    y eso se ve claramente aqui


                open: function () {
                    var sku = $(this).data('sku');
                    $(this).find("[name=sku]").val(sku).hide();
                }
    



    en toda la parte del codigo por ningun lado asignas , solo al momento de abrir el dialog

    a mi parecer esta de mas esa linea de que atrapes , si siempre va hacer vacio , quizas se te paso compartir todo el codigo , si es asi seria bueno que compartas

    pd : serializefiles() existe , he visto el serialize no el serializefiles quizas me estoy equivocando y si existe , seria bueno que compartas link de referencia de serializefiles si no es de mucha molestias



    saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 18-12-2015 10:08:11 Ese ejemplo es solo la muestra de como se relacionan los botones del modal con el formulario, y como se haría un jquery ajax para enviar los valores a php, obvio es solo la parte front-end faltaria el back-end, ademas del directorio para subir archivos, con los permisos necesarios y modificar el php.ini para determinar el tamaño que de archivo que quieres subir...

    Si necesitas ayuda con eso no hay problema para comentarlo..

    Saludos
      Votos: 3 - Link respuesta
     
  • Fecha: 18-12-2015 10:44:17 Ya se que solo es de muestra pero procura compartir algo funcionable puedes confundir a los.miembros mostrando código que no existe como el serializefiles no se si me equivoco pero hasta el.momento nunca he visto eso y si existe, si me puedes compartir enlace de referencia , si he visto el serialize, por mi.parte cada post que tiene que ver con aporte lo hago con ejemplo y código funcional, saludos   Votos: 2 - Link respuesta
     
  • Fecha: 18-12-2015 13:31:26 El codigo es extremadamente simple hasta para un diseñador web novato, creo que si no lo entiendes tienes que esforzarte mucho, si es que quieres prosperar en este mundo de los front- end, ya que esto ni siquiera podría considerarse trabajo de programación..
    Y bueno pues, lo que cualquiera de este foro pueda decir no se compara nada con leer la documentación oficial, que por supuesto esta en ingles y ahí si no podría nadie ayudarte..
      Votos: 2 - Link respuesta
     
  • Fecha: 18-12-2015 14:03:01 Para tu conocimiento soy front y Back y sobre esforzarme ya lo hice y por eso comparto código q te aseguro q no conoces , filtra todos los aporte que hice y veras   Votos: 2 - Link respuesta
     
  • Fecha: 18-12-2015 19:55:34 Hola Faustino,
    En eta ocasión concuerdo con Juan, en mi poca esperiencia y mis nuevos conocimientos y ps he buscado lo que dices de serializefiles y no encuentro ni una sola dicumentacion al respecto en ningún idioma solo lo que es el Serialize type files que uno le da a lo que es la consulta o él script.
    Uno tiene que dar codigo 100% funcional un que sea corto de ejemplo ya que hay muchas personas de la comunidad nuevas que no conocen mucho este campo y pueden usar tu ejemplo como guía y al ver este error se confunden y se preguntan qué pasó si es un código que otro que se supone que sabe del tema y no funciona ps desconfiaran de el ala próxima porque no les funcionó la última vez.

    Así que te pido que hagas el favor de arreglar este pequeño fallo para nuestros amigos de la comunidad.

    Salu2 de su amigo ElCapa8

    PD: Espero no lo tomes personal
      Votos: 2 - Link respuesta
     
  • Fecha: 14-01-2016 07:06:04 Lo siento tiene rato que no me conecto por aquí, no había visto estas respuestas, ahí les adjunto el código que faltaba.

    La función serializefiles es la que genera el la data que se envía a través de ajax, generando los parciales de los archivos que se ingresan en el form..

    Espero les funcione...

    Ahí va todo el código de nuevo...

    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
    </head>
    <body>
    
    
    <a href="#">Upload Files</a>
    
    
    <div id="uploadImg" title="Upload Image">
        <form id="myForm" action="javascript:;" method="Post" enctype="multipart/form-data">
    
            <input type="file" name="image[]" size="20"/>
            <input type="text" name="sku" value="" size="20"/>
    
            <input type="submit" value="Submit">
        </form>
    </div>
    
    <div id="mydialog"></div>
    
    <div id="success" title="Success">
        <p>File successfully uploaded</p>
    </div>
    
    <div id="error" title="Error">
        <p>Something went wrong when saving the file</p>
    </div>
    
    
    <script>
    
    $(function () {
            var success = $("#success").dialog({autoOpen: false});
            var error = $("#error").dialog({autoOpen: false});
            var myDialog = $("#uploadImg").dialog({
                autoOpen: false,
                height: 430,
                width: 390,
                modal: true,
                open: function () {
                    var sku = $(this).data('sku');
                    $(this).find("[type=submit]").hide();
                    $(this).find("form")[0].reset();
                    $(this).find("[name=sku]").val(sku).hide();
    
                },
                buttons: [
                    {
                        text: "Submit",
                        click: $.noop,
                        type: "submit",
                        form: "myForm" //Aqui esta la asociacion con el boton del formulario
                    },
    
                    {
                        text: "Close",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
    
                ],
                close: function () {
                    $('#grid').trigger("reloadGrid");
                }
            });
    
            myDialog.find("form").on("submit", function (event) {
                event.preventDefault();
                var sku = $(this).find("[name=sku]").val();
    
                var formData = $(this).serializefiles();  //Checar al final del documento...
    
                $.ajax({
                    type: "POST",
                    url: 'uploadImages',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
    
                    success: function (data, sku) {
                        if (data == 1) {
                            success.dialog("open");
                            myDialog.dialog('close');
                        } else {
                            error.dialog("open");
                        }
    
                    },
                });
            });
    
    
            $("a").click(function () {
                myDialog.dialog('open');
            });
    
        });
    
    
    (function($) {
      $.fn.serializefiles = function() {
          var obj = $(this);
          var formData = new FormData();
          $.each($(obj).find("input[type='file']"), function(i, tag) {
              $.each($(tag)[0].files, function(i, file) {
                  formData.append(tag.name, file);
              });
          });
          var params = $(obj).serializeArray();
          $.each(params, function (i, val) {
              formData.append(val.name, val.value);
          });
          return formData;
      };
    })(jQuery);
    
    
        </script>
    </body>
    </html>
    
    
      Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com