1

Bootstrap ポップオーバーを Tapestry 5.4-alpha-14 アプリケーションに統合しようとしています。私は Tapestry を初めて使用し、そこで JavaScript を使用する方法がわかりません。

私の問題は、ゾーンが更新されたときに、ゾーン ループ内の各要素に Bootstrap ポップオーバーを表示したいということです。まず、ゾーンに要素がありません。次に、ユーザーがフォームを送信して要素が読み込まれ、さらにユーザーの操作が行われ、別の要素が読み込まれます...読み込まれた各要素にポップオーバーを表示したいループの中。次のコードでは、最初の要素がロードされたときにのみポップオーバーを表示できましたが、2 番目の要素がロードされたときにポップオーバーが失われました。また、2 回目の読み込みで .js コードが呼び出されていないことにも気付きました。

.tml コードの一部:

<t:zone t:id="selectedPagesZone" id="selectedPagesZone">
 <div class="well" t:type="Loop" t:id="selectedLoop" t:source="selectedPages" t:value="item">
    <div class="pop" data-toggle="popover" rel="popover" data-placement="top"  data-container="body" data-content="Content" title="Title">
        ...
     </div>
   </div>
</t:zone>

.java コードの一部:

void onSuccess() {
...
ajaxResponseRenderer.addRender(selectedPagesZone).ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
   public void run(JavaScriptSupport javaScriptSupport) {
      javaScriptSupport.require("popover");
    }
});

popover.js コード:

(function ($) {
options = {
    placement:'right',
    trigger: 'hover',
    container: 'body',
    html: true
  }
$('.pop').popover(options);
$('.pop').popover('show');
})(window.jQuery);

あなたが私に与えることができる助けをいただければ幸いです。

4

1 に答える 1