Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Pass data arguments to modal? #531

andriijas opened this Issue · 48 comments

37 participants

Andreas Cederström F A T Peter Yanovich Jim Ryan Mark Tooth Brian Jensen Kyle Hawkins Jason Ellis Bogdan Soos Scott Bronson Dirk Brünsicke cipater Laurent Van Winckel Ofer Herman Mark Pope Carl Littke Kevin Ohashi Milq Media Anton Heryanto Hasan Tom Witherington Alexandre Jobin Alex SummerDew Asa Carter and others
fat commented


F A T fat closed this
Andreas Cederström

That doesnt work when I have multiple lins using data-controls-modal="countryModal"

I know I can bind click event on my own but would just be insanely nice not to. :-)

fat commented

ahh interesting... well I think for now we aren't going to pass the data options around for you, as i don't think this is a very common thing. sorry about that :(

Peter Yanovich

Common way is to use one modal for page.

Then, by clicking one of the links modal appears. So we should know which link shows modal to load information into it.

In my case I have got a row of items and a "show log" button for each. When I click "show log" modal appears but I need to understand what particular log to load.

Andreas Cederström

@fl00r i agree it would be nice to know the origin of the show event, in the same way we know previous and next tab in tabbables. Im going to check the code and see if I can submit a pull request.

Jim Ryan

+1 for this. Consider a case where multiple elements trigger the same modal with a slight variation in state (like a single attribute difference, or so).

@andriijas Have you made any progress on this?

Andreas Cederström
Mark Tooth

i agree, perhaps having any attributes that start data-* be passed to the modal. would be nice if multiple modals are required.

Brian Jensen

Good idea encodes


Andreas Cederström

I havent figured out a good way to implement this actually.

I would like to use the naming convention of tabs with relatedTarget, and the easy part is easy:

doing $target.modal(option, this) and $.fn.modal = function (option, relatedTarget) {

But then Im stuck - need to somehow jinx in the relatedTarget into the modal instance data, or pass it in as argument on each call, which I dont like.

There is also the thing that the modal plugin should probably still work without the data-api which makes it more complicated.

Mark Tooth

i havn't wrote an implementation yet. but in my head, i feel that data-id='32' etc in the source code would be a good possible way of implementing it. would be easy and powerful, there would need to be other ways to set/get this data. but its a problem that can and im sure will be solved many ways

Andreas Cederström

@encodes yeah problem is to pass the elem in somehow to the modal instance so that it can read the $(elem).data(), since the modal is instanciated once, and then reused the related target element from where the click originates needs to be passed in each time since the idea of this is that several links/sources could open the same modal.

(all this goes for collapsables as well)

Kyle Hawkins

+1 for this. In my case, I want to use modals everywhere the user can input something. For instance, on my calendar, when the user clicks a day it opens an "Add event" modal with the date pre-populated.

Scott Bronson

Big +1 for this. Right now I'm $('body').off('.data-api') and installing my own click handlers. Seems like a waste.

Scott Bronson

Turns out this is actually pretty easy in 2.0.3. First, add your custom data as any number of data parameters.

<li><a data-person="Zim" data-toggle="modal" data-target="#person-modal"></a></li>
<li><a data-person="Dib" data-toggle="modal" data-target="#person-modal"></a></li>

Next, modify bootstrap-modal.js to update your modal's options every time a link is clicked. Otherwise, the modal always displays the data for the first person clicked.

diff --git a/app/assets/javascripts/bootstrap/bootstrap-modal.js b/app/assets/javascripts/bootstrap/bootstrap-modal.js
index 0465cb5..9228636 100644
--- a/app/assets/javascripts/bootstrap/bootstrap-modal.js
+++ b/app/assets/javascripts/bootstrap/bootstrap-modal.js
@@ -209,6 +209,9 @@
       var $this = $(this), href
         , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
         , option = $'modal') ? 'toggle' : $.extend({}, $, $
+      if(option == 'toggle') {
+        $.extend($'modal').options, $
+      }


Finally, use the show event to stuff your custom information into the modal.

    $('#person-modal').on('show', function (event) {
        name = $(this).data('modal').options.person

If @fat can make this patch presentable and commit it, this feature req can be closed.

Dirk Brünsicke

yeah - would love to see that incorporated. It makes sense, breaks nothing and adds a lot of value to that component.



Ofer Herman


Mark Pope


Scott Bronson

Of course the constructor suffers the same problem. Here's a fix:

diff --git a/app/assets/javascripts/bootstrap/bootstrap-modal.js b/app/assets/javascripts/bootstrap/bootstrap-modal.js
index 0465cb5..a51813b 100644
--- a/app/assets/javascripts/bootstrap/bootstrap-modal.js
+++ b/app/assets/javascripts/bootstrap/bootstrap-modal.js
@@ -187,6 +187,7 @@
         , data = $'modal')
         , options = $.extend({}, $.fn.modal.defaults, $, typeof option == 'object' && option)
       if (!data) $'modal', (data = new Modal(this, options)))
+      else $.extend($'modal').options, option)
       if (typeof option == 'string') data[option]()
       else if (

Without this patch, modals only use the first options they were passed and ignore the ones passed to subsequent calls. With it, it uses the options as you'd expect.

Anyone willing to give this a code review? Hopefully it's time for a pull request.

Andreas Cederström

@bronson please make a pull request and refer to this issue as it has been closed for 7 month but people are still actively discussing and contributing to it.

Kevin Ohashi

@bronson I tested the code and it worked well. Thank you for that patch.

Tom Witherington

+1, works well. Thanks

Alexandre Jobin

+1, great work!
i whish it will be included in the next version!!


+3 for me!! this feature is a must for modal windows!!



Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Asa Carter

How do I set a data value programtically without using "data-" in the HTML?

Using $('selector').data('user', value) seems to get overwritten by the last click from a data attribute.

I am trying to pass a data value from one modal to another after a successful ajax request but the data value gets overwritten. The problem is the data could also come from a HTML link instead of the first modal.

$('#modal2').data('user_id', 5) // sets user_id to 5

$('#modal2').on('show', function (event) {

$('#modal2').data('user_id', $('#modal2').data('modal').options.user_id ); // sets user_id to something else

Link on SO to better explain it:

Scott Bronson

@asacarter I do this: $('#my-modal').modal({person:'Gaz'}). If the modal is hidden, that will set modal.options.person and then call your show handler. (I think it toggles so, if it's showing, it gets hidden... fuzzy memory tho)

You need to apply the one-line constructor patch of course.

Eric Robson

I can't get the 'show' event callback to fire. (My modal is showing.) Do I need to put that code anywhere in particular?
Edit: nevermind, copy-paste error. Works great!

Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Florian Rathgeber kynan referenced this issue from a commit in checklisthq/bootstrap
Florian Rathgeber kynan Allow passing data arguments to modal (fixes #531)
Implements @bronson's suggestion, all credit to him.
Ênio Lopes eniolopes referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Lee Faus

FYI: Playing around with 3.0.

name = $(this).data('modal').options.person
name = $(this).data('bs.modal').options.person

Can anyone confirm this?

I also think the patch has not been applied because I am only seeing the first element clicked.

Adam George

Agree with @leefaus, only data-* values from the first element clicked are available as options. Tested in v2.3.1

Bit disappointing... I thought some of the previous comments alluded to this having been fixed :(

Chris Rebert

#6825 is the most recent word on this. @fat is still "noodling".

Andy Brudtkuhl

+1 Any progress on this?

Confirmed: Only the first element clicked passes data-* in v2.3.1

Justin L.

Is there a fund somewhere that I can contribute to fix this > 2 year old bug? :>

Simon Westh Henriksen


Jim Constantine

I have to say this is a pretty obvious bug that needs to be fixed, and it greatly increases the utility of the modal widget and the ease by which it can be used. Of course the other option is to implement relatedTarget. Both have been suggested and progress is stalled.

Miguel Ferreira


Chris Rebert

Folks, this is addressed in v3.0.0+ thanks to event.relatedTarget getting implemented in dbed9da.

Chris Rebert cvrebert locked and limited conversation to collaborators
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.