none
no puedo ver un dialog box jquery

    Pregunta

  • hola chicos, estoy haciendo una pagina de eliminación, en primer lugar me realiza una confirmación de eliminación y lo que yo quiero mostrar es un mensaje de operación exitosa después de la eliminación solo logro mostrar un alert pero cuando quiero mostrar el doalog box solo me muestra el texto que debe llevar la ventana de dialogo(la ventana no me muestra)

    <script>

    /*Este función es la que crea la ventana de operación exitosa*/ $(function() { $( "#datos1" ).dialog({ modal: true, draggable: false, resizable: false, width: 435, height: 200, open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); }, buttons: { Ok: function() { $( this ).dialog( top.location.href = ''); } } }); }); </script> <script> $(document).on('click', '#btnConfirmar', function (e) { e.preventDefault(); var valor=document.form1.usu.value; if ( confirm('Are you sure to delete this data???') ){ $.ajax({ type: 'POST', data: { valor: valor }, url: 'example_e.php', success: function (data) { if ( +data == 1) {

    /*

    Esta es la línea de la ventana que no me muestra, solo aparece el texto

    si coloco lo que esta entre comillas dentro del body si hace el dialog box pero

    cuando lo coloco aquí solo me muestra el texto.

    */ document.getElementById('datos').innerHTML="<div id='datos1' title='Operacion Exitosa'><p><span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span> Usuario exitosamente eliminado!</p></div>"; } else { alert('Failed Delete Data'); } } }); } }); </script>


    en el body de mi pagina tengo un combo, el cual se selecciona una opción y mando el registro seleccionado a la función Ajax para ser procesado, asi mismo fuera del form tengo un div llamado datos donde se hace referencia cuando el Ajax devuelve si de realizo la consulta (document.getElementById('datos').innerHTML)

    ivxn25


    • Editado Ivxn25 sábado, 5 de septiembre de 2015 2:33 + detalles
    sábado, 5 de septiembre de 2015 2:22

Respuestas

  • Hola, puedes hacer esto:

    Incluye tu codigo de la generacion del dialogo dentro de una funcion, digamos:

    <script>
    /*Este función es la que crea la ventana de operación exitosa*/
    $(function() {
       function createDialog(){
        $( "#datos1" ).dialog({
            modal: true,
            draggable: false,
            resizable: false,
            width: 435,
            height: 200,
          open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); },
          buttons: {
            Ok: function() {
              $( this ).dialog( top.location.href = '');
            }
          }
        });
       }
      });
    </script>

    Y después sólo hay que llamarlo al insertar tu codigo:

    <script>
    $(document).on('click', '#btnConfirmar', function (e) {
      e.preventDefault();
       var valor=document.form1.usu.value;
    
      if ( confirm('Are you sure to delete this data???') ){
        $.ajax({
            type: 'POST', 
            data: {
                valor: valor
            },
            url: 'example_e.php',
            success: function (data) {
    
                if ( +data == 1) {
    /*
    Esta es la línea de la ventana que no me muestra, solo aparece el texto
    si coloco lo que esta entre comillas dentro del body si hace el dialog box pero
    cuando lo coloco aquí solo me muestra el texto.
    */
                document.getElementById('datos').innerHTML="<div id='datos1' title='Operacion Exitosa'><p><span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span> Usuario exitosamente eliminado!</p></div>";
                
                createDialog();
                    
                } else {
                    alert('Failed Delete Data');
                }
    
            }
        });
      }
    });
    </script>

    Con eso debería funcionar.

    Saludos.

    • Marcado como respuesta Ivxn25 lunes, 7 de septiembre de 2015 16:51
    lunes, 7 de septiembre de 2015 13:11

Todas las respuestas

  • hola

    es que el div que defines dinamicamente cuando usas

     document.getElementById('datos').innerHTML="<div id='datos1'

    deberias definirlo fijo en el html, cuando aplique el

    $( "#datos1" ).dialog({

    esto ocultara el div y solo lo mostrara cuando realice el "open" del dialogo

    Dialog box hide() and show() — Jquery?

    o sea la configuracion es fija tu solo defines cuando hacer el open

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 7 de septiembre de 2015 12:40
  • Hola, puedes hacer esto:

    Incluye tu codigo de la generacion del dialogo dentro de una funcion, digamos:

    <script>
    /*Este función es la que crea la ventana de operación exitosa*/
    $(function() {
       function createDialog(){
        $( "#datos1" ).dialog({
            modal: true,
            draggable: false,
            resizable: false,
            width: 435,
            height: 200,
          open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); },
          buttons: {
            Ok: function() {
              $( this ).dialog( top.location.href = '');
            }
          }
        });
       }
      });
    </script>

    Y después sólo hay que llamarlo al insertar tu codigo:

    <script>
    $(document).on('click', '#btnConfirmar', function (e) {
      e.preventDefault();
       var valor=document.form1.usu.value;
    
      if ( confirm('Are you sure to delete this data???') ){
        $.ajax({
            type: 'POST', 
            data: {
                valor: valor
            },
            url: 'example_e.php',
            success: function (data) {
    
                if ( +data == 1) {
    /*
    Esta es la línea de la ventana que no me muestra, solo aparece el texto
    si coloco lo que esta entre comillas dentro del body si hace el dialog box pero
    cuando lo coloco aquí solo me muestra el texto.
    */
                document.getElementById('datos').innerHTML="<div id='datos1' title='Operacion Exitosa'><p><span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span> Usuario exitosamente eliminado!</p></div>";
                
                createDialog();
                    
                } else {
                    alert('Failed Delete Data');
                }
    
            }
        });
      }
    });
    </script>

    Con eso debería funcionar.

    Saludos.

    • Marcado como respuesta Ivxn25 lunes, 7 de septiembre de 2015 16:51
    lunes, 7 de septiembre de 2015 13:11