Question

Using tapestry5-jquery and Dialog component, ¿How do I implement a close action for the parent dialog?. I mean a button that executes some code and then close parent dialog without changing of page.

This is the javascript only version of what I’m doing:

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

But I need to use Tapestry 5 tags and java class methods:

<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 class:

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

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

Thanks.

Answer 1

Suggested mixin:

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

Markup:

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