Passing data to a bootstrap modal

Question

I ve got a couple of hyperlinks that each have an ID attached  When I click on this link  I want to open a modal   http   twitter github com bootstrap javascript html modals    and pass this ID to the modal  I searched on google  but I couldn t find anything that could help me   This is the code    lt a data-toggle  modal  data-id   book Id  title  Add this item  class  open-AddBookDialog  gt  lt  a gt    Which should open    lt div class  modal hide  id  addBookDialog  gt       lt div class  modal-body  gt           lt input type  hidden  name  bookId  id  bookId  value     gt       lt  div gt   lt  div gt    With this piece of code         document  ready function              open-AddBookDialog   click function                  bookId   val   this  data  id                 addBookDialog   modal  show                  However  when I click the hyperlink  nothing happens  When I give the hyperlink  lt a href   addBookDialog      gt   the modal opens just fine  but it does t contain any data   I followed this example  How to pass values arguments to modal show   function in Bootstrap   and I also tried this  How to set the input value in a modal dialogue

User · Answer

Try with this    function       when click a button       miButton   click function            dynamic-field   remove          pass the data in the modal body adding html elements         myModal  modal-body   html   lt input type  hidden  name  name  value  your value  class  dynamic-field  gt            open the modal         myModal   modal  show

User · Answer

I find this approach useful  Create click event     button   on  click   function e        let id   e node data id           myModal   modal  show    id  id         Create show bs modal event      myModal   on  show bs modal   function  e             access parsed information through relatedTarget      console log e relatedTarget id         Extra  Make your logic inside show bs modal to check whether the properties are parsed  like for instance as this  id    e relatedTarget hasOwnProperty   id      e relatedTarget id   null

User · Answer

I think you can make this work using jQuery s  on event handler   Here s a fiddle you can test  just make sure to expand the HTML frame in the fiddle as much as possible so you can view the modal    http   jsfiddle net Au9tc 605   HTML   lt p gt Link 1 lt  p gt   lt a data-toggle  modal  data-id  ISBN564541  title  Add this item  class  open-AddBookDialog btn btn-primary  href   addBookDialog  gt test lt  a gt    lt p gt  amp nbsp  lt  p gt     lt p gt Link 2 lt  p gt   lt a data-toggle  modal  data-id  ISBN-001122  title  Add this item  class  open-AddBookDialog btn btn-primary  href   addBookDialog  gt test lt  a gt    lt div class  modal hide  id  addBookDialog  gt    lt div class  modal-header  gt       lt button class  close  data-dismiss  modal  gt    lt  button gt       lt h3 gt Modal header lt  h3 gt     lt  div gt       lt div class  modal-body  gt           lt p gt some content lt  p gt           lt input type  text  name  bookId  id  bookId  value     gt       lt  div gt   lt  div gt    JAVASCRIPT    document  on  click     open-AddBookDialog   function           var myBookId     this  data  id             modal-body  bookId   val  myBookId            As pointed out in comments           it is unnecessary to have to manually call the modal              addBookDialog   modal  show

User · Answer

Bootstrap 4 3 - use code from below snippet - more here   x000D   x000D      exampleModal   on  show bs modal   function  event    x000D    let bookId     event relatedTarget  data  bookid    x000D      this  find   modal-body input   val bookId  x000D     x000D  a btn btn-primary open-AddBookDialog  color  white   x000D   lt  -- Initialize Bootstrap 4 -- gt  x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt  x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  integrity  sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt  -- BUTTON -- gt  x000D   x000D   lt a  x000D    class  btn btn-primary open-AddBookDialog   x000D    data-toggle  modal   x000D    data-target   exampleModal   x000D    data-bookid   book Id   x000D    title  Add this item  x000D   gt Open lt  a gt  x000D   x000D   lt  -- MODAL -- gt  x000D   x000D   lt div class  modal fade  id  exampleModal  tabindex  -1  role  dialog  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D       x000D         lt div class  modal-body  gt  x000D           lt input type  hidden  name  bookId  id  bookId  value     gt  x000D           lt input type  text  class  form-control  id  recipient-name  gt      x000D         lt  div gt  x000D         x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Close lt  button gt  x000D         lt  div gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For updating an href value  for example  I would do something like   lt a href  quot  myModal quot  data-toggle  quot modal quot  data-url  quot http   example com quot  gt Show modal lt  a gt       myModal   on  show bs modal   function  e        var url     e relatedTarget  data  url          e currentTarget  find   any-class   attr  quot href quot    quot url quot

User · Answer

This is how you can send the id data to a modal     lt input     href         data-some-id  uid0123456789      data-toggle  modal      data-target   my modal      value  SHOW MODAL      type  submit      class  btn modal-btn   gt    lt div class  col-md-5  gt     lt div class  modal fade  id  my modal  gt      lt div class  modal-body modal-content  gt        lt h2 name  hiddenValue  id  hiddenValue    gt      lt  div gt      lt div class  modal-footer    gt   lt  div gt      And the javascript           function               modal-btn   click function            var data var     this  data  some-id               modal-body h2   text data var

User · Answer

Here is a cleaner way to do it if you are using Bootstrap 3 2 0   Link HTML   lt a href   my modal  data-toggle  modal  data-book-id  my id value  gt Open Modal lt  a gt    Modal JavaScript    triggered when modal is about to be shown     my modal   on  show bs modal   function e           get data-id attribute of the clicked element     var bookId     e relatedTarget  data  book-id           populate the textbox       e currentTarget  find  input name  bookId     val bookId         http   jsfiddle net k7FC2

