キャンセルのときのみセレクトボックスの値を戻す

Wicketでセレクトボックスが変更されたときに確認ダイアログを表示して、「キャンセル」がクリックされたときには、自動的に元の状態を自動的に復元したいです。
タイマーを使って、保持している値を再設定することで実現はできましたが、この方法は問題があります。

・タイマーの更新時にユーザーがセレクトボックスを変更しようとすると、ユーザー操作を妨害します。
・このセレクトボックスインスタンスを大量に使うので、重い。

何か良い代替案はないか、皆様の知恵をお借りしたいです。

HTML
1<!DOCTYPE html>
2<html xmlns:wicket="http://wicket.apache.org">
3<wicket:panel>
4			<tr wicket:id="indicatingRow">
5					<select class="indicatingStatus" wicket:id="indicatingStatus">
6						<option value="none"></option>
7						<option value="underModification">対処中</option>
8						<option value="modified">対処済</option>
9						<option value="underVerification">確認中</option>
10						<option value="suspended">保留</option>
11						<option value="completed">完了</option>
12					</select>
13				</td>
14			</tr>
15</wicket:panel>
16</html>

Java
1// IndicationBean
2    public enum Status {
3		none(""),
4		underModification("対処中"),
5		modified("対処済"),
6		underVerification("確認中"),
7		suspended("保留"),
8		completed("完了");
9
10		private String text = "";
11		private Status(String text) {
12	    	this.text = text;
13		}
14		public String getText() {
15	    	return text;
16		}
17		public String getName() {
18	    	return name();
19		}
20		@Override
21		public String toString() {
22	    	return (this == none ? "none" : getText());
23		}
24    }
25
26    public static final ArrayList<Status> INDICATING_STATUSES = new ArrayList<Status>() {{
27		add(Status.none);
28		add(Status.underModification);
29		add(Status.modified);
30		add(Status.underVerification);
31		add(Status.suspended);
32		add(Status.completed);
33    }};

Java
1    DropDownChoice<IndicationBean.Status> statusChoice =
2		new DropDownChoice<IndicationBean.Status>("indicatingStatus",
3		Model.of(bean.getStatus()),
4		IndicationBean.INDICATING_STATUSES,
5		new ChoiceRenderer<IndicationBean.Status>("text", "name"));
6	indicatingRow.add(statusChoice.setOutputMarkupId(true));
7
8	statusChoice.add(new AjaxFormComponentUpdatingBehavior("change") {
9		@Override
10		protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
11			AjaxCallListener callListener = new AjaxCallListener();
12			callListener.onPrecondition("return confirm('ステータスを更新しますか？');");
13			attributes.getAjaxCallListeners().add(callListener);
14			super.updateAjaxAttributes(attributes);
15	    }
16
17	    @Override
18	    protected void onUpdate(AjaxRequestTarget target) {
19			IndicationBean.Status status = statusChoice.getModelObject();
20			log.info("statusChoice:change IndicatingStatus={}({})", status, status.ordinal());
21			bean.setStatus(status);
22		}
23	});
24
25	statusChoice.add(new AbstractAjaxTimerBehavior(Duration.seconds(10)) {
26	    @Override
27	    protected void onTimer(AjaxRequestTarget target) {
28			log.trace("statusChoice:onTimer");
29			// 「ステータス」セレクトボックスの更新が「キャンセル」されたとき、元に戻す。
30			IndicationBean.Status status = bean.getStatus();
31			statusChoice.setModelObject(status);
32
33			target.add(statusChoice);
34	    }
35	});

行動規範の内容に同意します

回答2件

javascript
1
2const M = new Map;
3
4function hoge ({type, target: e}) {
5  switch (type) {
6  case 'focus' :
7    if ('classList' in e)
8      if (e.classList.contains ('indicatingStatus'))
9        M.set (e, e.value);
10    break;
11  
12  case 'change' :
13    confirm ('変更してもOK?')
14    ? M.set (e, e.value)
15    : e.value = M.get (e);
16    break;
17  }  
18}
19
20document.addEventListener ('focus', hoge, false);
21document.addEventListener ('change', hoge, true);
22

投稿2019/05/08 20:51

退会済みユーザー

総合スコア0

naomi3

2019/05/10 13:02

おかげで回答を導けました。ありがとうございました。

行動規範の内容に同意します

自己解決

hai_haiさんのfocusとchangeイベントを使うご回答から、changeとblurイベントを使って、保存してある状態を戻す方法を思いつき、正しく動作しました。hai_haiさんありがとうございました。

Java
1	statusChoice.add(new AjaxFormComponentUpdatingBehavior("blur") {
2		@Override
3		protected void onUpdate(AjaxRequestTarget target) {
4			log.info("statusChoice#{}:blur", bean.getNo());
5			// 「ステータス」セレクトボックスの更新が「キャンセル」されたとき、元に戻す。
6			IndicationBean.Status status = bean.getStatus();
7			statusChoice.setModelObject(status);
8
9			target.add(statusChoice);
10	    }
11	});