获取数据属性的值并在Bootstrap中以模式显示

Question

I am using Bootstrap v.3.3.7 and in my page I have placed a lot of buttons which work to show modal . Inside the modal I have placed a popover button.

<a href="#" id="open1" class="btn btn-primary" data-id="1" rel="popover" data-target="Message">open modal 1</a>

Using jQuery , I get the value of data-id attribute and I try to show this value as popover text.

  var btnid = 0;
  $('.btn-primary').click(function() {
    btnid = $(this).attr('data-id');
  });

  var textToShow = 'click ' + btnid;

  $('.stopMachine').popover({
    placement: 'right',
    html: true,
    trigger: 'toggle',
    content: textToShow
  });

However, I get click 0 in all cases...

 $(function() { $('#open1').click(function() { $('#myModal1').modal('show') }); $('#open2').click(function() { $('#myModal2').modal('show') }); var btnid = 0; $('.stopMachine').popover({ placement: 'right', html: true, trigger: 'toggle', content: function() { $('.stopMachine').click(function() { btnid = $(this).data('id'); console.log("btnid = " + btnid); }); var message = 'click ' + btnid; return message; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" id="open1" class="btn btn-primary" rel="popover" data-target="Message">open modal 1</a> <a href="#" id="open2" class="btn btn-primary" rel="popover" data-message="Message">open modal 2</a> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="1" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="2" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> 

UPDATE:

I moved the data-attribute inside the link in the modal. However, it doesn't get the value in the 1st click, but in the 2nd!

Answer 1

You can use the data-content attribute instead of the popover property, you initiate the popover at page ready:

 $(function() { $('#open1').click(function() { $('#myModal1').modal('show'); $('#myModal1 .stopMachine').attr('data-content',"click "+$(this).attr('data-id')); }); $('#open2').click(function() { $('#myModal2').modal('show'); $('#myModal2 .stopMachine').attr('data-content',"click "+$(this).attr('data-id')); }); $('.stopMachine').popover({ placement: 'right', html: true, trigger: 'toggle', }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" id="open1" class="btn btn-primary" data-id="1" rel="popover" data-target="Message">open modal 1</a> <a href="#" id="open2" class="btn btn-primary" data-id="2" rel="popover" data-message="Message">open modal 2</a> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> 

for your modified code you don't need any click event, you need to do the following

 $('#open1').click(function() { $('#myModal1').modal('show') }); $('#open2').click(function() { $('#myModal2').modal('show') }); $('.stopMachine').each(function() { $(this).attr('data-content', "click " + $(this).attr('data-id')); }) $('.stopMachine').popover({ placement: 'right', html: true, trigger: 'toggle', }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" id="open1" class="btn btn-primary" rel="popover" data-target="Message">open modal 1</a> <a href="#" id="open2" class="btn btn-primary" rel="popover" data-message="Message">open modal 2</a> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="1" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="2" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> 

Answer 2

please replace your jquery code with this. hope it will be helpful. please see this

var click=0;
$(function() {
  $('#open1').click(function() {
    $('#myModal1').modal('show')
  });

  $('#open2').click(function() {
    $('#myModal2').modal('show')
  });

  var btnid = 0;
  $('.btn-primary').click(function() {
    btnid = $(this).attr('data-id');
    console.log("btnid = " + btnid);
    var textToShow = 'click ' + btnid;
    if(click>0){$('.stopMachine').popover('destroy');}
    $('.stopMachine').popover({
      placement: 'right',
      html: true,
      trigger: 'toggle',
      content: textToShow
    });
    click++;
  });     
});