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 datepicker, php, mysql y las fechas en form... Veamos un caso particular a la hora de programar con jquery ui. El componente DatePicker nos proporciona una manera muy visual y eficiente de insertar...
jQuery – CSS aplicar estilos a un elemento Una función muy potente para jQuery es css(). Con jQuery CSS podemos aplicar estilos a un elemento o capturar qué estilos tiene. Con la funció...
jQuery – Drag & Drop – 2 plugins Os dejo dos plugins que os puede ser de ayuda para el tratamiento del arrastre (drag & drop) de objetos: Draggabilly Permite arrastra solo en de...
jQuery – Validar formulario antes de enviarl... Os dejamos un videotutorial que detalla cómo validar un formulario antes de enviarlo, mostrando al usuario qué error está cometiendo y en que campo. V...