Re: JavaScript not invoked on zone refresh
Thanks Chris & JumpStart, with your help I was able to get this CSS animation working, using JavaScriptSupport in combination with RequireJS. Below is the code, for anyone else wishing to do the same. **The CSS** .open-section{ transition:0s; transform: rotate(90deg); } .close-section{ transition:0s; transform: rotate(-90deg); } .accordion.active .open-section { transition:1.0s; transform: rotate(0deg); } .accordion.active .close-section { transition:1.0s; transform: rotate(0deg); } The animation occurs simply by adding one of the latter two classes to its former counterpart. The first two display the button 90 degrees offset (hence the animation). **The Component's Java Code** public void afterRender(){ //Invoke client-side javascript to rotate the 'accordion' helm for this component/zone javaScriptSupport.require("activate-helm").with("userAccordion"); } **The RequireJS Script** define(["jquery"], function($){ return function(accordionId){ var element = document.getElementById(accordionId); element.classList.add("active"); } }) The page contains multiple zones, and the above animates the button within a zone that gets refreshed. The only glitch is that occasionally, especially with Firefox browser, the button jumps rather than rotates to it's final position. I suspect the browser may be prematurely acting on the 'active' version of the CSS class, before displaying the button in its initial 90 degree offset position. I'm not quite sure yet how to remedy this. I think having the RequireJS script wait a while would be a bit of a hack. Regards, Chris. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: JavaScript not invoked on zone refresh
Examples can be found in JumpStart, starting here: http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/javascript > On 26 Sep 2018, at 3:19 pm, Chris Poulsen wrote: > > Reacting to the zone events sounds like the best option IMO. Controlling > this from the server side seems needlessly complex and fragile in this case. > > Not really related to your issue, but you can call exported module methods > in 5.4 like this: > > JSONObject specification = new JSONObject( "diagramClientId", > diagram.getClientId(), "modelJson", modelJson ); > > jsSupport.require( "pages/contentspace/content-space-index" ).invoke( > "init" ).with( specification ); > > HTH. > > -- > Chris > > On Wed, Sep 26, 2018 at 1:10 AM Christopher Dodunski < > chrisfromtapes...@christopher.net.nz> wrote: > >> After exploring a little further, I discovered the below thread on >> invoking javascript from within Tapestry. >> >> >> https://stackoverflow.com/questions/27988473/pass-parameter-from-java-to-js-in-tapestry >> >> Joost writes: >> >> You will need to use the JavaScriptSupport service. >> >> Your java file: >> >> @Import(library = "RoomManagement.js") >> public final class RoomManagement{ >> >> @Inject >> private JavaScriptSupport javascriptSupport; >> >> @Property >> private long contactId; >> >> @AfterRender >> private void setup() { >>JSONObject jsonObject = new JSONObject(); >>jsonObject.put("contactId", contactId); >>javascriptSupport.addInitializerCall("RoomManagement",jsonObject); >> } >> } >> >> Your RoomManagement.js >> >> Tapestry.Initializer.RoomManagement = function (parameters) { >>//do whatever you need here >>alert('Your contactId: ' + parameters.contactId); >> }; >> >> This looks promising, but I later read that Tapestry's handling of >> javascript has been completely rewritten in Tapestry 5.4, with the above >> being deprecated. And I've not found any example code of doing tnings the >> new way. Any pointers would be much appreciated. >> >> My page contains 10 expand/collapse buttons, and I only wish to animate >> the one connected to the zone being updated. So am thinking of giving >> each button a unique ID, and passing that ID to the javascript so just the >> one button animates. >> >> My needs are pretty straight forward, and reportedly Tapestry's javascript >> handling was completely rewritten in 5.4 to simplify things. Look forward >> to seeing how things now get done. :-) >> >> Appreciate any help. >> >> Regards, >> >> Chris. >> >> >> - >> 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: JavaScript not invoked on zone refresh
Reacting to the zone events sounds like the best option IMO. Controlling this from the server side seems needlessly complex and fragile in this case. Not really related to your issue, but you can call exported module methods in 5.4 like this: JSONObject specification = new JSONObject( "diagramClientId", diagram.getClientId(), "modelJson", modelJson ); jsSupport.require( "pages/contentspace/content-space-index" ).invoke( "init" ).with( specification ); HTH. -- Chris On Wed, Sep 26, 2018 at 1:10 AM Christopher Dodunski < chrisfromtapes...@christopher.net.nz> wrote: > After exploring a little further, I discovered the below thread on > invoking javascript from within Tapestry. > > > https://stackoverflow.com/questions/27988473/pass-parameter-from-java-to-js-in-tapestry > > Joost writes: > > You will need to use the JavaScriptSupport service. > > Your java file: > > @Import(library = "RoomManagement.js") > public final class RoomManagement{ > > @Inject > private JavaScriptSupport javascriptSupport; > > @Property > private long contactId; > > @AfterRender > private void setup() { > JSONObject jsonObject = new JSONObject(); > jsonObject.put("contactId", contactId); > javascriptSupport.addInitializerCall("RoomManagement",jsonObject); > } > } > > Your RoomManagement.js > > Tapestry.Initializer.RoomManagement = function (parameters) { > //do whatever you need here > alert('Your contactId: ' + parameters.contactId); > }; > > This looks promising, but I later read that Tapestry's handling of > javascript has been completely rewritten in Tapestry 5.4, with the above > being deprecated. And I've not found any example code of doing tnings the > new way. Any pointers would be much appreciated. > > My page contains 10 expand/collapse buttons, and I only wish to animate > the one connected to the zone being updated. So am thinking of giving > each button a unique ID, and passing that ID to the javascript so just the > one button animates. > > My needs are pretty straight forward, and reportedly Tapestry's javascript > handling was completely rewritten in 5.4 to simplify things. Look forward > to seeing how things now get done. :-) > > Appreciate any help. > > Regards, > > Chris. > > > - > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org > For additional commands, e-mail: users-h...@tapestry.apache.org > >
Re: JavaScript not invoked on zone refresh
After exploring a little further, I discovered the below thread on invoking javascript from within Tapestry. https://stackoverflow.com/questions/27988473/pass-parameter-from-java-to-js-in-tapestry Joost writes: You will need to use the JavaScriptSupport service. Your java file: @Import(library = "RoomManagement.js") public final class RoomManagement{ @Inject private JavaScriptSupport javascriptSupport; @Property private long contactId; @AfterRender private void setup() { JSONObject jsonObject = new JSONObject(); jsonObject.put("contactId", contactId); javascriptSupport.addInitializerCall("RoomManagement",jsonObject); } } Your RoomManagement.js Tapestry.Initializer.RoomManagement = function (parameters) { //do whatever you need here alert('Your contactId: ' + parameters.contactId); }; This looks promising, but I later read that Tapestry's handling of javascript has been completely rewritten in Tapestry 5.4, with the above being deprecated. And I've not found any example code of doing tnings the new way. Any pointers would be much appreciated. My page contains 10 expand/collapse buttons, and I only wish to animate the one connected to the zone being updated. So am thinking of giving each button a unique ID, and passing that ID to the javascript so just the one button animates. My needs are pretty straight forward, and reportedly Tapestry's javascript handling was completely rewritten in 5.4 to simplify things. Look forward to seeing how things now get done. :-) Appreciate any help. Regards, Chris. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: JavaScript not invoked on zone refresh
Thanks Chung and Chris. I doubt using .click() will work, as the button being clicked on is immediately replaced, and it is this new button that must rotate. The buttons are for expanding and collpasing sections of a webpage. Once a user clicks on an expand button, it is immediately replaced with a collapse button. And vice versa. Below is the TML: Chris, invoking my javascript within the page's Java code sounds interesting. I've not done this before, but will look into it. Do you have any sample code for this approach? Thanks, Chris. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
Re: JavaScript not invoked on zone refresh
Hi Zone updates are updates of parts of the page, so the ready function is not triggered for those. Consider also performing your initialization on zone updates. See: http://tapestry.apache.org/current/coffeescript/events.html#section-20 for the zone related events. -- Chris On Tue, Sep 25, 2018 at 7:22 AM Christopher Dodunski < chrisfromtapes...@christopher.net.nz> wrote: > Hi all, > > I suspect there's a simple solution to this small, but annoying problem. > > My Tapestry page uses a simple javascript to rotate an image 90 degrees > the moment the image is rendered on screen. It does this by adding a CSS > class to the button element that contains the image. > > > **The JavaScript** > > $(document).ready(function(){ > $('.accordion').addClass('active'); > }); > > > **The CSS Classes** > > .open-section{ > transform: rotate(0deg); > transition:1s; > } > .close-section{ > transform: rotate(0deg); > transition:1s; > } > .accordion.active .open-section { > transform: rotate(-90deg); > transition:1s; > } > .accordion.active .close-section { > transform: rotate(90deg); > transition:1s; > } > > > The above works perfectly well when the page first loads, and if I > manually refresh the page. But when the button/image appears within a > zone that is refreshed, the javascript evidently doesn't get invoked, as > the button image doesn't rotate. > > How would one normally resolve this little problem? > > Regards, > > Chris. > > > - > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org > For additional commands, e-mail: users-h...@tapestry.apache.org > >
Re: JavaScript not invoked on zone refresh
Your javascript register when document is ready , it means just affect when page load or refresh page. If you want handle it via button, please register onclick event for this button and implement new small function with call the same snippet. Assume you're using jquery, so here is my thoughts: $("button-id").click(function() { $('.accordion').addClass('active'); }) On Tue, Sep 25, 2018 at 12:22 PM Christopher Dodunski < chrisfromtapes...@christopher.net.nz> wrote: > Hi all, > > I suspect there's a simple solution to this small, but annoying problem. > > My Tapestry page uses a simple javascript to rotate an image 90 degrees > the moment the image is rendered on screen. It does this by adding a CSS > class to the button element that contains the image. > > > **The JavaScript** > > $(document).ready(function(){ > $('.accordion').addClass('active'); > }); > > > **The CSS Classes** > > .open-section{ > transform: rotate(0deg); > transition:1s; > } > .close-section{ > transform: rotate(0deg); > transition:1s; > } > .accordion.active .open-section { > transform: rotate(-90deg); > transition:1s; > } > .accordion.active .close-section { > transform: rotate(90deg); > transition:1s; > } > > > The above works perfectly well when the page first loads, and if I > manually refresh the page. But when the button/image appears within a > zone that is refreshed, the javascript evidently doesn't get invoked, as > the button image doesn't rotate. > > How would one normally resolve this little problem? > > Regards, > > Chris. > > > - > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org > For additional commands, e-mail: users-h...@tapestry.apache.org > > -- Chung Khánh Duy Director of Technology Formos
JavaScript not invoked on zone refresh
Hi all, I suspect there's a simple solution to this small, but annoying problem. My Tapestry page uses a simple javascript to rotate an image 90 degrees the moment the image is rendered on screen. It does this by adding a CSS class to the button element that contains the image. **The JavaScript** $(document).ready(function(){ $('.accordion').addClass('active'); }); **The CSS Classes** .open-section{ transform: rotate(0deg); transition:1s; } .close-section{ transform: rotate(0deg); transition:1s; } .accordion.active .open-section { transform: rotate(-90deg); transition:1s; } .accordion.active .close-section { transform: rotate(90deg); transition:1s; } The above works perfectly well when the page first loads, and if I manually refresh the page. But when the button/image appears within a zone that is refreshed, the javascript evidently doesn't get invoked, as the button image doesn't rotate. How would one normally resolve this little problem? Regards, Chris. - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org