Below is a working example that illustrates what I was trying to say. Note that colorbox html is a jQuery element with initialized handlers, so no need to convert it to string here. Since we're detaching this element, we don't have any elements copies in dom.
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd";> <head> <script>jQuery.noConflict();</script> </head> <body> <script> function showColorbox() { var $container = jQuery(".container"); var $content = $container.find(".content").detach(); jQuery.colorbox({ html: $content, onClosed: function() { $content.appendTo($container); } }); } </script> <div class="container" style="display: none;"> <div class="content"> <b>Hello</b> <t:zone> ${currentTime} <t:eventlink t:id="refresh" zone="^">Refresh</t:eventlink> </t:zone> </div> </div> <a href="javascript:showColorbox();">Show Colorbox</a> </body> </html> import java.util.Date; import org.apache.tapestry5.annotations.Import; import org.apache.tapestry5.annotations.InjectComponent; import org.apache.tapestry5.corelib.components.Zone; @Import(library={"jquery-1.10.2.js", "jquery.colorbox.js"}) public class Colorbox { public Date getCurrentTime() { return new Date(); } @InjectComponent private Zone zone; public Object onRefresh() { return zone; } } On Thu, Sep 19, 2013 at 3:15 PM, Dmitry Gusev <dmitry.gu...@gmail.com>wrote: > Oh, I understand what you mean. > In this case you may want to detach <http://api.jquery.com/detach/> dom > element before passing it to colorbox. > > What bad with the server-side JSON string approach, is if you have some > ajax functionality in your template (like ajax event links, etc.) -- it > won't work, because tapestry won't apply client-side initialization for it. > So they will fallback to non-ajax. However if you move dom element to > colorbox -- this will work. > > And by the way, this is not illegal to have multiple elements with the > same id -- it is just jQuery will likely always return the first one -- > this is why it is discouraged, but if you use #id-based css-selector in > your css, then browser will apply this css rule to all elements in the dom. > > > > On Thu, Sep 19, 2013 at 3:00 PM, Lance Java <lance.j...@googlemail.com>wrote: > >> Well... In this case, if the cardLightbox generates an id you will start >> with one hidden element with the id when you render the page. >> >> Then, when the colorbox pops up the HTML will be used to create another >> with exactly the same id. >> >> On 19 Sep 2013 11:55, "Dmitry Gusev" <dmitry.gu...@gmail.com> wrote: >> > >> > You will get 2 elements with the same id in dom only if you do this >> > intentionally in code. >> > Tapestry will never do this for you. >> > I use this approach heavily in my code and don't have any problems with >> it. >> > > > > -- > Dmitry Gusev > > AnjLab Team > http://anjlab.com > -- Dmitry Gusev AnjLab Team http://anjlab.com
