Well, I learned something else new today and thought I might share as it was not easily figured out but in the end it was a simple fix. I was attempting to add a javascript clock to a web component in a panelcard. I found it on codepen. I copied the html threw it in a div. Copied the css added it as a linked file in properties. I copied the clock.js as well as a copy of the library that the clock.js needs and added those as linked files too. Pretty easy so far, and it worked in "working preview" (which is an interesting side-note) but when I tried to use live-preview and or publish it the javascript library the clockjs depends on was saying it wasn't available, (moment.js - " ReferenceError: Moment Is Not Defined") so I added the library call to the head section with {BeforeStart} still no joy. It wasn't until I added it to the head section of the page the component was on that it actually worked. Somehow this lets the library load before the call to it...
I don't know why the library wasn't ready for the js when placed in the head section of the component but it appears it was loading at the same time as the javascript was calling it and not ready, sort of like it needed a setTimeOut. Like I said it works in working preview just not in live preview. When placed on an a5w page with the jslibrary called in the head of the page it works, so if your having problems with something you know should be working or run across this behavior, try placing the component in a page and call the remote js in the page head before the component loads.
If anyone has any insight into what I might be doing wrong with the component itself, I am all ears.
I used this page for reference when trying to figure out what the heck might be going on: https://learnshareit.com/referenceer...t/#comment-378
The working example is the same page I showed with the video as a panel-card background at https://www.nwcopro.com/Test.a5w
Just exploring ideas for now!~
I don't know why the library wasn't ready for the js when placed in the head section of the component but it appears it was loading at the same time as the javascript was calling it and not ready, sort of like it needed a setTimeOut. Like I said it works in working preview just not in live preview. When placed on an a5w page with the jslibrary called in the head of the page it works, so if your having problems with something you know should be working or run across this behavior, try placing the component in a page and call the remote js in the page head before the component loads.
If anyone has any insight into what I might be doing wrong with the component itself, I am all ears.
I used this page for reference when trying to figure out what the heck might be going on: https://learnshareit.com/referenceer...t/#comment-378
The working example is the same page I showed with the video as a panel-card background at https://www.nwcopro.com/Test.a5w
Just exploring ideas for now!~
Comment