User · Answer

Bootstrap 4 0 gives an option to modify modal data using jquery  https   getbootstrap com docs 4 0 components modal  varying-modal-content Here is the script tag on the docs       exampleModal   on  show bs modal   function  event      var button     event relatedTarget     Button that triggered the modal   var recipient   button data  whatever      Extract info from data-  attributes      If necessary  you could initiate an AJAX request here  and then do the updating in a callback        Update the modal s content  We ll use jQuery here  but you could use a data binding library or other methods instead    var modal     this    modal find   modal-title   text  New message to     recipient    modal find   modal-body input   val recipient      It works for the most part  Only call to modal was not working  Here is a modification on the script that works for me    document  on  show bs modal     exampleModal  function event          same as in above script

User · Answer

Here s how I implemented it working from  mg1075 s code  I wanted a bit more generic code so as not to have to assign classes to the modal trigger links buttons   Tested in Twitter Bootstrap 3 0 3   HTML   lt a href     data-target   my modal  data-toggle  modal  data-id  my id value  gt Open Modal lt  a gt    JAVASCRIPT    document  ready function           a data-toggle modal   button data-toggle modal    click function           var data id            if  typeof   this  data  id        undefined            data id     this  data  id                   my element id   val data id

User · Answer

You can try simpleBootstrapDialog  Here you can pass title  message  callback options for cancel and submit etc    To use this plugin include simpleBootstrapDialog js file like below  lt script type  quot text javascript quot  src  quot  simpleDialog js quot  gt  lt  script gt   Basic Usage  lt script type  quot text javascript gt    simpleDialog     lt  script gt   Custom Title and description   simpleDialog     title  quot Alert Dialog quot     message  quot Alert Message quot        With Callback  lt script type  quot text javascript gt    simpleDialog       onSuccess function            alert  quot You confirmed quot               onCancel function            alert  quot You cancelled quot               lt  script gt

User · Answer

Your code would have worked with correct modal html structure    x000D   x000D    function    x000D        open-AddBookDialog   click function    x000D           bookId   val   this  data  id     x000D          addBookDialog   modal  show    x000D        x000D      x000D   lt html gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt a data-id   book Id  title  Add this item  class  open-AddBookDialog  gt Open Modal lt  a gt  x000D   x000D   lt div id  addBookDialog  class  modal fade  tabindex  -1  role  dialog  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-body  gt  x000D          lt input type  hidden  name  bookId  id  bookId  value     gt  x000D         lt  div gt  x000D       x000D       lt  div gt  lt  --   modal-content -- gt  x000D     lt  div gt  lt  --   modal-dialog -- gt  x000D   lt  div gt  lt  --   modal -- gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is so easy with jquery   If below is your anchor link    lt a data-toggle  modal  data-id   book Id  title  Add this item  class  open-AddBookDialog  gt  lt  a gt     In the show event of your modal you can access to the anchor tag like below    triggered when modal is shown     modal id   on  shown bs modal   function event            The reference tag is your anchor tag here     var reference tag     event relatedTarget        var id   reference tag data  id

User · Answer

If you are on bootstrap 3   this can be shortened a bit further if using Jquery   HTML   lt a href     data-target   my modal  data-toggle  modal  class  identifyingClass  data-id  my id value  gt Open Modal lt  a gt    lt div class  modal fade  id  my modal  tabindex  -1  role  dialog  aria-labelledby  my modalLabel  gt   lt div class  modal-dialog  role  dialog  gt       lt div class  modal-content  gt           lt div class  modal-header  gt               lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt               lt h4 class  modal-title  id  myModalLabel  gt Modal Title lt  h4 gt           lt  div gt           lt div class  modal-body  gt              Modal Body              lt input type  hidden  name  hiddenValue  id  hiddenValue  value      gt           lt  div gt           lt div class  modal-footer  gt               lt button type  button  class  btn btn-default  data-dismiss  modal  gt No lt  button gt               lt button type  button  class  btn btn-primary  gt Yes lt  button gt           lt  div gt       lt  div gt   lt  div gt      JQUERY   lt script type  text javascript  gt        function                  identifyingClass   click function                  var my id value     this  data  id                    modal-body  hiddenValue   val my id value                       lt  script gt

User · Answer

Found this works for me  In the link   lt button type  quot button quot  class  quot btn btn-success quot  data-toggle  quot modal quot  data-target  quot  message lt  php echo  row  id     gt  quot  gt Message lt  button gt   In the modal   lt div id  quot message lt  php echo  row  id     gt  quot  class  quot modal fade quot  role  quot dialog quot  gt     lt div class  quot modal-dialog quot  gt        lt  -- Modal content-- gt       lt div class  quot modal-content quot  gt         lt div class  quot modal-header quot  gt           lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  gt  amp times  lt  button gt           lt h4 class  quot modal-title quot  gt Modal Header lt  h4 gt         lt  div gt         lt div class  quot modal-body quot  gt           lt p gt Some text in the modal  lt  p gt           lt  php echo  row  id     gt         lt  div gt         lt div class  quot modal-footer quot  gt           lt button type  quot button quot  class  quot btn btn-default quot  data-dismiss  quot modal quot  gt Close lt  button gt         lt  div gt       lt  div gt      lt  div gt   lt  div gt

[javascript] Passing data to a bootstrap modal

Examples related to javascript

Examples related to jquery

Examples related to asp.net-mvc

Examples related to twitter-bootstrap