1

Buen día compañeros estoy en un problema con jQuery, estoy realizando un sistema con una ventana modal, lo que pasa es que no me cierra. Este es el código:

    $(document).ready(function(){
    $('#frmPaciente').dialog({
       autoOpen:false,
       heigth:310,
       width:400,
       modal:true,
       buttons:[{
            text: "Crear",
            click: function(){
                alert("crear");
            }
       },
       {
           text: "Cerrar",
           click: function(){
               $(this).dialog('close')
           }
       }]
    });
});

El primer botón crear lo hice con un alert para verificar si funcionan los botones, por eso identifico que el problema es:

El $(this).dialog('close') no me funciona, y por otro lado la ventana no me sale centrada.

ejecucion de la aplicacion

Muchas gracias de antemano por su ayuda.

aquí el código html:

<html>
    <head>
        <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
        <title>Sistema Gestion Odontologica</title>
        <link href="Vista/css/estilos.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="Vista/jquery/jquery-3.3.1.min.js"></script> 
        <script type="text/javascript" src="Vista/js/script.js"></script>
        <!--Archivos Necesarios para el dialog-->
        <link type="text/css" href="Vista/jquery/dialog/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet">
        <script src="Vista/jquery/dialog/jquery-ui-1.12.1.custom/jquery-ui.js" type="text/javascript"></script>
        <!--fin de archivos necesarios para el dialog-->
    </head>
    <body>
        <div id="contenedor">    
            <div id="encabezado">
                <img src="Vista/imagenes/odontologia.png" width="100%" height="150px" >
            </div>
            <ul id="menu">
                <li><a href="index.php">Inicio</a></li>
                <li class="activa"><a href="index.php?accion=asignar">Asignar Cita</a></li>
                <li><a href="index.php?accion=consultar">Consultar Cita</a></li>
                <li><a href="index.php?accion=cancelar">Cancelar Cita</a></li>
            </ul>
            <div id="contenido">
                <h2 style="width:100%">Asignar Cita</h2>
                <form id="frmAsignar" method="POST" action="index.php?accion=guardarCita">
                    <table>
                        <tr>
                            <td>Documento del Paciente</td>
                            <td><input type="text" name="asignarDocumento" id="asignarDocumento"></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                            <input type="button" name="asignarConsultar" value="Consultar" id="asignarConsultar" onclick="consultarPaciente()">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><div id="paciente"></div></td>
                        </tr>
                        <tr>
                            <td>Medico: </td>
                            <td>
                                <select id="medico" name="medico">
                                    <option value="-1" selected="selected">---Seleccione el Medico---</option>
                                    <option value="12345">12345 Camilo Robledo</option>
                                    <option value="67890">67890 Esteban Salgado</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Fecha: </td>
                            <td><input type="text" name="fecha" id="fecha"></td>
                        </tr>
                        <tr>
                            <td>Hora: </td>
                            <td>
                                <select id="hora" name="hora">
                                    <option value="-1" selected="selected">---Seleccione la hora---</option>
                                    <option>8:00:00</option>
                                    <option>8:20:00</option>
                                    <option>8:40:00</option>
                                    <option>9:00:00</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Consultorio: </td>
                            <td>
                                <select id="consultorio" name="consultorio">
                                    <option value="-1" selected="selected">---Seleccione el Consultorio---</option>
                                    <option value="1">1 Consultas1</option>
                                    <option value="2">2 Tratamientos2</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="submit" name="asignarEnviar" value="Enviar" id="asignarEnviar">
                            </td>
                        </tr>
                    </table>
                </form>    
            </div>    
        </div>
        <!-- ventana modal-->
        <div id="frmPaciente" title="Agregar Nuevo Paciente">
            <form id="agregarPaciente">
                <table>
                    <tr>
                        <td>Documento</td>
                        <td><input type="text" name="pacDocumento" id="pacDocumento" readonly="readonly"></td>
                    </tr>
                    <tr>
                        <td>Nombres</td>
                        <td><input type="text" name="pacNombres" id="pacNombres"></td>
                    </tr>
                    <tr>
                        <td>Apellidos</td>
                        <td><input type="text" name="pacApellidos" id="pacApellidos"></td>
                    </tr>
                    <tr>
                        <td>Fecha de Nacimiento</td>
                        <td><input type="text" name="pacNacimiento" id="pacNacimiento"></td>
                    </tr>
                    <tr>
                        <td>Sexo</td>
                        <td>
                            <select id="pacSexo" name="pacSexo">
                                <option value="-1" selected="selected"><---Seleccione Sexo---></option>
                                <option>m</option>
                                <option>f</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

Así esta funcionando ahora:

aparece en la esquina inferior izquierda y sin los botones

agrego la imagen de las extensiones:

bibliotecas

3
  • Intenta con #frmPaciente en lugar de this
    – alanfcm
    Commented el 28 nov. 2018 a las 19:32
  • No funciona cambiando el identificador Commented el 28 nov. 2018 a las 19:33
  • 1
    pon tu codigo html
    – andy gibbs
    Commented el 28 nov. 2018 a las 19:47

2 respuestas 2

3

Probando tu código en un fiddle, y viendo la documentación de Jquery UI, creo que tu problema es la versión de JQuery UI que estas utilizando, noté que estas usando la 1.9.2, y probé con esa versión y efectivamente no cierra la ventana, pero probando con la versión mas nueva 1.12.1, centra el dialog y ademas cierra la ventana con el botón.

Aquí un ejemplo:

