Как установить значение текстового поля внутри bootstrap popover

Я показываю bootstrap popover после нажатия на элемент Anchor следующим образом.Как установить значение текстового поля внутри bootstrap popover

Jquery

$("[data-toggle=popover]").popover({ 
      trigger: 'click', 
      placement: "top", 
      html: true, 
      content: function() { 
       return $('#popover-content').html(); 
      } 
     });

HTML

<div id="popover-content" class="hide"> 
    <div class="form-group"> 
     <input class="form-control" id="txtContent" type="text" /> 
     <button id="btnOk" type="button" class="btn btn-default"> 
      <span class="glyphicon glyphicon-ok"></span>&nbsp; 
     </button> 
     <button id="btnCancel" type="button" class="btn btn-default"> 
      <span class="glyphicon glyphicon-remove"></span>&nbsp; 
     </button> 
    </div> 
</div> 

<a href='#' class='btn-link' data-html='true' data-toggle='popover'>Sample text</a>

Я хочу, чтобы установить значение текстового поля (текст), который находится внутри пирога с таким же, как текст привязки элемента (т.е. 'Sample текст' здесь). Может кто-нибудь, пожалуйста, скажите мне, как я могу это сделать?

источник

2017-01-18 Prabi

Внутри content использования this, который является элемент ссылки, из которого вызывается popover. Итак, здесь this будет ядром в вашем сценарии. Получите текст из тега anchor и add the value attribute на ваш input element, а затем верните $('#popover-content').html().

Проверьте приведенный ниже фрагмент кода. Это может помочь вам!

$(document).ready(function() { 
 
    $("[data-toggle=popover]").popover({ 
 
    trigger: 'click', 
 
    placement: "bottom", 
 
    html: true, 
 
    content: function() { 
 
     var anchorText = $(this).text(); 
 
     $('#popover-content').find('input[id=txtContent]').attr('value', anchorText); 
 
     return $('#popover-content').html(); 
 
    } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div id="popover-content" class="hide"> 
 
    <div class="form-group"> 
 
     <input class="form-control" id="txtContent" type="text" /> 
 
     <button id="btnOk" type="button" class="btn btn-default"> 
 
     <span class="glyphicon glyphicon-ok"></span>&nbsp; 
 
     </button> 
 
     <button id="btnCancel" type="button" class="btn btn-default"> 
 
     <span class="glyphicon glyphicon-remove"></span>&nbsp; 
 
     </button> 
 
    </div> 
 
    </div> 
 
    <a href='#' class='btn-link' data-html='true' data-toggle='popover'>Sample text</a> 
 
    <script> 
 
    </script> 
 

 
</body>

источник

2017-01-18 18:55:55

Работает отлично, человек! Огромное спасибо. Ценю вашу помощь ! – Prabi

Как Docs говорит, если вы хотите, чтобы показать HTML в пирог, вы должны пройти HTML через title аргумент, так что в вашем случае это означает:

<a href='#' class='btn-link' data-html='true' data-toggle='popover' 
data-title="Sample text">Sample text</a>

источник

2017-01-18 18:43:54

данных заголовка используется для отображения заголовка в верхней части пирог. Я хочу установить текст управления внутри popover – Prabi

Как установить значение текстового поля внутри bootstrap popover

ответ

Смежные вопросы