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

Información relacionada

Deja un comentario

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

*