Question

我需要将ChosenJS jq插件包装到Vaadin组件中。我想它在初始化时会产生一些jq查询。

因此，当我致电<select>时，我的$().chosen()元素应该附加到DOM。

Vaadin组件是动态绑定的：当你进行一些动态标记时，你只有一个可以提供Element的分离Widget，之后这些元素被嵌套到DOM中。所以我尝试使用GWT Timer进行延迟函数调用（我认为它使用内部setTimeout或setInterval）认为当widget元素出现在DOM中时它会起作用。

这是一段代码http://pastebin.com/E3YdLC48。但它确实不起作用。

代码段中有几个测试。

第15-19行显示小部件仍然已分离。

第34行在30秒内启动测试元素应该在DOM中。我可以在浏览器调试器中看到它。 30秒就足以确保您可以在表单和调试器中看到它。

第24-28行确保<select>元素未分离。它会打印从<select>到<html>的所有元素。

第29行也有效。

这是一个gwt方法，它通过ID找到元素。

第38-43行无法找到我的元素。

第42行 - 空的jq包装器。

第42行 - null。

请帮助我理解为什么我找不到我的选择<element>。

public ChosenImpl(VChosenUI target, final ChosenServerRpc rpc) {
    StyleInjector.injectStylesheet(ChoosenStaticApi.INSTANCE.chosen_css().getText());
    ScriptInjector.fromString(ChoosenStaticApi.INSTANCE.jquery_min_js().getText()).inject();
    ScriptInjector.fromString(ChoosenStaticApi.INSTANCE.chosen_jquery_js().getText()).inject();
    this.rpc = rpc;
    select = DOM.createSelect();
    select.setAttribute("id", "artix-chosen-id-" + select.hashCode());
    select.setAttribute("multiple", "");
    select.setAttribute("data-placeholder", placeholder);
    //select.setAttribute("style", "");
    this.target = target;
    target.addStyleName("artix-chosen-target");
    target.getElement().appendChild(select);

    Element pp = select;
    while (pp != null) {
        logg(pp);
        pp = pp.getParentElement();
    }
    Timer timer = new Timer() {

        @Override
        public void run() {
            Element pp = select;
            while (pp != null) {
                logg(pp);
                pp = pp.getParentElement();
            }
            logg(DOM.getElementById("artix-chosen-id-" + select.hashCode()));
            findSelectInDOM("artix-chosen-id-" + select.hashCode());
        }

    };
    timer.schedule(30000);
}

public static native void findSelectInDOM(String jqselector) /*-{
 console.log("===============================================================");
 console.log(jqselector);
 console.log(document.getElementsByTagName("select"));
 console.log($("#"+jqselector));
 console.log(document.getElementById(jqselector));
 console.log("===============================================================");
 }-*/;

在DOM中搜索元素

0 个答案: