Aw: Re: T5.5.0-beta-3: document.observe is not a function

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Aw: Re: T5.5.0-beta-3: document.observe is not a function

t5_lothar
Hi Cezary,
 
thanks a lot for the quick reply. I didn't get the first solution to work, but never mind. Avoiding prototype in the first place (your offered second solution) did the trick, so thanks a lot.
 
Lothar
 

Gesendet: Mittwoch, 12. Februar 2020 um 19:13 Uhr
Von: "Cezary Biernacki" <[hidden email]>
An: "Tapestry users" <[hidden email]>
Betreff: Re: T5.5.0-beta-3: document.observe is not a function
Hi,
I don't use T5.5, but probably your code would fail in T5.4 as well.
Tapestry puts JavaScript loading at the end of <body>, as it is a general
best practice for improving page loading times.

I would change this in the following way:

---
1. Move JS code to a separate file that works as a module. Put following
code in META-INF/modules/display-content.js in your resources folder
(normally src/main/resources)

(function() {
define(["t5/core/dom"], function() {

document.observe("dom:loaded", function() {

$("content").style.display = 'block';

});

}
)


2. Remove the offending block " <script"> ... <script>" from your ".tml"
file

3. In Java class that it is related to the .tml file from step 2, add
inclusion of display-content.js

@Inject
private JavaScriptSupport javaScriptSupport;

@BeginRender
void addDisplayContent(final MarkupWriter writer) {
javaScriptSupport.require("display-content.js");
}

---

As far as I can tell, these changes should work in Tapestry 5.4 and
Tapestry 5.5. An alternative approach, is to rewrite JavaScript code in
.tml to use plain DOM, instead of any external library, like:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',
function() {
document.getElementById('content').style.display = 'block';
}
, false);
</script>


Best regards,
Cezary

PS. I have not tested any code above, so you might need to fix any typos,
missing commas, etc.


On Wed, Feb 12, 2020 at 5:37 PM Lothar Nieswandt <[hidden email]> wrote:

> Hello T5-team,
>
> I am currently in the process of porting a T5.3 application to T5.5-beta
> (expecting the latter to become final soon). Altough the application is
> rather simple and does not provider any client side customizations, I do
> get into trouble with some JS-related stuff.
>
> The application's index page does not get loaded, the browser console
> complains:
>
> "(index):7 Uncaught TypeError: document.observe is not a function"
>
> This obviously relates to the following piece of source code:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html
> data-debug-enabled="true" data-locale="de" xmlns="
> http://www.w3.org/1999/xhtml[http://www.w3.org/1999/xhtml]">
> <head>
> <meta content="Apache Tapestry Framework (version 5.5.0-beta-3)"
> name="generator"/><meta content="text/html; charset=utf-8"
> http-equiv="content-type"/>
> <link href="/etbb-admin-gui/assets/ctx/15201258/images/favicon.ico"
> type="image/x-icon" rel="shortcut icon"/>
> <title>Title</title>
> <script type="text/javascript">
> ==> document.observe("dom:loaded", function() {
> $("content").style.display = 'block';
> });
> </script>
>
>
> After some research I found out that the relevant call belongs to
> prototype.js which should still be supported in T5.5, shouldn't it?
>
> As I further found out, the include of prototype.js is still present in
> the page, but has been moved to the <body> part of the page as opposed to
> the <head> part where it was placed in T5.3.
>
> As I stated in earlier, we do not rely on any properietory JS extensions,
> so I would happily replace the Prototype dependency. I just don't know how.
>
> Any help appreciated.
>
> Lothar
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Re: T5.5.0-beta-3: document.observe is not a function

Cezary Biernacki
I am glad to help.

As I wrote, I didn't test codes, so there are some bugs in them. In case
somebody having a similar problem, there is an errata:

In Step 1, missing a line at the end of code block, like this:

})();


In Step 3. instead of "display-content.js" it should be without ".js",
        javaScriptSupport.require("display-content");


Best regards,
Cezary

