Passing data from a buttton to a modal boostrap

Question

I a button element on a page that opens a modal both are the same page , and i want to pass data from the button to a modal when it is opened. Is there a way achieving that functionaly without or with javascript/jquery ? Here is the html snippets of my markup

<button class="btn-icone bg-warning" data-toggle="modal" data-target="#modaleIcones"
      data-id=1235> 
      <i value=Radiology class="fa fa-edit"></i>                                                                                      </button>
      
      
<div class="modal fade" id="modaleIcones">
    <div class="modal-dialog" >
        <div class="modal-header">
            
        </div>
        <div class="modal-body">
            <a href="#" id="iconLink1">
               <img src="myImg.png">
            </a>
        </div>
    </div>
</div>

I need to pass data-id=1235 from the button to the modal-body anchor element with id="iconLink1". I would appreciate any help

Possible duplicate of [Passing data to a bootstrap modal](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) — gowtham rajan, Jun 06 '19 at 13:50

score 1 · Accepted Answer · answered Jun 06 '19 at 14:31

In Jquery and Bootstrap modals (tested with version 4) you could do sth like this:

$('[data-toggle="modal"]').on('click.modal.data-api', function(event) {
  var targetModal = $($(this).data('target'));
  var content = $(this).data('content');
  targteModal.find('.modal-content').html(content);
}

You could for example just save a template filename in the data-content attribute and load this with jquery loadtemplate.

score 0 · Answer 2 · answered Jun 06 '19 at 13:58

You would want to use JS/jQuery for this.

I won't give you the exact code, but here are the steps for you to follow:

Give your button an id so you can identify through your JS code which DOM element you wish to manipulate/get data from. e.g. <button id='myButton'>
Get the element with document.getElementById('#myButton').
Get its data-id attribute with the jQuery function: .attr("data-id"). Store it to a variable if you wish.
In the modal, you now have access to the data-id, either from the variable you stored it to, or from making the call directly.

score 0 · Answer 3 · answered Jun 06 '19 at 14:45

I would do with this Jquery by on click of the button get the attribute value of 'data-id', adding it to a variable and then setting the href element of the a tag with the id iconLink1

$('#myButton').click(function() { 
    var _data = $(this).attr('data-id'); 
    $('#iconLink1').attr('href' , _data);
});

You could also check the click by adding a console log(_data); after decalaring the new variable

Passing data from a buttton to a modal boostrap

3 Answers3