TypeError modal is not a function with bootstrap Modal

Question

I have a bootstrap 2 32 modal which I am trying to dynamically insert into the HTML of another view  I m working with Codeigniter 2 1  Following Dynamically inserting a bootstrap modal partial view into a view  I have    lt div id  modal target  gt  lt  div gt    as the target div for insertion  I have a button in my view that looks like         lt a href   message  class  btn btn-large btn-info  data-action  Message  data-toggle  tab  gt Message lt  a gt    My JS has     ajax       type       POST        url        AjaxUpdate get modal       cache     false      success   function data           if data                   modal target   html data                  This shows the modal                 form-content   modal                         The button of the main view is    lt div id  thanks  gt  lt p gt  lt a data-toggle  modal  href   form-content  class  btn btn-primary btn-large  gt Modal powers  activate  lt  a gt  lt  p gt  lt  div gt    Here is what I d like to store separately as a partial view    lt div id  form-content  class  modal hide fade in  style  display  none   gt       lt div class  modal-header  gt           lt a class  close  data-dismiss  modal  gt    lt  a gt           lt h3 gt Send me a message lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt form class  contact  name  contact  gt                lt fieldset gt                   lt  -- Form Name -- gt                lt legend gt modalForm lt  legend gt                lt  -- Text input-- gt               lt div class  control-group  gt                 lt label class  control-label  for  user  gt User lt  label gt                 lt div class  controls  gt                   lt input id  user  name  user  type  text  placeholder  User  class  input-xlarge  required    gt                   lt p class  help-block  gt help lt  p gt                 lt  div gt               lt  div gt                lt  -- Text input-- gt               lt div class  control-group  gt                 lt label class  control-label  for  old  gt Old password lt  label gt                 lt div class  controls  gt                   lt input id  old  name  old  type  text  placeholder  placeholder  class  input-xlarge  gt                   lt p class  help-block  gt help lt  p gt                 lt  div gt               lt  div gt                lt  -- Text input-- gt               lt div class  control-group  gt                 lt label class  control-label  for  new  gt New password lt  label gt                 lt div class  controls  gt                   lt input id  new  name  new  type  text  placeholder  placeholder  class  input-xlarge  gt                   lt p class  help-block  gt help lt  p gt                 lt  div gt               lt  div gt                lt  -- Text input-- gt               lt div class  control-group  gt                 lt label class  control-label  for  repeat  gt Repeat new password lt  label gt                 lt div class  controls  gt                   lt input id  repeat  name  repeat  type  text  placeholder  placeholder  class  input-xlarge  gt                   lt p class  help-block  gt help lt  p gt                 lt  div gt               lt  div gt                      lt  fieldset gt           lt  form gt       lt  div gt         lt div class  modal-footer  gt           lt input class  btn btn-success  type  submit  value  Send   id  submit  gt           lt a href     class  btn  data-dismiss  modal  gt Nah  lt  a gt       lt  div gt   lt  div gt    When I click the button  the modal is inserted correctly  but I get the following error   TypeError         modal is not a function    How can I fix this

User · Answer

i just want to emphasize what mwebber said in the comment      also check if jQuery is not included twice       it was the issue for me

User · Answer

In my case  I use rails framework and require jQuery twice  I think that is a possible reason   You can first check app assets application js file  If the jquery and bootstrap-sprockets appears  then there is not need for a second library require  The file should be similar to this       require jquery     require jquery ujs     require turbolinks     require bootstrap-sprockets     require tree     Then check app views layouts application html erb  and remove the script for requiring jquery  For example        lt script src  https   ajax googleapis com ajax libs jquery 2 2 0 jquery min js  gt  lt  script gt    I think sometimes when newbies use multiple tutorial code examples will cause this issue

User · Answer

This error is actually the result of you not including bootstrap s javascript before calling the modal function  Modal is defined in bootstrap js not jQuery  It s also important to note that bootstrap actually needs jQuery to define the modal function  so it s vital that you include jQuery before including bootstrap s javascript  To avoid the error just be sure to include jQuery then bootstrap s javascript before you call the modal function  I usually do the following in my header tag    lt header gt       lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt       lt script src   path to bootstrap js bootstrap min js  gt  lt  script gt   lt  header gt

User · Answer

I guess you should use in your button    lt a data-toggle  modal  href   form-content        instead of href there should be data-target   lt a data-toggle  modal  data-target   form-content        just be sure  that modal content is already loaded  I think problem is  that showing modal is called twice  one in ajax call  that works fine  you said modal is shown correctly  but error probably comes with init action on that button  that should handle modal  this action cant be executed  because modal is not loaded at that time

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

I resolved this issue in Laravel by modifing the line below in resources assets js bootstrap js  window     window jQuery   require  jquery dist jquery slim      to  window     window jQuery   require  jquery dist jquery

User · Answer

In my experience  most probably its happened with jquery version using multiple version  conflicts  for sort out the issue we can use a no-conflict method like below    jQuery noConflict     function            function            More code using   as alias to jQuery        button   click function                modalID   modal  show                     jQuery

User · Answer

I had the same issue  Changing     ajax        to   jQuery ajax        did not work  But then I found that jQuery was included twice and removing one of them fixed the problem

User · Answer

Other answers din t work for me in my react js application  so I have used plain JavaScript for this   Below solution worked    Give an id for close part of the modal dialog   myModalClose  in below example      lt span gt     className  close cursor-pointer     data-dismiss  modal     aria-label  Close                       id  myModalClose   gt          Generate a click event to the above close button  using that id        document getElementById  myModalClose   click       Possibly you could generate same click on close button  using jQuery too   Hope that helps

User · Answer

Another possibility is that one of the other scripts your including is causing the problem by also including JQuery or conflicting with    Try removing your other included scripts and see if it fixes the issue   In my case  after hours of needlessly searching my one code  I removed scripts in a binary search pattern and discovered the offending script right away

User · Answer

Check that jquery library not included in html that load via Ajax  remove  lt script src    Scripts jquery ver  js  gt  lt  script gt  in your AjaxUpdate get modal

User · Answer

After linking up your jquery and bootstrap write your code just below the Script tags of jquery and bootstrap    x000D   x000D    document  ready function      x000D        div   on  click    a   function event    x000D      event preventDefault    x000D      jQuery noConflict    x000D          myModal   modal  show    x000D   x000D        x000D      x000D   lt  -- jQuery library -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D   x000D   lt  -- Latest compiled JavaScript -- gt  x000D   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I have resolved this issue in react by using it like this   window     modal-id   modal

User · Answer

For me  I had     require jquery after     require bootstrap  Once I moved jquery before bootstrap  everything worked

[javascript] TypeError: $(...).modal is not a function with bootstrap Modal

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-2