Wie setze ich den Textbox-Wert innerhalb des Bootstrap-Popover

Ich zeige bootstrap popover beim Klicken auf Anchor-Element wie folgt.Wie setze ich den Textbox-Wert innerhalb des 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>

Ich möchte hier Textbox Wert (Text) setzen, die zu gleichen Innen popover ist als Ankerelement Text (dh 'Beispieltext'). Kann mir bitte jemand sagen, wie kann ich das machen?

Quelle

2017-01-18 Prabi

Im Inneren des content Verwendung this, die das ist Elementverweis von wo das Popover aufgerufen wird. Also hier this wäre das Ankerelement in Ihrem Szenario. Holen Sie sich den Text aus dem anchor-Tag und add the value attribute zu Ihrem input element und geben Sie dann $('#popover-content').html() zurück.

Überprüfen Sie das folgende Code-Snippet. Dies könnte dir helfen!

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

Quelle

2017-01-18 18:55:55

Funktioniert perfekt Mann! Ich danke dir sehr. Schätze deine Hilfe ! – Prabi

Wie docs sagt, wenn Sie HTML in popover zeigen möchten, müssen Sie title HTML durch Argument übergeben, so in Ihrem Fall es steht für:

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

Quelle

2017-01-18 18:43:54

Daten-Titel wird verwendet, Titel auf dem popover zu zeigen. Ich möchte den Text der Kontrolle in Popover setzen – Prabi

Wie setze ich den Textbox-Wert innerhalb des Bootstrap-Popover

Antwort

Verwandte Themen