And you'll need hide-modal.js:
define(["jquery", "bootstrap/modal"], function($) {
// Hides a modal.
return function(modalId) {
var $modal = $('#' + modalId);
if ($modal.length > 0) {
$modal.modal('hide');
}
else {
// The modal's already gone, but the backdrop may still
be there.
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
}
});
On 09/04/2014, at 10:00 AM, Geoff Callender wrote:
> 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
>