$(document).ready(function(){
    $('#frmPaciente').dialog({
       autoOpen:false,
       heigth:310,
       width:400,
       modal:true,
       buttons:[{
            text: "Crear",
            click: function(){
                alert("crear");
            }
       },
       {
           text: "Cerrar",
           click: function(){
               $(this).dialog('close')
           }
       }]
    });
      $( "#create-user" ).button().on( "click", function() {
      $('#frmPaciente').dialog( "open" );
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
        <title>Sistema Gestion Odontologica</title>
          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!--terminacion de archivos necesarios para el dialog-->
    </head>
    <body>
        <div id="contenedor">
            <div id="encabezado">
                <img src="Vista/imagenes/odontologia.png" width="100%" height="150px" >
            </div>
            <ul id="menu">
                <li><a href="index.php">Inicio</a></li>
                <li class="activa"><a href="index.php?accion=asignar">Asignar Cita</a></li>
                <li><a href="index.php?accion=consultar">Consultar Cita</a></li>
                <li><a href="index.php?accion=cancelar">Cancelar Cita</a></li>
            </ul>
            <div id="contenido">
                <h2 style="width:100%">Asignar Cita</h2>
                <form id="frmAsignar" method="POST" action="index.php?accion=guardarCita">
                    <table>
                        <tr>
                            <td>Documento del Paciente</td>
                            <td><input type="text" name="asignarDocumento" id="asignarDocumento"></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                            <input type="button" name="asignarConsultar" value="Consultar" id="asignarConsultar" onclick="consultarPaciente()">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><div id="paciente"></div></td>
                        </tr>
                        <tr>
                            <td>Medico: </td>
                            <td>
                                <select id="medico" name="medico">
                                    <option value="-1" selected="selected">---Seleccione el Medico---</option>
                                    <option value="12345">12345 Camilo Robledo</option>
                                    <option value="67890">67890 Esteban Salgado</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Fecha: </td>
                            <td><input type="text" name="fecha" id="fecha"></td>
                        </tr>
                        <tr>
                            <td>Hora: </td>
                            <td>
                                <select id="hora" name="hora">
                                    <option value="-1" selected="selected">---Seleccione la hora---</option>
                                    <option>8:00:00</option>
                                    <option>8:20:00</option>
                                    <option>8:40:00</option>
                                    <option>9:00:00</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Consultorio: </td>
                            <td>
                                <select id="consultorio" name="consultorio">
                                    <option value="-1" selected="selected">---Seleccione el Consultorio---</option>
                                    <option value="1">1 Consultas1</option>
                                    <option value="2">2 Tratamientos2</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="submit" name="asignarEnviar" value="Enviar" id="asignarEnviar">
                            </td>
                        </tr>
                    </table>
                </form>    
            </div>    
        </div>
        <!-- ventana modal-->
        <div id="frmPaciente" title="Agregar Nuevo Paciente">
            <form id="agregarPaciente">
                <table>
                    <tr>
                        <td>Documento</td>
                        <td><input type="text" name="pacDocumento" id="pacDocumento" readonly="readonly"></td>
                    </tr>
                    <tr>
                        <td>Nombres</td>
                        <td><input type="text" name="pacNombres" id="pacNombres"></td>
                    </tr>
                    <tr>
                        <td>Apellidos</td>
                        <td><input type="text" name="pacApellidos" id="pacApellidos"></td>
                    </tr>
                    <tr>
                        <td>Fecha de Nacimiento</td>
                        <td><input type="text" name="pacNacimiento" id="pacNacimiento"></td>
                    </tr>
                    <tr>
                        <td>Sexo</td>
                        <td>
                            <select id="pacSexo" name="pacSexo">
                                <option value="-1" selected="selected"><---Seleccione Sexo---></option>
                                <option>m</option>
                                <option>f</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>
<button id="create-user">Create new user</button>

Me tomé la libertad de agregar el llamado del dialog en el boton create-user

Espero y te sirva, Saludos.

8
  • efectivamente estoy usando una version de jQuery antigua, para crear estos modales solo tengo que vincular solo esos dos scripts? Commented el 28 nov. 2018 a las 20:12
  • 1
    Si, esos scripts son los cdn de jquery y de jquery ui, para poder utilizarlos necesitas esos ademas tmb puedes agregar sus estilos. Puedes tomarlos del sitio oficial de jquery UI Commented el 28 nov. 2018 a las 20:27
  • Muchas gracias fue correcta tu respuesta. Commented el 28 nov. 2018 a las 21:04
  • 1
    Me alegra haberte ayudado, un saludo. Commented el 28 nov. 2018 a las 22:20
  • 1
    No entiendo, cuales estilos?, el estilos.css? y como te sale ahora? es que estoy a ciegas. Commented el 28 nov. 2018 a las 23:17
0

Si no me equivoco cuando haces $(this) solo esta obteniendo una referencia al boton cerrar, no al modal.

Intenta con:

$(this).closest('.ui-dialog-content').dialog('close');

Dejo el codigo, solo modifique el click del boton cerrar.

$(document).ready(function() {
    $('#frmPaciente').dialog({
        autoOpen: false,
        heigth: 310,
        width: 400,
        modal: true,
        buttons: [{
                text: "Crear",
                click: function() {
                    alert("crear");
                }
            },
            {
                text: "Cerrar",
                click: function() {
                    $(this).closest('.ui-dialog-content').dialog('close');

                    //$(this).closest('#frmPaciente').dialog('close');

                    //$('#frmPaciente').dialog('close');
                }
            }
        ]
    });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.