Hi George,
Writing the modal with Tapestry can go something like this (none of this has
been tested)... (It builds on the work at
http://readyareyou.blogspot.com.au/2012/11/tapestry5-bootstrap-modal-dialog.html)
Create a component that does its work in a modal. Eg. "PersonCreateModal".
<t:content>
<div id="${clientId}" class="modal my-modal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">${title}</h3>
</div>
<div class="modal-body">
<t:PersonCreate t:id="creater"
someParentId="someParentId"/>
</div>
<div class="modal-footer">
<button class="btn btn-default"
data-dismiss="modal" aria-hidden="true">${message:cancel-label}</button>
</div>
</div>
</div>
</div>
</t:content>
Of course you may prefer to tailor the content, eg. leave out the header and
footer and fill the whole modal with whatever's in PersonCreate.
Notice that PersonCreate is a normal component doing a normal job, unaware that
it is in a modal. It can handle Ajax eventLinks and Submits and return zones as
it normally would, without the modal knowing anything about it. When
PersonCreate succeeds, it can bubble up an event (eg. MyConstants.CREATED) for
PersonCreateModal to respond to.
@Events({ MyConstants.CREATED })
public class PersonCreateModal implements ClientElement {
// Parameters
@Parameter(required = true)
@Property
private Integer someParentId;
@Parameter(value = "prop:componentResources.id", defaultPrefix =
BindingConstants.LITERAL)
private String clientId;
// Generally useful bits and pieces
@Inject
private JavaScriptSupport javaScriptSupport;
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
// The code
@Override
public String getClientId() {
return clientId;
}
void afterRender() {
javaScriptSupport.require("activate-modal").with(getClientId(),
new JSONObject());
}
Object onCreatedFromCreater(Person person) {
ajaxResponseRenderer.addCallback(makeScriptToHideModal());
return triggerEventAndReturnResult(MyConstants.CREATED, new
Object[] { person });
}
private JavaScriptCallback makeScriptToHideModal() {
return new JavaScriptCallback() {
public void run(JavaScriptSupport javascriptSupport) {
javascriptSupport.require("hide-modal").with(getClientId());
}
};
}
}
Here's activate-modal...
define(["jquery", "bootstrap/modal"], function($) {
// Activates a modal.
return function(modalId, options) {
$('#' + modalId).modal(options);
};
});
Here's hide-modal...
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();
}
}
});
Then put PersonCreateModal in a page or component...
<t:zone t:id="modalsZone" id="myPageModalsZone">
<t:if test="isFunction('crt_person')">
<t:PersonCreateModal t:id="crtPerson"
someParentId="someParentId"/>
</t:if>
<t:if test="isFunction(... etc ...
</t:zone>
Of course, you may also find a generic modal useful, built around a <t:body/>,
eg.
<t:content>
<div id="${clientId}" class="modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">${title}</h3>
</div>
<div class="modal-body">
<t:body/>
</div>
<div class="modal-footer">
<button class="btn btn-default"
data-dismiss="modal" aria-hidden="true">${message:cancel-label}</button>
</div>
</div>
</div>
</div>
</t:content>
HTH,
Geoff
On 11/03/2014, at 11:56 PM, George Christman wrote:
> Hi guys, if there is a better way to do it, I'm all ears. I wasn't aware of
> a way to use zones inside of a js module. Here is a code snippet of what
> I'm trying to accomplish. As you can see I'm using pure js, "may be
> alternate solutions", and I'm trying to inject content into my bootstrap
> modal component via ajax. This would be accomplish once the dialog box has
> been opened and the user clicks the dialog submit action. This wouldn't
> submit the form but rather perform an ajax request returning content.
> Another thought that comes to mind is to maybe write the html in tapestry
> rather than js so that I can take advantage of tapestries zone's. Either
> way with js becoming so popular, I'd like to understand the cores of ajax
> request with tapestry so that I always have that option at my disposal.
>
> define(["jquery", "bootstrap/modal"], function($) {
>
> var runDialog;
>
> runDialog = function(spec) {
>
> var $dialog = $("<div class=\"modal fade\" role=\"dialog\">\n\
> <div class=\"modal-dialog\">\n\
> <div class=\"modal-content\">\n\
> <div class=\"modal-header\">\n\
> <a class=\"close\"
> data-dismiss=\"modal\">×</a>\n\
> <h3>Review Warning</h3>\n\
> </div>\n\
> <div class=\"modal-body\"></div>\n\
> <div class=\"modal-footer\">\n\
> </div>\n\
> </div>\n\
> </div>\n\
> </div>")
> .appendTo($("body"));
>
> $(".modal-footer").append("<button class=\"btn
> btn-warning\">Continue</button>\n\
> <button class=\"btn btn-default\"
> data-dismiss=\"modal\">Cancel</button>");
>
> $dialog.on("click", ".modal-footer button:first",
> function() {
> //ajax request to tapestry requesting
> modal-body content.
> });
>
> $dialog.modal();
> };
>
> return runDialog;
> });
>
> Like always, thanks guys.
>
>
> On Tue, Mar 11, 2014 at 4:12 AM, Geoff Callender <
> geoff.callender.jumpst...@gmail.com> wrote:
>
>> I share Lance's preference for generating markup server-side. Have you
>> considered putting a Zone in the modal and having the server-side return
>> that instead of a JSONObject?
>>
>>
>> On 11/03/2014, at 7:24 AM, Lance Java wrote:
>>
>>> I'm not entirely sure what you're doing but this might help.
>>>
>>> http://tapestry-stitch.uklance.cloudbees.net/capturedemo
>>>
>>> As you can see, I render a block in an AJAX action and call alert(...).
>> You
>>> could do anything you like with the rendered markup.
>>>
>>> Note: I hate rendering dom in javascript and always prefer rendering my
>>> markup serverside. I'm bucking the trend a bit here.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
>> For additional commands, e-mail: users-h...@tapestry.apache.org
>>
>>
>
>
> --
> George Christman
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
On 11/03/2014, at 11:56 PM, George Christman wrote:
> Hi guys, if there is a better way to do it, I'm all ears. I wasn't aware of
> a way to use zones inside of a js module. Here is a code snippet of what
> I'm trying to accomplish. As you can see I'm using pure js, "may be
> alternate solutions", and I'm trying to inject content into my bootstrap
> modal component via ajax. This would be accomplish once the dialog box has
> been opened and the user clicks the dialog submit action. This wouldn't
> submit the form but rather perform an ajax request returning content.
> Another thought that comes to mind is to maybe write the html in tapestry
> rather than js so that I can take advantage of tapestries zone's. Either
> way with js becoming so popular, I'd like to understand the cores of ajax
> request with tapestry so that I always have that option at my disposal.
>
> define(["jquery", "bootstrap/modal"], function($) {
>
> var runDialog;
>
> runDialog = function(spec) {
>
> var $dialog = $("<div class=\"modal fade\" role=\"dialog\">\n\
> <div class=\"modal-dialog\">\n\
> <div class=\"modal-content\">\n\
> <div class=\"modal-header\">\n\
> <a class=\"close\"
> data-dismiss=\"modal\">×</a>\n\
> <h3>Review Warning</h3>\n\
> </div>\n\
> <div class=\"modal-body\"></div>\n\
> <div class=\"modal-footer\">\n\
> </div>\n\
> </div>\n\
> </div>\n\
> </div>")
> .appendTo($("body"));
>
> $(".modal-footer").append("<button class=\"btn
> btn-warning\">Continue</button>\n\
> <button class=\"btn btn-default\"
> data-dismiss=\"modal\">Cancel</button>");
>
> $dialog.on("click", ".modal-footer button:first",
> function() {
> //ajax request to tapestry requesting
> modal-body content.
> });
>
> $dialog.modal();
> };
>
> return runDialog;
> });
>
> Like always, thanks guys.
>
>
> On Tue, Mar 11, 2014 at 4:12 AM, Geoff Callender <
> geoff.callender.jumpst...@gmail.com> wrote:
>
>> I share Lance's preference for generating markup server-side. Have you
>> considered putting a Zone in the modal and having the server-side return
>> that instead of a JSONObject?
>>
>>
>> On 11/03/2014, at 7:24 AM, Lance Java wrote:
>>
>>> I'm not entirely sure what you're doing but this might help.
>>>
>>> http://tapestry-stitch.uklance.cloudbees.net/capturedemo
>>>
>>> As you can see, I render a block in an AJAX action and call alert(...).
>> You
>>> could do anything you like with the rendered markup.
>>>
>>> Note: I hate rendering dom in javascript and always prefer rendering my
>>> markup serverside. I'm bucking the trend a bit here.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
>> For additional commands, e-mail: users-h...@tapestry.apache.org
>>
>>
>
>
> --
> George Christman
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
