0

私のウィケットアプリケーションでは、フォームに3つのチェックボックスがあります:

        add(new CheckBox("1").setOutputMarkupId(true));
        add(new CheckBox("2").setOutputMarkupId(true));
        add(new CheckBox("3").setOutputMarkupId(true));

フォームには、チェックボックスの選択を解除する動作も含まれています

        add(new AjaxEventBehavior("onclick") {

            private static final long serialVersionUID = 1L;

            @Override
            protected void onEvent(AjaxRequestTarget target) {

                List<Component> components = new ArrayList<Component>();

                if (target.getLastFocusedElementId() != null) {
                    if (target.getLastFocusedElementId().equals("1")) {
                        components.add(get("2"));
                        components.add(get("3"));
                    } else if (target.getLastFocusedElementId().equals("2")) {
                        components.add(get("1"));
                    } else if (target.getLastFocusedElementId().equals("3")) {
                        components.add(get("1"));
                    }
                    for (Component component : components) {
                        component.setDefaultModelObject(null);
                        target.add(component);
                    }
                }
            }
        });

これは mozilla ブラウザーではうまく機能しますが、chrome では機能しません。これをクロムでも動作させるにはどうすれば改善できますか?

アップデート

問題は次のとおりです。

target.getLastFocusedElementId()

mozillaではこれは私が望むものを返しますが、クロムでは常にnullを返しますが、なぜかわからない

更新 2

Google Chrome にはフォーカス要素にバグがあります:

http://code.google.com/p/chromium/issues/detail?id=1383&can=1&q=window.focus%20type%3aBug&colspec=ID%20Stars%20Pri%20Area%20Type%20Status%20Summary%20Modified%20Owner

だから私は他の方法でこれを行う必要があります

4

2 に答える 2

1

クライアント側のソリューション (Javascript)

クライアント側でその動作をコーディングすることで、Ajax 呼び出しを保存し、応答性を高めることができます。最も単純なシナリオでは、これらのチェックボックスに固定の「id」属性を与えることができれば、チェックの値Component.setMarkupId()を強制するために使用できidます (DOM 内で一意であることを確認してください)。

ジャワ

add(new CheckBox("1").setOutputMarkupId(true).setMarkupId("check1");
add(new CheckBox("2").setOutputMarkupId(true).setMarkupId("check2");
add(new CheckBox("3").setOutputMarkupId(true).setMarkupId("check3");

HTML

<input type="checkbox" wicket:id="1" onclick="uncheck(this,1)"/>
<input type="checkbox" wicket:id="2" onclick="uncheck(this,2)"/>
<input type="checkbox" wicket:id="3" onclick="uncheck(this,3)"/>

Javascript

function uncheck(comp, idx){
   if (comp.checked) { 
       if (idx == 1){
           document.getElementById("check2").checked = false;
           document.getElementById("check3").checked = false;
       }
       else if (idx == 2 || idx == 3){
           document.getElementById("check1").checked = false;             
       } 
   }
}     ​

Java のみのソリューション (Ajax)

本当にこれをサーバー側で行いたい場合は、たとえばAjaxFormComponentUpdatingBehavior.

        final CheckBox c1 = new CheckBox("on");
        final CheckBox c2 = new CheckBox("off");
        c1.setOutputMarkupId(true);
        c2.setOutputMarkupId(true);

        c1.add(new AjaxFormComponentUpdatingBehavior("onclick") {

            private static final long serialVersionUID = 1L;

            protected void onUpdate(final AjaxRequestTarget target) {
                if (Boolean.TRUE.equals(c1.getModelObject())) {
                    c2.setModelObject(Boolean.FALSE);
                    target.add(c2);
                }
            }
        });

        c2.add(new AjaxFormComponentUpdatingBehavior("onclick") {

            private static final long serialVersionUID = 1L;

            protected void onUpdate(final AjaxRequestTarget target) {
                if (Boolean.TRUE.equals(c2.getModelObject())) {
                    c1.setModelObject(Boolean.FALSE);
                    target.add(c1);
                }
            }
        });

        add(c1);
        add(c2);

この制約がデータ モデルの整合性にとって重要である場合は、FormValidator無効な入力が の に到達しないようFormに、 にも実装する必要がありますModel。JS を有効にしていないユーザーや DOM をいじるだけのユーザーは、それを回避できます (Ajax 動作を使用する場合も同じことが当てはまります)。

于 2012-09-17T14:21:01.227 に答える
0

この動作をチェックボックスに追加すると、フォーカスのあるクロムのバグを修正します。

public class DefaultFocusBehavior extends AjaxEventBehavior {

public DefaultFocusBehavior(String event) {
    super(event);
}

private static final long serialVersionUID = 1;

private Component component;

@Override
protected void onEvent(AjaxRequestTarget target) {
    target.appendJavaScript(("document.getElementById('" + component.getMarkupId() + "').blur();"
            + "document.getElementById('" + component.getMarkupId() + "').focus();"));

}

protected void onBind() {
    this.component = getComponent();
    component.setOutputMarkupId(true);
}

}

だから今、私のコードはクロムでも動作しています

于 2012-09-19T09:35:53.907 に答える