Hi Steve, I wrote an overlay component using JQuery which does just
that... in fact you can choose whether the block is rendered initially
or as a result of an AJAX request if you want to delay the evaluation of
what is in the overlay.
You don't need any JSON magic, you just render the block from the
component in a hidden div and expose it from Javascript in your event
handler.
Most of the work for my component was supporting both modes, but it goes
something like the below. If you omit the body parameter, you must
provide an event handler in your page which returns the block to render
on the AJAX call.
IMHO it's pretty elegant... and shows how easy it is to do clever
AJAX/rendering tricks in T5. I can't imagine a framework making it much
easier than this ;-)
Reading the original post am not sure this answers it, but does meet
your objective I think.
Hope it helps,
Alfie.
page.tml
<t:overlay t:id="o" body="popup">Click Me</t:overlay>
<t:block id="popup">This is my overlay block</t:block>
overlay.java
@Parameter
private Object body; // the block to render if immediate (non-AJAX)
@SetupRender
public void setup() {
// allocate the ids we will need
overlayClientId = renderSupport.allocateClientId("overlay");
linkClientId = renderSupport.allocateClientId("overlayLink");
}
@BeginRender
public Object begin(MarkupWriter writer) {
// we render in two phases... the first is the link and the
second
// is the overlay div itself
if (renderOverlayDivPhase) {
writer.element("div", "class", "overlay", "id",
overlayClientId);
if ( body == null ) { // ajax style
String innerId =
renderSupport.allocateClientId("overlayInnerDiv");
// render an inner div where we'll attach the zone for
update
writer.element("div", "id", innerId);
writer.end();
clientBehaviorSupport.addZone(innerId, "show", "show");
// create the dynamic update link
Link link =
resources.createEventLink(EventConstants.ACTION, context);
// ... and link the onclick to the zone via the update
link
clientBehaviorSupport.linkZone(linkClientId, innerId,
link);
return false; // do not render body
}
// a body is supplied so render it
return body;
} else { // just render the link
writer.element("a", "href", "#", "id", linkClientId);
renderSupport.addInit("overlayLoad", overlayClientId,
linkClientId, expose ? exposeColour : "none");
return null; // render the link text (component body)
}
}
@BeforeRenderBody
public boolean body() {
// only render the default body if it's the link phase
return !renderOverlayDivPhase;
}
@AfterRender
public boolean after(MarkupWriter writer) {
writer.end();
if ( !renderOverlayDivPhase) {
renderOverlayDivPhase=true;
return false;
}
return true;
}
overlay.js
Tapestry.Initializer.overlayLoad = function(overlayId, linkId,
exposeColour) {
var overlay=jQuery(document.getElementById(overlayId));
var link=jQuery(document.getElementById(linkId));
var expose=(exposeColour != 'none');
jQuery(function() {
overlay.overlay({
onBeforeLoad: function() {
if ( expose ) {
this.getBackgroundImage().expose({color:
exposeColour});
}
},
onClose: function() {
jQuery.expose.close();
},
speed: 'fast',
fadeInSpeed: 'fast'
});
link.click(function(event) {
overlay.overlay().load();
Event.stop(event);
});
});
};
-----Original Message-----
From: Stephen Cowx [mailto:steve.c...@gmail.com]
Sent: 18 June 2009 09:20
To: Tapestry users
Cc: users@tapestry.apache.org
Subject: Re: How to render a page as JSON-formatted AJAX response?
I also have an interest in this.
I would like a way of pre-rendering a Block on the server (as if it
was rendered by an Ajax request handler), storing the rendered block
as a JS variable in the page HTML and then injecting it into the DOM
client side when it suits me. I don't want to have to make a new trip
to the server to fetch the block via Ajax this is just a means of
allowing a developer of parameterising his use of my overlay component.
As far as I can tell this requires two things:
1) a way of invoking the Ajax renderer programmatically on the server.
2) a way of invoking the Tapestry.init() function on the client with
the pre-generated response which is stored in a javascript variable as
an argument (similar to the updateFromUrl() function but with a client
side variable instead). This will ensure that the content gets loaded
into the client properly.
Steve
On 17 Jun 2009, at 21:42, Renger Wilde <busanalys...@yahoo.com> wrote:
>
> On my client, I have a tabview.
>
> When the user navigates to one of the tabs on the tabview, I trigger
> an AJAX
> request to obtain the content of that tab. The AJAX request is sent
> to a
> Tapestry component event handler.
>
> I want that event handler to invoke some other page or component,
> and cause
> the rendered output of that other page/component to be captured into a
> JSON-array, and sent back to the client as the reply to the AJAX
> request.
>
> What is the best way to do this?
>
> thanks.
>
> Renger
>
>
> --
> View this message in context:
http://www.nabble.com/How-to-render-a-page-as-JSON-formatted-AJAX-respon
se--tp24081692p24081692.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
> For additional commands, e-mail: users-h...@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
