Is it wise to have the client-side close the modal before the server-side has
handled the submit? What if there's an error?
If you're happy to wait until onSuccess() server-side, then here's how I do
it...
Move your afterRender() stuff into ModalContainer and add a hide() method...
public class ModalContainer implements ClientElement {
// Parameters
@Parameter(name = "componentClientId", value =
"prop:componentResources.id", defaultPrefix = BindingConstants.LITERAL)
private String componentClientId;
// Generally useful bits and pieces
@Inject
private JavaScriptSupport javaScriptSupport;
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
// The code
@Override
public String getClientId() {
return componentClientId;
}
void afterRender() {
javaScriptSupport.require("activate-modal").with(componentClientId, new
JSONObject());
}
public void hide() {
ajaxResponseRenderer.addCallback(makeScriptToHideModal());
}
private JavaScriptCallback makeScriptToHideModal() {
return new JavaScriptCallback() {
public void run(JavaScriptSupport javascriptSupport) {
javascriptSupport.require("hide-modal").with(componentClientId);
}
};
}
}
...then change the third line of your tml to this...
<t:modalContainer t:id="dailyCommentModal">
...and in the associated java do something like this...
@InjectComponent
private ModalContainer dailyCommentModal;
void onSuccessFromTheBodyIGaveToModalContainer() {
dailyCommentModal.hide();
// etc.
}
Geoff
On 09/04/2014, at 2:04 AM, George Christman wrote:
> Hi guys, I'm using the bootstrap modal component and I have a tapestry ajax
> form nested within it. When I submit the form I'm looking to close out the
> modal dialog box assuming no clientside validation errors ocure long with
> the backdrop. I have it working with the exception of closing out the
> backdrop. Does anybody know how to achieve this?
>
> The code.
>
> <div t:type="zone" t:id="dailyCommentZone" id="dailyCommentZone">
> <t:if test="hasDailyComments">
> <t:modalContainer clientId="dailyCommentModal">
> <t:form t:id="formDailyComment" zone="dailyCommentZone">
> <div class="modal-content">
> <div class="modal-header">
> <a class="close" data-dismiss="modal">x</a>
> <h4 class="modal-title">${dailyCommentTitle}
> Daily Comment</h4>
> </div>
> <div class="modal-body">
> <t:textarea t:id="dailyComment"
> value="dailyCommentText" validate="required"/>
> </div>
> <div class="modal-footer">
> <button type="button" class="btn btn-default"
> data-dismiss="modal">Close</button>
> <t:submit t:id="dailyCommentSubmit" value="Add
> Comment" class="btn btn-success dailyCommentSubmit"/>
> </div>
> </div>
> </t:form>
> </t:modalContainer >
> </t:if>
> </div>
>
>
> ModalContainer.tml
>
> <div id="${clientId}" class="modal fade" role="dialog" xmlns:t="
> http://tapestry.apache.org/schema/tapestry_5_3.xsd";
> xmlns:p="tapestry:parameter">
> <div class="modal-dialog">
> <t:body/>
> </div>
> </div>
>
>
> @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
> @Property
> private String clientId;
>
> public void afterRender() {
> JSONObject json = new JSONObject("id", clientId);
> javaScriptSupport.require("warning-modal").with(json);
> }
>
>
> define(["jquery", "bootstrap/modal"], function($) {
>
> runDialog = function(spec) {
>
> $("#" + spec.id).modal();
>
> };
> return runDialog;
> });
> --
> George Christman
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
