2017-01-18 28 views
0

次のように、アンカー要素をクリックするとブートストラップポップオーバーが表示されます。ここで私は、テキストボックスの値を設定したいブートストラップポップオーバー内にテキストボックスの値を設定する方法

の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> 

アンカー要素のテキストと同じにポップオーバーの中にある(テキスト)(すなわち、 'サンプルテキスト' )。誰かが私にそれをどうすればいいのか教えてくれますか?ドキュメントとして

答えて

1

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>

+0

完璧に男!どうもありがとうございます。あなたの助けに感謝 ! – Prabi

0

あなたはポップオーバーでHTMLを表示したい場合は、あなたの場合には、それがために立っているので、title引数を通じてHTMLを渡す必要があり、こう述べています。ですcontent使用thisインサイド

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

データ・タイトルがポップオーバーの上にタイトルを表示するために使用されます。私はポップオーバー内のコントロールのテキストを設定したい – Prabi

関連する問題