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-response--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
RE: How to render a page as JSON-formatted AJAX response?
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=popupClick Me/t:overlay
t:block id=popupThis 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
Re: How to render a page as JSON-formatted AJAX response?
DH-14: Yes, I ended up using a block. For those like me that don't know what a block is, it's an XML-tagged section of your template, demarcated via block id=yourIdentifierHere/block tags. The block can be injected into page or component code using the @Inject annotation as an object of type Block, with a variable name in the form of _yourIdentifierHere. The variable name must match the ID used in the block tag - except for the leading underscore, which is stripped by Tapestry. This Block object can be returned from the event handler, and is rendered prior to being sent back, in JSON form, as the reply to the AJAX request. Surely some of you will ask Why was that not obvious at the outset, Renger?. I can only say that it took me some several re-readings of the documentation to identify the Block method as a potential solution, and a few more to figure out how it worked. There is, to my knowledge, no section of the documentation that sets out what Blocks are, how they work, and what use-cases they pertain to, with the exception of this excerpt from the AJAX section of the Tapestry reference: For an Ajax request, the return value from an event handler method is processed differently than for a traditional action request. In an normal request, the return value is the normally name of a page (to redirect to), or the Class of a page to redirect to, or an instance of a page to redirect to. For an Ajax request, a redirect is not sent: any response is rendered as part of the same request and sent back immediately. The possible return values are: * A Block or Component to render as the response. The response will be a JSON hash, with a content key whose value is the rendered markup. This is the basis for updates with the Zone component. * A JSONObject or JSONArray, which will be sent as the response. * A StreamResponse, which will be sent as the response. I say that merely to justify the bandwidth I took up to ask my question. I remain very appreciative of HLS' work, and I thank the responders for their attention. -- View this message in context: http://www.nabble.com/How-to-render-a-page-as-JSON-formatted-AJAX-response--tp24081692p24091906.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
Re: How to render a page as JSON-formatted AJAX response?
Hi Alfie
It looks like we are doing very similar things. I have chosen to implement
Tapestry versions on the YUi components to I am creating ca component which
will drop out a YUI overlay.
I have done exactly the same as you in that my component accepts a block as
a parameter with the intention of using the block as the overlay body.
Working within the restrictions of the YUI Overlay API I have two options
for rendering.
a) Use Tapestry to render the block into a hidden div in the HTML ()
equivalent to your and then pass the contents of the DIV to YUI at the
appropriate time for rendering as an overlay.
b)
On Thu, Jun 18, 2009 at 12:31 PM, Alfie Kirkpatrick
alfie.kirkpatr...@ioko.com wrote:
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=popupClick Me/t:overlay
t:block id=popupThis 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
Re: How to render a page as JSON-formatted AJAX response?
Oops, please ignore previous email...premature post. Hi Alfie Awesome to hear from you, thanks for your reply. In case you are busy, the short response is, you are on the right track about what I am looking for but I need to go one step further. If you have a few spare minutes and are curious then read on, I am pretty sure you will have some ideas to offer. It looks like we are doing very similar things although I have chosen to implement Tapestry versions of certain YUI components (instead of JQuery). Liek you I am creating a component which will drop out a YUI overlay. - (Please don't be tempted to stray into the JS library choice conversation just yet) I have done exactly the same as you in that my component accepts a block as a parameter with the intention of using the block as the overlay body. I have also added a second option and that is to provide a Link as a parameter instead. The link is used to fetch the contents of the overlay via AJAx when the overlay is shown. Working with these parameters and with the YUI Overlay object I have two options for rendering. a) Use Tapestry to render the block into a hidden div in the HTML (equivalent to your body is supplied mode). When the overlay is shown, pass the contents of the DIV to YUI which puts it into the overlay contents. This works well for simple content but is not able to support tapestry components which require the Tapestry.init() function to run on them such as a zone update(discussed later). b) Alternatively the component will fetch the block of the Overlay via Tapestry AJAX using the link provided as a parameter. It does the fetch after the overlay is shown. I have custom code which creates a zone on the fly and gets the ZoneManager to update it. A temporary loading image is shown while it loads. This method can support any sort of content as the Tapestry ZoneManager invokes the init() for any new content just fetched from the server. This method requires a trip to the server to render the overlay :( Neither of these solutions is ideal and both of them are in fact workarounds for the main issue, which is the following: When YUI creates an overlay, it recreates the overlay DOM elements from scratch in a place of its own choosing in the document (at the very top I think). In order to establish Tapestry onclick(and other) behaviours for all the content of the overlay you need to run the Tapestry init() function for that new portion of the DOM. The only way that I can see that this is possible in the version of Tapestry I have (5.0.18) is to hook into the Tapestry.js partial page rendering functions (Zonemanager). These call the init() function appropriately once they have fetched the response from the server. They appear to use metadata coded into the AJAX response (in JSON format I think) in order to know what to do with the content in the response. Ideally, what I would like to do is render the block passed in to my component as a complete Tapestry Ajax response but in string form I will then embed this in my page (probably as a js var) so that I can pass them into the Tapestry.js partial page rendering functions when the overlay is shown. From there on Tapestry.js will behave as if the content had just come from the server. My Show overlay sequence will look as follows: 1) Block is passed in to component. 2) Component renders block in correct format (lets call it AJAX Response Format) and stores it as a text string in the rendered page (probably by using renderSupport.addScript(). 3) User page is rendered and then they click the button to open the dialog 4) Dialog is rendered and a new Zone is created on the fly 4) AJAX Response Format text string (declared as a variable in the document) is passed into the ZoneManager and tapestry updates the new Zone with the content from the block. Hey presto, perfectly initialised Tapestry overlay all done client side with no trip to the server. I have found the AjaxPartialResponseRenderer in the Tapestry codebase and I had hoped that this would help me but for the life of me I cannot work out how or when to call it or even where it fits in to the Tapestry request pipeline. Frankly I just don't know enough about Tapestry. If you or anyone has any ideas on how I can achieve this I would appreciate it. Despite my earlier comments, I will entertain feedback about different Javascript libraries and I am more than happy to accept ideas out of the left field. Regards Steve On Thu, Jun 18, 2009 at 11:56 PM, Steve Cowx steve.c...@gmail.com wrote: On Thu, Jun 18, 2009 at 12:31 PM, Alfie Kirkpatrick alfie.kirkpatr...@ioko.com wrote: 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
How to render a page as JSON-formatted AJAX response?
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-response--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
Re: How to render a page as JSON-formatted AJAX response?
Isn't the Zone/MultiZoneUpdate/Block way suitable for your case? It is very simple enough to deal with most ajax cases. DH - Original Message - From: Renger Wilde To: users@tapestry.apache.org Sent: Thursday, June 18, 2009 4:42 AM Subject: How to render a page as JSON-formatted AJAX response? 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-response--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
