How to pass values arguments to modal show function in Bootstrap

Question

I have a page the shows a list of local cafes  When the user clicks on a certain cafe  a modal dialog is shown  that already has the  cafe name  pre-filled  The page contains many cafe names  and the form should contain the  cafe name  that he clicked on   Following is the list of cafe names generated as text with link button            lt table class  table table-condensed  table-striped  gt         lt tbody gt              lt tr gt             lt td gt B amp Js            lt  td gt             lt td gt 10690 N De Anza Blvd  lt  td gt             lt td gt                 lt a class  btn btn-primary  data-toggle  modal  onClick      createFormId   modal  show     gt Announce lt  a gt             lt  td gt           lt  tr gt            lt tr gt             lt td gt CoHo Cafe            lt  td gt             lt td gt 459 Lagunita Dr  lt  td gt             lt td gt                 lt a class  btn btn-primary  data-toggle  modal  onClick      createFormId   modal  show     gt Announce lt  a gt             lt  td gt           lt  tr gt             lt tr gt             lt td gt Hot Spot Espresso and Cafe            lt  td gt             lt td gt 1631 N Capitol Ave  lt  td gt             lt td gt                 lt a class  btn btn-primary  data-toggle  modal  onClick      createFormId   modal  show     gt Announce lt  a gt             lt  td gt           lt  tr gt          lt  tbody gt       lt  table gt    Here is the modal form   lt div class  modal hide fade  id  createFormId   gt   lt div class  modal-header  gt       lt a href     class  close  data-dismiss  modal  gt  amp times  lt  a gt       lt h3 gt Create Announcement lt  h3 gt   lt  div gt   lt div class  modal-body  gt       lt form class  form-horizontal  method  POST  commandName  announceBean  action   announce   gt           lt input type  hidden  name  cafeId  value  104    gt           lt fieldset gt               lt div class  control-group  gt                   lt label class  control-label  for  cafeName  gt Where I am Coding lt  label gt                   lt div class  controls  gt                       lt input id  cafeName  name  cafeName  class  input-xlarge disabled  type  text  readonly  readonly  type  text  value  B amp amp Js   gt                   lt  div gt               lt  div gt               lt div class  control-group  gt                   lt label class  control-label  for  date  gt Date lt  label gt                   lt div class  controls  gt                       lt input type  text  class  input-xlarge  id  date  name  date    gt                       lt p class  help-block  gt  lt  p gt                   lt  div gt               lt  div gt               lt div class  control-group  gt                   lt div class  controls  gt                       lt input type  submit  class  btn btn-primary  value  create    gt                       lt input type  button  class  btn  value  Cancel  onclick  closeDialog        gt                   lt  div gt               lt  div gt           lt  fieldset gt       lt  form gt   lt  div gt      Question is how to pass actual value into the  value  attribute of the modal form    lt input type  hidden  name  cafeId  value  104    gt    The form  show  event is triggered by  onlick  event   lt a class  btn btn-primary  data-toggle  modal  onClick      createFormId   modal  show     gt Announce lt  a gt

User · Answer

I want to share how I did this  I spent the last few days rattling my head with how to pass a couple of parameters to the bootstrap modal dialog  After much head bashing  I came up with a rather simple way of doing this    Here is my modal code    lt div class  modal fade  id  editGroupNameModal  role  dialog  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div id  editGroupName  class  modal-header  gt Enter new name for group  lt  div gt           lt div class  modal-body  gt             lt    form tag    action   update group   port  portnum     do   gt             lt    text field tag   gid        type   hidden        gt             lt div class  input-group input-group-md  gt             lt span class  input-group-addon  style  font-size  16px  padding  3    gt Name lt  span gt             lt    text field tag   gname        placeholder   New name goes here   class   form-control   aria   describedby   basic-addon1        gt           lt  div gt           lt div class  modal-footer  gt             lt    submit tag  Submit     gt           lt  div gt           lt   end   gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    And here is the simple javascript to change the gid  and gname input values   function editGroupName id  name           input gid   val id          input gname form-control   val name         I just used the onclick event in a link                                                                                    amp  39  is single quote                                                                                        1    admin    lt a data-toggle  modal  data-target   editGroupNameModal  onclick  editGroupName  amp  39 1 amp  39    amp  39 admin amp  39    return false   href     gt edit lt  a gt    The onclick fires first  changing the value property of the input boxes  so when the dialog pops up  values are in place for the form to submit   I hope this helps someone someday   Cheers

User · Answer

You could do it like this    lt a class  btn btn-primary announce  data-toggle  modal  data-id  107   gt Announce lt  a gt    Then use jQuery to bind the click and send the Announce data-id as the value in the modals  cafeId     document  ready function           announce   click function       Click to only happen on announce links          cafeId   val   this  data  id              createFormId   modal  show

User · Answer

Use    document  ready function             createFormId   on  show bs modal   function event                cafeId   val   event relatedTarget  data  id

User · Answer

Here s how i am calling my modal  lt a data-toggle  quot modal quot  data-id  quot 190 quot  data-target  quot  modal-popup quot  gt Open lt  a gt   Here s how i am obtaining value in the modal     modal-popup   on  show bs modal   function e        console log   e relatedTarget  data  id        190 will be printed

[jquery] How to pass values arguments to modal.show() function in Bootstrap

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to jquery-events

[jquery] How to pass values arguments to modal.show() function in Bootstrap

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to jquery-events