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"); 
    } 
    } 
    }] 
}); 

しかし、私はタペストリーを使用する必要が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(); 
} 

このビヘイビアは、必要な要素に適用するミックスインを使用して実装できます。