Tapestry 5.4多次调用jquery [英] Tapestry 5.4 call jquery more than once

问题描述

我正在尝试将 Bootstrap popover 集成到我的Tapestry 5.4-alpha- 14申请.我是Tapestry的新手，我不确定在那里如何使用javascript.

I am trying to integrate Bootstrap popover to my Tapestry 5.4-alpha-14 application. I am new to Tapestry, and I am not sure how to use javascript there.

我的问题是，刷新区域时，我想在区域循环中的每个元素上显示Bootstrap弹出窗口.首先，我在区域中没有任何元素，然后用户提交了一个表单并加载了一个元素，然后进行了更多的用户交互，并且加载了另一个元素，依此类推...我想在每个加载的元素上显示弹出框在循环.使用下面的代码，我只能在第一个元素加载时显示弹出窗口，但是在第二个元素加载时，弹出窗口会丢失.我还注意到在第二次加载时未调用.js代码.

My problem is that I want to show Bootstrap popover on each element in a zone loop when the zone is refreshed. First I have no elements in the zone, then the user submits a form and an element is loaded, and then some more user interaction, and another element is loaded, and so on... I want to show the popover on each loaded element in the loop. With the code bellow I was able to show the popover only when the first element was loaded, but then when the second is loaded the popover was lost. I also notice that the .js code was not called on the second load.

.tml代码的一部分:

Part of the .tml code:

<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代码的一部分:

Part of the .java code:

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

popover.js代码:

The popover.js code:

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

希望您能给我任何帮助.

I would appreciate any help you can give me.

推荐答案

require.js将只执行一次js主体.您应该定义一个配置一次但执行多次的函数.

require.js will only execute the body of your js once. You should define a function which is configured once but executed multiple times.

popover.js

popover.js

define(["jquery"], function($) {
    var privateFunc = function(args) {
        options = {
            placement:'right',
            trigger: 'hover',
            container: 'body',
            html: true
        };
        $('.pop').popover(options);
        $('.pop').popover('show');
    };
    return { publicFunc: privateFunc};
});

java代码

ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
    public void run(JavaScriptSupport javaScriptSupport) {
        JSONObject args = new JSONObject("foo", "bar");
        javaScriptSupport.require("popover").invoke("publicFunc").with(args);
    }
});

请参见这里以获取更多信息

这篇关于Tapestry 5.4多次调用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！