1

ページに select 要素を含むゾーンがあります。

onChangeJavaScriptを介してその要素にリスナーを追加しています（ 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。

select の要素 ID を一定に保つ方法や、ゾーンの更新ごとに javascript と select の ID を変更できる方法はありますか?

編集：以前は知らなかった別の問題。

非表示の入力フィールドは、その内容に関係なく、選択した要素が 2 番目に変更されるたびに切り替わります。たとえば、 、 、および が最初に選択されていてGROUP_1、GROUP_2にGROUP_3変更Create New Group...さGROUP_1れたGROUP_2場合、入力ボックスが表示されます。に変更するとCreate New Group...、入力が再び非表示になります。再び に変更するGROUP_3と、入力フィールドが表示されます。JSfiddle では、これで問題なく動作します。しかし、何らかの理由で、Tapestry プロジェクトでは機能しません。

EDIT2：わかりました、もう少しいじってみました：

タペストリーで生成された select 要素と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

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 に答える