2

JQueryからスピナーコンポーネントの上下ボタンのonclickイベントをキャプチャするにはどうすればよいですか?

次のコードを使用して、関連するテキスト フィールドの onchange をキャプチャできますが、上下のスピナー ボタンがイベントをトリガーしません。

                Spinner<Integer> psbBudget = new Spinner<>("psbBudget", new PropertyModel(psb,"psbBudget"), Integer.class);
                psbBudget.add(new AjaxFormComponentUpdatingBehavior("onchange") {
                    @Override
                    protected void onUpdate(AjaxRequestTarget art) {
                        Integer inputS = (Integer) getFormComponent().getConvertedInput();
                        BigDecimal spinnerTime = BigDecimal.valueOf(inputS);
                        unallocatedTimeMap.put(psb, unallocatedTimeMap.get(psb).subtract(spinnerTime));
                        art.add(budgetListViewContainer);
                    }
                });
                listItem.add(psbBudget);

                li.add(new Label("remainingBudgetLabel", new Model(unallocatedTimeMap.get(psb))));

予算項目の数が可変であるため、このスピナーは ListView に含まれています。テキスト フィールド内で行われた変更を反映するために、remainingBudgetLabel を取得していますが、スピナー ボタンを使用して行われた変更は反映されていません。

次の行を使用して、独自の JavaScript を挿入することを検討し始めました。

        // behavior to capture changes made using spinner buttons (doesn't work!!!)
        add(new Behavior() {
            @Override
            public void renderHead(Component component, IHeaderResponse response) {
                super.renderHead(component, response);
                response.render(OnDomReadyHeaderItem.forScript("$('.ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only').click(function() {$(this).siblings('input').change();})"));
            }
        });

宣言された html の関連セクションは次のとおりです。

                                <table>
                                    <tr>
                                        <td/>
                                        <th>Budget</th>
                                        <th>Remaining</th>
                                    </tr>
                                    <tr wicket:id="budgetListView">
                                        <th wicket:id="budgetLabel">Budget
                                        </th><td><input wicket:id="psbBudget" type="text" style="width:3em" maxLength="2"/>
                                        </td><td wicket:id="remainingBudgetLabel"/>
                                    </tr>
                                </table>

したがって、これは 2 つの部分からなる質問だと思います: 1 - この JavaScript インジェクションが機能する見込みはありますか (私は JavaScript で足を濡らしているだけです)、または Wicket 内でこれをより正しく行う方法はありますか? 2 - JavaScript が唯一の方法である場合、生成された jquery の id 属性を制御できない場合、どのように要素を正しく見つけることができますか (または、何らかの方法で制御できますか?)。

wicket 6.6.0 で wicket-jquery-ui 6.2.1 ライブラリを使用しています。ありがとうございました。

編集

以前に投稿した生成された html (現在は削除されています) は、右クリックして viewSource を選択したものですが、jquery から実際に生成された html は表示されません。IE9 の F12 開発者ツールのスクリーンショットについては、以下を参照してください。スピナー用に生成された HTML には、元のタグとスピナー ボタン用に<input>生成された 2 つのタグが含まれています。<a>

ここに画像の説明を入力

4

2 に答える 2

2

たまたまこの投稿を見た...

他に2つのオプションがあったと言うだけです：

1/ 拡張スピナーを所有している:


@Override
protected void onConfigure(JQueryBehavior behavior)
{
    super.onConfigure(behavior);

    behavior.setOption("onspinstop", this.onStopBehavior.getCallbackFunction());
    //onStopBehavior is an JQueryAjaxPostBehavior, see how AjaxDatePicker works for instance
}

2 番目のオプションはAjaxSpinner、github プロジェクトまたは Google グループ (
https://github.com/sebfz1/wicket-jquery-ui/
http://groups.google.com/ ) を通じて意味があるため、 を要求することです。グループ/ウィケット-jquery-ui/

よろしく、セバスチャン。

于 2013-04-10T20:58:16.883 に答える
0

私自身の質問に答えたくないのと同じくらい、ここにあります：

次のコードでイベントをキャプチャできました。「onchange」は、誰かがフィールドに手動で数値を入力したときにイベントをキャプチャし、「onspinstop」は、上/下矢印をクリックしてコンポーネントが更新された後にイベントをキャプチャします。

Spinner<Integer> psbBudget = new Spinner<>("psbBudget", new Model(allocatedTimeMap.get(psb)), Integer.class);
psbBudget.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    @Override
    protected void onUpdate(AjaxRequestTarget art) {
        Integer input = (Integer) getFormComponent().getConvertedInput();
        // Do whatever with updated input //
        art.add(remainingBudgetLabel,remainingBudgetLabel.getMarkupId());
    }
}
psbBudget.add(new AjaxFormComponentUpdatingBehavior("onspinstop") {
    @Override
    protected void onUpdate(AjaxRequestTarget art) {
        Integer input = (Integer) getFormComponent().getConvertedInput();
        // Do whatever with updated input //
        art.add(remainingBudgetLabel,remainingBudgetLabel.getMarkupId());
    }
}

JQuery UI Spinner コンポーネントの API ドキュメントを見て、イベント文字列のすべての可能な組み合わせを試した後、これを理解することができました。これを正しく行うには、文字列をすべて小文字にし、イベント名の先頭に「on」文字列を追加する必要があります。

この演習でさらに学んだことの 1 つは、art.add(component, component.getMarkupId());. これは、私が以前に行っていたものよりもはるかに優れておりlistView.setList(updatedList)、art.add(listViewContainer);

于 2013-04-05T17:06:23.350 に答える