Получить значение атрибута данных и показать его в модальном режиме в Bootstrap - PullRequest
Новая
       8

Получить значение атрибута данных и показать его в модальном режиме в Bootstrap

0 голосов
/ 15 октября 2018

Я использую Bootstrap v.3.3.7 и на своей странице я разместил множество кнопок, которые работают, чтобы показать modal.Внутри modal я поместил кнопку popover. 

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

Используя jQuery, я получаю значение атрибута data-id и пытаюсь показать это значение в виде всплывающего текста. 

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

Однако я получаю click 0 во всех случаях ... 

$(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>

ОБНОВЛЕНИЕ:

Я переместил data-attribute внутри ссылки в модале.Тем не менее, он получает значение не в первый клик, а во второй!

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Вы можете использовать атрибут data-content вместо свойства popover, вы запускаете всплывающее окно на странице готовности: 

$(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>

для вашего измененного кода вам не нужно ни одного события клика, вам нужно сделать следующее 

$('#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>
0 голосов
/ 15 октября 2018

пожалуйста, замените ваш код JQuery на это.надеюсь, это будет полезно.пожалуйста, смотрите это 

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++;
  });     
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...