Bootstrap modal is not a function

Question

I have a modal in my page  When I try to call it when the windows load  it prints an error to the console that says            modal is not a function   This is my Modal HTML     lt div class  modal fade  id  prizePopup  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt   lt div class  modal-dialog  gt       lt div class  modal-content  gt           lt div class  modal-header  gt               lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt                   amp times               lt  button gt               lt h4 class  modal-title  id  myModalLabel  gt                  This Modal title              lt  h4 gt           lt  div gt           lt div class  modal-body  gt              Add some text here          lt  div gt           lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt               lt button type  button  class  btn btn-primary  gt                  Submit changes              lt  button gt           lt  div gt       lt  div gt   lt  div gt       lt script type  text javascript  src  js bootstrap js  gt  lt  script gt   lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt    And this is my JavaScript to run it with when a window is loaded     lt script type  text javascript  gt    window  load function             prizePopup   modal  show         lt  script gt    How can I fix this problem

User · Answer

Use    jQuery noConflict        prizePopup   modal  toggle

User · Answer

I meet this error when integrate modal bootstrap in angular   This is my solution to solve this issue   I share for whom concern   First step you need install jquery and bootstrap by npm command   Second you need add declare var     any  in component  And use can use     myModal   modal  hide    on onSave   method  Demo https   stackblitz com edit angular-model-bootstrap-close file src app app component ts

User · Answer

I m a bit late to the party  however there s an important note   Your scripts might be in the right order but watch out for any asyncs in your script tag  like this    lt script type  text javascript  src  js bootstrap js  async gt  lt  script gt   This might be causing the issue  Especially if you have this async set only for Production environments this can get really frustrating to reason about

User · Answer

change the order of the script      Because bootstrap is a jquery plugin so it require Jquery to execute

User · Answer

jQuery should be the first    lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap js  gt  lt  script gt

User · Answer

Causes for TypeError         modal is not a function    Scripts are loaded in the wrong order  Multiple jQuery instances   Solutions    In case  if a script attempt to access an element that hasn t been reached yet then you will get an error  Bootstrap depends on jQuery  so jQuery must be referenced first  So  you must be called the jquery min js and then bootstrap min js and further the bootstrap Modal error is actually the result of you not including bootstrap s javascript before  calling the modal function  Modal is defined in bootstrap js and not in jQuery  So the script should be included in this manner      lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt       lt script type  text javascript  src  js bootstrap js  gt  lt  script gt   In case if there are multiple instances of jQuery  the second jQuery  declaration prevents bootstrap js from working correctly  so make use of jQuery noConflict    before calling the modal popup  jQuery noConflict        prizePopup   modal  show      jQuery event aliases like  load   unload or  error deprecated since jQuery 1 8     window  on  load   function               prizePopup   modal  show          OR try opening the modal popup directly      prizePopup   on  shown bs modal   function

User · Answer

You have an issue in scripts order  Load them in this order    lt  -- jQuery -- gt   lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt   lt  -- BS JavaScript -- gt   lt script type  text javascript  src  js bootstrap js  gt  lt  script gt   lt  -- Have fun using Bootstrap JS -- gt   lt script type  text javascript  gt    window  load function             prizePopup   modal  show         lt  script gt    Why this  Because Bootstrap JS depends on jQuery      Plugin dependencies      Some plugins and CSS components depend on other plugins  If you include plugins individually  make sure to check for these dependencies in the docs  Also note that all plugins depend on jQuery  this means jQuery must be included before the plugin files

User · Answer

Struggled to solve this one  checked the load order and if jQuery was included twice via bundling  but that didn t seem to be the cause   Finally fixed it by making the following change    before        myModal   modal  hide       after    window     myModal   modal  hide      Found the answer here  https   github com ColorlibHQ AdminLTE issues 685

User · Answer

Changing import statement worked  From  import   as   from  jquery     to   declare var     any

User · Answer

I added a modal dialog in jsp and tried to open it with javascript in jsx and hit the same error   quot    modal is not a function quot  In my case  simply by adding the missing import to the jsx solved the problem   import  quot      bower bootstrap js modal js quot      or import  quot     bootstrap min js quot

User · Answer

The problem is due to having jQuery instances more than one time  Take care if you are using many files with multiples instance of jQuery  Just leave 1 instance of jQuery and your code will work    lt script type  text javascript  src  https   code jquery com jquery-2 1 4 min js  gt  lt  script gt

User · Answer

Run  npm i  types jquery npm install -D  types bootstrap   in the project to add the jquery types in your Angular Project  After that include  import   as   from  jquery   import   as bootstrap from  bootstrap     in your app module ts  Add   lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt    in your index html just before the body closing tag   And if you are running Angular 2-7 include  jquery  in the types field of tsconfig app json file   This will remove all error of  modal  and     in your Angular project

User · Answer

This warning may also be shown if jQuery is declared more than once in your code  The second jQuery declaration prevents bootstrap js from working correctly    lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap js  gt  lt  script gt       lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt

User · Answer

The problem happened to me just in production just because I imported jquery with HTTP and not HTTPS  and production is HTTPS

[javascript] Bootstrap modal: is not a function

Examples related to javascript

Examples related to jquery

Examples related to html

[javascript] Bootstrap modal: is not a function

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to bootstrap-modal