You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Christopher Dodunski <Ch...@christopher.net.nz> on 2018/09/25 05:17:20 UTC
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-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: JavaScript not invoked on zone refresh
Posted by Chris Poulsen <ma...@nesluop.dk>.
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 <
ChrisFromTapestry@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-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: JavaScript not invoked on zone refresh
Posted by Chung Duy <ch...@gmail.com>.
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 <
ChrisFromTapestry@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-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
Chung Khánh Duy
Director of Technology
Formos