Bootstrap TypeError modal is not a function

Question

i ve been trying to call bootstrap modal from jquery and keep getting this error message    TypeError         modal is not a function   Here is my code     lt button id  btnTest  class  btn btn-default  gt Show Modal lt  button gt   lt div id  dummyModal  role  dialog  class  modal fade  gt       lt div class  modal-dialog  gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt button type  button  data-dismiss  modal  class  close  gt  amp times  lt  button gt             lt h4 class  modal-title  gt Error lt  h4 gt           lt  div gt           lt div class  modal-body  gt             lt p gt Quick Brown Fox Jumps Over The Lazy Dog lt  p gt           lt  div gt           lt div class  modal-footer  gt             lt button type  button  data-dismiss  modal  class  btn btn-default  gt Close lt  button gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   lt script type  text javascript  src   js jquery-1 11 3 js  gt  lt  script gt   lt script type  text javascript  src   js bootstrap js  gt  lt  script gt   lt script type  text javascript  gt       document   ready function              btnTest   click function                  dummyModal   modal  show                   lt  script gt    FYI  i use bootstrap 3 3 5 and jquery 1 11 3  i ve tried jQuery noConflict        etc from this thread but still no luck  Here s the complete code

User · Accepted Answer

Use this  It will work  I have used  bootstrap 3 3 5 and jquery 1 11 3   x000D   x000D     document   ready function     x000D        btnTest   click function     x000D          dummyModal   modal  show    x000D        x000D      x000D  body   x000D    background-color   eee  x000D    padding-top  40px  x000D    padding-bottom  40px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf8  gt  x000D     lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D     lt meta name  viewport  content  width device-width initial-scale 1  gt  x000D     lt link rel  stylesheet  type  text css  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D     lt title gt Modal Test lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  container  gt  x000D       lt button id  btnTest  class  btn btn-default  gt Show Modal lt  button gt  x000D       lt div id  dummyModal  role  dialog  class  modal fade  gt  x000D         lt div class  modal-dialog  gt  x000D           lt div class  modal-content  gt  x000D             lt div class  modal-header  gt  x000D               lt button type  button  data-dismiss  modal  class  close  gt  amp times  lt  button gt  x000D               lt h4 class  modal-title  gt Error lt  h4 gt  x000D             lt  div gt  x000D             lt div class  modal-body  gt  x000D               lt p gt Quick Brown Fox Jumps Over The Lazy Dog lt  p gt  x000D             lt  div gt  x000D             lt div class  modal-footer  gt  x000D               lt button type  button  data-dismiss  modal  class  btn btn-default  gt Close lt  button gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt script type  text javascript  src  https   code jquery com jquery-1 11 3 min js  gt  lt  script gt  x000D     lt script type  text javascript  src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Adding the jquery  js file reference twice can also cause the issue  It could be part of your bundle and you might have added to the page too  Hence you need to remove the additional reference like

User · Answer

I was getting the same error because of jquery CDN   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   was added two times in the HTML head

User · Answer

I had also faced same error when i was trying to call bootstrap modal from jquery  But this happens because we are using bootstrap modal and for this we need to attach one cdn bootstrap min js which is   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt   Hope this will help as I missed that when i was trying to call bootstrap modal from jQuery using      button   on  click  function              myModal   modal          myModal is the id of Bootstrap modal and you have to give a click event to a button when you call click that button a pop up modal will be displayed

User · Answer

If you are using any layout page then  move script sections from bottom to head section in layout page  bcz  javascript files should be loaded first  This worked for me

[jquery] Bootstrap : TypeError: $(...).modal is not a function

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3