I have a single bootstrap modal, which is called from different places, and so the modal contains some data-* attributes I want to set before showing it. Just using the .data() offered by jquery does not work.
Suppose you have mark-up like this:
<div data-some-important-value="123">
Asking the value is quite easy:
$('[data-some-important-value]').data('some-important-value')
And, according to the documentation, setting the data on a DOM element, should be as easy as
$('[data-some-important-value]').data('some-important-value', 'new-value')
If you would try this in the console, you could verify that does not work. This is where it gets confusing (to me). Apparently the .data() offered by jquery existed before the HTML5 data-* elements did, and they nicely integrated them. But the data-* are only loaded once, and never written back to the document.
To still be able to do this, use the .attr() method instead:
$('[data-some-important-value]').attr('data-some-important-value', 'new-value')
Now I only have to include one modal "template" in my HTML, and set the data-* attributes to customize the behaviour.
Comments
Add comment