Worked perfectly thanks. I'm also happy I finally got see see an example of the addCallBack usage :) I don't recall ever seeing it on Jumpstart, but might not be a bad example to add.
On Wed, Apr 9, 2014 at 8:53 AM, George Christman <[email protected]>wrote: > Thanks Geoff, your absolutely correct. I think this is a more ideal > solution. > > > On Tue, Apr 8, 2014 at 8:00 PM, Geoff Callender < > [email protected]> 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 >> >> > > > -- > George Christman > www.CarDaddy.com > P.O. Box 735 > Johnstown, New York > > -- George Christman www.CarDaddy.com P.O. Box 735 Johnstown, New York
