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 中，因为预算项目的数量是可变的。我得到了剩余预算标签来反映在文本字段中所做的更改，而不是使用微调按钮所做的更改！

我已经开始探索使用以下几行注入我自己的 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>

所以我想这是一个由两部分组成的问题： 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>以及两个<a>为微调器按钮生成的标签。

在此处输入图像描述

4

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
}

第二种选择是AjaxSpinner通过 github 项目或 google 组请求 ，因为这很有意义：
https://github.com/sebfz1/wicket-jquery-ui/
http://groups.google.com/组/wicket-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”字符串添加到事件名称的开头。

我在本练习中学到的另一件事是，我可以通过调用art.add(component, component.getMarkupId());. listView.setList(updatedList)这比我以前做的要好得多art.add(listViewContainer);

于 2013-04-05T17:06:23.350 回答