1

Estoy tratando de mostrar una ventana modal al dar enter sobre un textbox, tenía el siguiente código para hacerlo pero no me funciona:

$("#txt_codigoCat").on("keydown", function (event) {
    if (event.which == 13) {
        $('#popupBusquedaCliente').modal('show');
    }           
});

Agrego el código que uso para la ventana modal:

     <!-- Modal Escenario-->
<div class="modal fade" id="popupBusquedaCliente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
        <h4 class="modal-title" id="myModalLabel">Busqueda de Familia</h4>
      </div>
      <div id="BusquedaCliente" class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="stock_bodega">Busqueda por:</label>
            <select class="form-control" style="width: 40%" id="stock_bodega">
              <option>C&oacute;digo</option>
              <option>Nombre</option>
              <option>Estado</option>
            </select>
            <label for="texto_buscar">Texto a Buscar:</label>
            <input type="text" class="form-control" id="texto_buscar" autocomplete="off" style="text-transform: uppercase">
          </div>

          <div style="position: relative; overflow: auto; width: 100%; height: 200px;" class="dataTables_scrollBody">
            <table style="width: 100%;" id="busqueda_cliente" class="display nowrap dataTable no-footer" cellspacing="0" width="100">
              <thead>
                <tr>
                  <th>Codigo</th>
                  <th>Nombre</th>
                  <th>Estado</th>
                  <th>Categoria</th>
                  <th>CatNombre</th>
                </tr>
              </thead>

            </table>
          </div>
        </form>
      </div>
      @* Load datatable css *@
      <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" /> @* Load datatable js *@ @section Scripts{
      <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
      <script>
        $(document).ready(function() {
          $('#busqueda_cliente').DataTable({
            "bSort": false,
            "ajax": {
              "url": '@Url.Action("Todos", "venmanfamilia")',
              "type": "GET",
              "datatype": "json"
            },
            "columns": [{
              "data": "Codigo"
            }, {
              "data": "Nombre"
            }, {
              "data": "Estado"
            }, {
              "data": "Categoria"
            }, {
              "data": "CatNombre"
            }],
            filter: false,
            "paging": false,
            "ordering": false,
            "info": false,
            language: {
              paginate: {
                first: "Primero",
                previous: "Anterior",
                next: "Siguiente",
                last: "Ultimo"
              }
            }
          });
        });

      </script>
      }
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Seleccionar</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Escenario-->
9
  • 1
    Podrías pulsar f12 y fijarte que error tira en consola por favor? Es muy probable que haya errores en los selectores
    – Genarito
    el 19 dic. 2016 a las 15:05
  • TypeError: $(...).modal is not a function, ese mensaje sale al dar enter. el 19 dic. 2016 a las 15:07
  • 1
    @RicardoEspaña debe ser porque Jquery y/o la librería que intentas usar para tu ventana modal no está cargada en la página, te sugiero actualizar tu pregunta proporcionando mas código: ¿qué usas para tu ventana modal? el 19 dic. 2016 a las 15:11
  • ya añadi el codigo de la ventana modal el 19 dic. 2016 a las 15:15
  • 1
    Sí,como dice @MarcosGallardo algo te debe faltar, a mi me funciona, ejemplo: jsfiddle.net/blonfu/uanmy21t/1
    – user7176
    el 19 dic. 2016 a las 15:26

1 respuesta 1

1

Si tu código no funciona puede ser que sea problema de los archivos .js que estés utilizando o el orden como agregas las referencias. Para que tu código funcione, solo necesitas estas tres referencias:

  1. Jquery
  2. Bootstrap (js)
  3. Bootstrap (css)

Prueba con estas referencias:

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

Es importante que sigas el orden, primero debes poner jquery.min.js y despues bootstrap.min.js, ya que boostrap depende de jquery.

Otra cosa que debes validar es remover cualquier otra referencia a archivos .js que tengas en tu código, porque pueden estar causando conflictos.

Puedes descargar los archivos localmente y ponerlos en tu proyecto:

Bootstrap(css)

Jquery

Bootstrap(js)

Por último anexo el ejemplo para que lo puedas validar, saludos.

$("#txt_codigoCat").on("keydown", function (event) {
    if (event.which == 13) {
        $('#popupBusquedaCliente').modal('show');
    }           
});
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<input type="text" id="txt_codigoCat"/>
<!-- Modal Escenario-->
<div class="modal fade" id="popupBusquedaCliente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
        <h4 class="modal-title" id="myModalLabel">Busqueda de Familia</h4>
      </div>
      <div id="BusquedaCliente" class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="stock_bodega">Busqueda por:</label>
            <select class="form-control" style="width: 40%" id="stock_bodega">
              <option>C&oacute;digo</option>
              <option>Nombre</option>
              <option>Estado</option>
            </select>
            <label for="texto_buscar">Texto a Buscar:</label>
            <input type="text" class="form-control" id="texto_buscar" autocomplete="off" style="text-transform: uppercase">
          </div>

          <div style="position: relative; overflow: auto; width: 100%; height: 200px;" class="dataTables_scrollBody">
            <table style="width: 100%;" id="busqueda_cliente" class="display nowrap dataTable no-footer" cellspacing="0" width="100">
              <thead>
                <tr>
                  <th>Codigo</th>
                  <th>Nombre</th>
                  <th>Estado</th>
                  <th>Categoria</th>
                  <th>CatNombre</th>
                </tr>
              </thead>

            </table>
          </div>
        </form>
      </div>
      @* Load datatable css *@
      <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" /> @* Load datatable js *@ @section Scripts{
      <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
      <script>
        $(document).ready(function() {
          $('#busqueda_cliente').DataTable({
            "bSort": false,
            "ajax": {
              "url": '@Url.Action("Todos", "venmanfamilia")',
              "type": "GET",
              "datatype": "json"
            },
            "columns": [{
              "data": "Codigo"
            }, {
              "data": "Nombre"
            }, {
              "data": "Estado"
            }, {
              "data": "Categoria"
            }, {
              "data": "CatNombre"
            }],
            filter: false,
            "paging": false,
            "ordering": false,
            "info": false,
            language: {
              paginate: {
                first: "Primero",
                previous: "Anterior",
                next: "Siguiente",
                last: "Ultimo"
              }
            }
          });
        });

      </script>
      }
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Seleccionar</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Escenario-->

1
  • 1
    muchas gracias por la ayuda. el 19 dic. 2016 a las 19:09

Tu Respuesta

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

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