CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
yaylitzis
yaylitzis

Reputation: 5534

Get value of a data attribute and show it in a modal in Bootstrap

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!

Upvotes: 1

Views: 2776

Answers (2)

Negi Rox
Negi Rox

Reputation: 3922

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++;
  });     
});

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

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>

Upvotes: 2

Related Questions