掛毯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

建議混入：

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> 

Answer 2

你可以做這樣的事情，如果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(); 
} 

這行爲可以通過使用您所需的任何元素的混合來實現。