Masalah Modal Bootstrap Drupal Tidak Muncul Saat di Klik

Jadi disini saya menggunakan template bootstrap dan membuat sub theme dimana di sub theme tersebut saya meload file css / javascript yang terdapat pada direktori website. Kurang lebih susunan file template infonya adalah sebagai berikut

name = Bootstrap Sub-Theme (CDN)
description = Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.
core = 7.x
base theme = bootstrap


;;;;;;;;;;;;;;;;;;;;;
;; Regions
;;;;;;;;;;;;;;;;;;;;;

regions[navigation] = 'Navigation'
regions[header] = 'Top Bar'
regions[highlighted] = 'Highlighted'
regions[help] = 'Help'
regions[content] = 'Content'
regions[sidebar_first] = 'Primary'
regions[sidebar_second] = 'Secondary'
regions[footer] = 'Footer'
regions[page_top] = 'Page top'
regions[page_bottom] = 'Page bottom'
regions[content_bottom] = 'Content bottom'


;;;;;;;;;;;;;;;;;;;;;
;; Stylesheets
;;;;;;;;;;;;;;;;;;;;;

stylesheets[all][] = css/style.css
stylesheets[all][] = bootstrap/css/bootstrap.min.css

;;;;;;;;;;;;;;;;;;;;;
;; Scripts
;;;;;;;;;;;;;;;;;;;;;


scripts[] = 'bootstrap/js/affix.js'
scripts[] = 'bootstrap/js/alert.js'
scripts[] = 'bootstrap/js/button.js'
scripts[] = 'bootstrap/js/carousel.js'
scripts[] = 'bootstrap/js/collapse.js'
scripts[] = 'bootstrap/js/dropdown.js'
scripts[] = 'bootstrap/js/modal.js'
scripts[] = 'bootstrap/js/tooltip.js'
scripts[] = 'bootstrap/js/popover.js'
scripts[] = 'bootstrap/js/scrollspy.js'
scripts[] = 'bootstrap/js/tab.js'
scripts[] = 'bootstrap/js/transition.js'

br />

Ketika saya mencoba menggunakan CDN, ada sebuah masalah, yaitu salah satunya Modal Bootstrap tidak bisa tampil dengan baik. Jadi ceritanya disini saya punya sebuah view galeri/gambar dimana dalam gambar tersebut saya memanfaatkan bootstrap modal, sehingga ketika thumbnail gambar di klik, maka gambar akan muncul, nah ketika saya menggunakan CDN bootstrap modal mengalami masalah. Saat saya klik gambarnya, gambar tidak muncul atau pada modal bootstrap gambar hanya ditampilkan sekejap, kemudian secara otomatis tertutup

Awalnya saya agak bingung, mengapa hal tersebut bisa terjadi, namun lama – lama akhirnya saya menemukan solusi bagaimana cara mengatasinya.

Cara Mengatasinya :

Jadi ketika kita menggunakan CDN, kurang lebih si Template Bootrap di Drupal akan meload file – file berikut :

https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css
https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.js
https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js


File – file diatas sebenarnya bisa di load dari lokal direktori website, tapi kita juga sebenarnya bisa merequestnya dari CDN. Jadi ketika file – file dari CDN di load otomatis akan mempengaruhi beberapa file, termasuk file modal.js, artinya file bootstrap.js dengan modal.js mengalami konflik atau sederhanya terjadi error yang membuat gagalnya fungsi javascript yang ada. Jika saya hapus modal.js, tentu akan membuat modal bootstrap kembali normal. Konflik file JS Ini juga bukan berpengaruh pada modal saja, namun juga pada javascript untuk sub menu akan mengalami kegagalan fungsi, dimana jika menu di klik sub menunya tidak akan tampil

Jadi intinya begini, kalau seandainya web drupal yang menggunakan template bootstrap dengan custom template pada sub theme dimana file – file js/css nya diload dari lokal, sebaiknya jangan gunakan CDN, karena bisa menyebabkan terjadinya konflik file JS. Kalau memang mau menggunakan CDN, sebaiknya gunakan CDN sepenuhnya tidak usah meload file dari lokal atau meload file JS yang bisa membuat antar file JS konflik sehingga ada fungsi tertentu yang mengalami kegagalan.

Hal ini sebenarnya bukan hanya untuk kasus drupal bootstrap saja, tapi juga untuk jenis framework lainnya, kalau misalnya kita meload banyak file JS yang kita tidak ketahui fungsinya kemungkinan akan terjadi bentrok/error yang membuat fungsi tertentu pada Javascriptnya tidak bekerja sebagaimana mestinya. Bagi pengguna awam seperti saya, tentu mencari kesalahan seperti itu sangatlah menyusahkan.

Baca juga : Membuat Halaman Foto Galeri Dengan Bootstrap Modal di Drupal