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 – Cómo seleccionar una opción de Sele... Ya vimos en artículos anteriores cómo seleccionar una opción de un desplegable (select) por su valor. En este artículo vamos a ver cómo seleccionarlo ...
jQuery – Tutorial 01 – Introducción Pequeño vídeo de unos 4 minutos que nos introduce a la librería jQuery. Qués es? Dónde informarse? Qué podemos hacer con esta librería? En el s...
Primer contacto con jQuery Como indican en la web oficial, jQuery es una librería para JavaScript que facilita la programación en las tareas de eventos, crear animaciones y efec...
bideo.js – poner video en el fondo de página... Librería que permit de forma sencilla, poner un video como fondo en una página web. Es muy utilizado en páginas de inicio para intentar impactar al vi...

Deja un comentario

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

*