1

我的页面上有一个包含选择元素的区域。

我正在onChange通过 JavaScript 在该元素上添加一个侦听器（感谢http://jsfiddle.net/AnbmU/6/）

void afterRender() {
    javaScriptSupport.addScript(
        "$('groupSelecter').observe('change', function() {" + 
        "    var width = $(this).getWidth();" + 
        "    var selectBox = $('groupSelecter');" + 
        "    var chosen = selectBox.selectedIndex >= 0 ? selectBox.options[selectBox.selectedIndex].innerHTML : undefined;" + 
        "    $(this).next('.ninja-input')" + 
        "         .toggleClassName('hidden', chosen != 'Create New Group...')" + 
        "         .select();" + 
        "});",
        ""
    );
}

当我触发区域刷新时会出现问题，我的选择更改id为：groupSelecter_846e54edd0b5.

有没有办法让选择的元素 id 保持不变或能够在每次区域更新时更改 javascript 和选择的 id？

编辑：另一个我以前不知道的问题。

无论其内容如何，​​隐藏的输入字段都会在所选元素的第二次更改中切换一次。例如，如果我最初选择了GROUP_1、和GROUP_2，然后更改为，则会出现输入框。当我将其更改为 时，输入再次被隐藏。同样，当我更改为 时，会出现输入字段。请注意，在 JSfiddle 中，这很好用。但由于某种原因，它在我的 Tapestry 项目中不起作用。GROUP_3Create New Group...GROUP_1GROUP_2Create New Group...GROUP_3

EDIT2：好的，我尝试了更多的摆弄：

Tapestry 使用id=groupSelecter_d769af562f89. 它还生成插入了这个 JavaScript（在 HTML 的底部）：

$$('.groupSelecter').invoke('observe', 'change', function() {
    var width = $(this).getWidth();
    var chosen = $(this).selectedIndex >= 0 ? $(this).options[$(this).selectedIndex].innerHTML : undefined;
    $(this).next('.ninja-input')
        .toggleClassName('ninja-hidden', chosen != 'Create New Group...');
});

我检查了 Firefox 中的元素，导航到标签，找到生成的代码并将其删除。之后，我打开了 firefox JS 控制台并粘贴了我刚刚剪切的完全相同的代码。而且，瞧，它工作，出于某种原因。（即类选择）。

4

3 回答 3

1

我不知道 Tapestry，但如果它不改变类属性，你可以附加到一个类

代替

$('groupSelecter').observe('change', function() {

你添加一个同名的类'groupSelector'

$$('.groupSelector').first().observe('change',function() {

或者如果您有多个元素

$$('.groupSelector').invoke('observe','change',function(){
于 2013-11-25T18:02:17.887 回答
1

您需要确保每次选择呈现时都会触发 javascript。您目前仅在页面渲染时触发它（不是 ajax 更新）。

您可以在mixin中执行此操作，也可以在页面渲染和 ajax 更新期间添加脚本。如果您使用类属性或数据属性（如该线程的其他答案中所建议的那样），您可以通过 JavaScriptSupport 在两个事件中添加脚本，因为在选择组件呈现之前该值是已知的。

如果您想在 ajax 操作中使用 clientId，这有点棘手，因为您只能在选择组件呈现后添加脚本。在此之前，将不会定义 clientId。如果你想这样做，我建议从你的 ajax 操作中返回一个RenderCommand 。请注意，可以将Block强制类型转换为 RenderCommand

例如：

@InjectComponent
private Zone zone;

@InjectComponent
private Select groupSelector;

@Inject
private TypeCoercer typeCoercer;

RenderCommand onActionFromSomeComponent() {
    return new RenderCommand() {
        public void render(MarkupWriter writer, RenderQueue queue) {
            RenderCommand zoneBody = typeCoercer.coerce(zone.getBody(), RenderCommand.class);
            zoneBody.render(writer, queue);
            javaScriptSupport.addScript(
                "$('%s').observe('change', function() {" + 
                   // more stuff
                 "});",
                 groupSelector.getClientId()
            );
        }
    };
}

void afterRender() {
    javaScriptSupport.addScript(
        "$('%s').observe('change', function() {" + 
            // more stuff
        "});",
        groupSelector.getClientId()
    );
}
于 2013-11-26T11:20:47.117 回答
0

我很惊讶Geek Num 88添加一个类并按该类选择的想法不起作用。您还可以添加一个 data-* 属性并通过它进行选择。

否则，您可以观察到动态的 clientId。

@InjectComponent
private Select groupSelector;

void afterRender() {
    javaScriptSupport.addScript(
        "$('%s').observe('change', function() {" + 
            // more stuff
        "});",
    groupSelector.getClientId());
}

顺便提一句。解决此问题的挂毯方法是将脚本移动到 js 文件并使用 T5.extendInitializers(...)、JavaScriptSupport.addInitializerCall(...) 和 @Import。演示在这里

于 2013-11-26T08:57:58.340 回答