On Fri, Feb 14, 2020 at 10:19 AM Lothar Nieswandt <[hidden email]>
wrote:

> Hi Cezary,
>
> thanks a lot for the quick reply. I didn't get the first solution to work,
> but never mind. Avoiding prototype in the first place (your offered second
> solution) did the trick, so thanks a lot.
>
> Lothar
>
>
> Gesendet: Mittwoch, 12. Februar 2020 um 19:13 Uhr
> Von: "Cezary Biernacki" <[hidden email]>
> An: "Tapestry users" <[hidden email]>
> Betreff: Re: T5.5.0-beta-3: document.observe is not a function
> Hi,
> I don't use T5.5, but probably your code would fail in T5.4 as well.
> Tapestry puts JavaScript loading at the end of <body>, as it is a general
> best practice for improving page loading times.
>
> I would change this in the following way:
>
> ---
> 1. Move JS code to a separate file that works as a module. Put following
> code in META-INF/modules/display-content.js in your resources folder
> (normally src/main/resources)
>
> (function() {
> define(["t5/core/dom"], function() {
>
> document.observe("dom:loaded", function() {
>
> $("content").style.display = 'block';
>
> });
>
> }
> )
>
>
> 2. Remove the offending block " <script"> ... <script>" from your ".tml"
> file
>
> 3. In Java class that it is related to the .tml file from step 2, add
> inclusion of display-content.js
>
> @Inject
> private JavaScriptSupport javaScriptSupport;
>
> @BeginRender
> void addDisplayContent(final MarkupWriter writer) {
> javaScriptSupport.require("display-content.js");
> }
>
> ---
>
> As far as I can tell, these changes should work in Tapestry 5.4 and
> Tapestry 5.5. An alternative approach, is to rewrite JavaScript code in
> .tml to use plain DOM, instead of any external library, like:
> <script type="text/javascript">
> document.addEventListener('DOMContentLoaded',
> function() {
> document.getElementById('content').style.display = 'block';
> }
> , false);
> </script>
>
>
> Best regards,
> Cezary
>
> PS. I have not tested any code above, so you might need to fix any typos,
> missing commas, etc.
>
>
> On Wed, Feb 12, 2020 at 5:37 PM Lothar Nieswandt <[hidden email]>
> wrote:
>
> > Hello T5-team,
> >
> > I am currently in the process of porting a T5.3 application to T5.5-beta
> > (expecting the latter to become final soon). Altough the application is
> > rather simple and does not provider any client side customizations, I do
> > get into trouble with some JS-related stuff.
> >
> > The application's index page does not get loaded, the browser console
> > complains:
> >
> > "(index):7 Uncaught TypeError: document.observe is not a function"
> >
> > This obviously relates to the following piece of source code:
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
> > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html
> > data-debug-enabled="true" data-locale="de" xmlns="
> > http://www.w3.org/1999/xhtml[http://www.w3.org/1999/xhtml]">
> > <head>
> > <meta content="Apache Tapestry Framework (version 5.5.0-beta-3)"
> > name="generator"/><meta content="text/html; charset=utf-8"
> > http-equiv="content-type"/>
> > <link href="/etbb-admin-gui/assets/ctx/15201258/images/favicon.ico"
> > type="image/x-icon" rel="shortcut icon"/>
> > <title>Title</title>
> > <script type="text/javascript">
> > ==> document.observe("dom:loaded", function() {
> > $("content").style.display = 'block';
> > });
> > </script>
> >
> >
> > After some research I found out that the relevant call belongs to
> > prototype.js which should still be supported in T5.5, shouldn't it?
> >
> > As I further found out, the include of prototype.js is still present in
> > the page, but has been moved to the <body> part of the page as opposed to
> > the <head> part where it was placed in T5.3.
> >
> > As I stated in earlier, we do not rely on any properietory JS extensions,
> > so I would happily replace the Prototype dependency. I just don't know
> how.
> >
> > Any help appreciated.
> >
> > Lothar
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>