jquery bootstrap TypeError: $(…) is null

Que título mas raro para un post. Pues bien, detrás de él hay uno de los problemas que nos podemos encontrar al trabajar con jQuery y Bootstrap a la vez.

Pongo un ejemplo que me pasó para que lo entendáis mejor:

Objetivo:
hacer una ventana modal con bootstrap y que se abra automáticamente.
El código de la ventana modal en bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Modal -->
<div id="cpModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Código que me daba problemas

1
$('#cpModal').modal('show');

Este código muestra la ventana modal sin necesidad de botones

Problema
No se mostraba la ventana y en la consola del navegador salía el error TypeError: $(…) is null refiriéndose a la llamada anteriro: $(‘#cpModal’).modal(‘show’);

Qué está pasando?
Pues que tanto Bootstrap como JQuery se apropian de $(”) y crea conflicto en algunos casos.

Solución
En jQuery cambiamos el $(“#identidad”) por jQuery(“#identidad”)
Ejemplo:
Pasamos del $(‘#cpModal’).modal(‘show’);
Al jQuery(“#cpModal”).modal(‘show’);

No habrá conflicto, y podremos trabajar sin problemas

Artículos relacionados

jQuery – Crear botón imágenes que cambian Veamos el código necesario para crear un enlace en forma de imagen, que al pasar el botón por encima (hover) cambia a otra imagen. Un ejemplo sería te...
jQuery – Conseguir el valor href de un enlac... Para conseguir el valor de href en un enlace con jQuery utilizaremos el siguiente código: $(document).ready(function() { $("a").click(function...
jQuery – Capturar valor de desplegable y esc... Estrenando nuestro perfil de CodePen.io, vamos a ver un ejemplo en jQuery que trabaja con desplegables (selects) y cajas de texto en formularios. En m...
JQuery – Trigger – Como ejecutar un cl... En muchos ocasiones nos puede interesar simular el click de un usuario sobre un enlace. Dicho de otro modo, provocar el click en un enlace sin que sea...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*