jquery bootstrap TypeError: $(…) is null

Publicada el por

Si tenemos por un lado Bootstrap, y por otro nuestro jQuery, puede ser que nos de error. jquery bootstrap TypeError: $(…) is null es un error que nos avisa de conflictos de jQuery.

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

<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 class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
    <div class="modal-body">...</div>
  <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save changes</button></div>
</div>
</div>
</div>

Código que me daba problemas

$('#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 debería provocar ningún conflicto, y deberíamos poder trabajar sin problemas.

Espero que os sea de utilidad este artículo: jquery bootstrap TypeError: $(…) is null

Más información