CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
Kenzo
Kenzo

Reputation: 1837

Passing data from a buttton to a modal boostrap

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

Upvotes: 0

Views: 231

Answers (3)

Toxide82
Toxide82

Reputation: 277

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

Upvotes: 0

Lapskaus
Lapskaus

Reputation: 1721

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.

Upvotes: 1

username-yj
username-yj

Reputation: 101

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:

  1. 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'>
  2. Get the element with document.getElementById('#myButton').
  3. Get its data-id attribute with the jQuery function: .attr("data-id"). Store it to a variable if you wish.
  4. 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.

Upvotes: 0

Related Questions