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
|

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

t5_lothar
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">
<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]

Reply | Threaded
Open this post in threaded view
|

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

Cezary Biernacki
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">
> <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]
>
>