Tapestry 5，jQuery UI对话框和关闭动作

Question

使用tapestry5-jquery和Dialog组件，如何为父对话框实现关闭动作？ 我的意思是执行一些代码然后关闭父对话框而不更改页面的按钮。

这是我正在做的唯一的javascript版本：

<div id="container">
  ¿Are you sure to delete selected items?
</div>

$('#container').dialog({
  modal : true,
  buttons:[{
     text: "Yes",
     click: function() {
        //Perform action here, then close dialog.
        $(this).dialog("close");
     }
    },{
     text: "No",
     click: function() {
        //Only close dialog
        $(this).dialog("close");
     }
    }
  }]
});

但是我需要使用Tapestry 5标签和Java类方法：

<t:jquery.dialog t:clientId="delDialog">
  ¿Are you sure to delete selected items?
  <input t:type="submit" t:id="delYes" value="Yes"/>
  <input t:type="submit" t:id="delNo" value="No"/>
</t:jquery.dialog>

Java类：

public class UserAdmin { 
  @OnEvent(component = "delYes", value = EventConstants.SELECTED)
  void delYesClicked(){
     //Delete selected items
  }

  @OnEvent(component = "delNo", value = EventConstants.SELECTED)
  void delNoClicked(){
     //Close dialog
  }
}

谢谢。

Answer 1

如果clientId始终相同，则可以执行以下操作（即“ delDialog”）

@Inject
private AjaxResponseRenderer ajaxResponseRenderer;

protected void addCloseDialogCommand() {

    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {

        @Override
        public void run(JavaScriptSupport javascriptSupport) {

            javascriptSupport.addScript("$('#delDialog').dialog('close');");
        }
    });
}

...并在事件处理程序中调用方法：

@OnEvent(component = "delNo", value = EventConstants.SELECTED)
void delNoClicked() {
    addCloseDialogCommand();
}

可以通过将混合应用于您想要的任何元素来实现此行为。

Answer 2

建议的混合：

public class DialogButtonHandler {
  @Parameter(value = "dlgId", defaultPrefix = BindingConstants.LITERAL)
  private String dlgId;

  @Inject
  private JavaScriptSupport javaScriptSupport;

  @InjectContainer
  private ClientElement element;

  @AfterRender
  public void afterRender() {
    javaScriptSupport.addScript(
      "$('#%s').click(function(){$('#%s').dialog('close');});",
          element.getClientId(), dlgId);
  }}

标记：

<t:jquery.dialog t:clientId="delDialog">
    ¿Are you sure to delete selected items?
    <input t:type="submit" t:id="delYes" value="Yes" />
    <input t:type="submit" t:id="delNo" value="No" t:mixins="dialogButtonHandler" t:dlgId="delDialog"/>
</t:jquery.dialog>