I am using Vaadin flow 23 (spring boot). I loaded a Javascript file into browser successfully but onload event on JS does not trigger. With Vaadin flow 14, it works fine.
clientLocation.js:
window.addEventListener('load', function () {
console.log("load js file ==================== ok");
window.scrollTo(0, 0);
//do something here but it never triggers when page is loaded
startTimer();
})
This is how I load JS file:
File mainview.java
======== Updated: ===============
Tried with #JsModule, #JavaScript but still does not work!
client Log:
workaround solution is to add JS file into index.html.
https://github.com/vaadin/flow/issues/14211
Related
I am currently working on an ionic/react app using capacitor to "compile" it into android and iOS Apps.
Right now the app itself only has a simple calendar widget and an audio player playing a radio broadcast from radiojar.com.
This radio stream is provided by a script i initially inserted trough a script tag in the index.html file in the body like so:
<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
And then reference it within my Player Component (in the useIonViewDidEnter) like so:
rjq('#rjp-radiojar-player').radiojar('player', {
"streamName": "stream-url"
});
To make sure the variable rjq is not unkown when building the app etc. before loading the external script, i declare it globally in the Player.js file:
declare var rjq;
It works on:
Windows Browser (Chrome, Firefox)
Android (Emulator and real Xiaomi and Motorola phones)
MacOS Safari (Web)
It does not work on:
XCode Iphone (emulator)
In XCode i see the following error message:
APP ACTIVE
⚡️[log] - onscript loading complete
⚡️WebView loaded
⚡️To Native ->App addListener 122796460
⚡️[error] - {}
⚡️------ STARTUP JS ERROR ------
⚡️ReferenceError: Can't find variable: rjq
⚡️URL: capacitor://localhost/static/js/main.31871104.chunk.js
⚡️main.31871104.chunk.js:1:583
⚡️See above for help with debugging blank-screen issues
⚡️[log] - Player off
⚡️[error] - {}
What i tried so far:
My feeling is the script is not loaded therefore i explored mainly in that direction
Move script tag in index.html in head (made no difference)
Dynamic load in the Player.ts file (i tried appending it to body and head, see head version below)
Nr. 2 looks like this:
useIonViewDidEnter(() => {
console.log("Hello");
const radioScript = document.createElement("script");
radioScript.src = "//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js";
radioScript.async = true;
radioScript.type = "text/javascript";
document.head.appendChild(radioScript);
radioScript.onload = function(){
console.log("Loaded script");
rjq('#rjp-radiojar-player').radiojar('player', {
"streamName": "stream-url"
});
}
});
And the XCode log:
⚡️Loading app at capacitor://localhost...
Reachable via WiFi
APP ACTIVE
⚡️[log] - onscript loading complete
⚡️WebView loaded
⚡️To Native ->App addListener 66527687
⚡️[log] - Hello
Conclusion
Does any one know what leads to the script not being loaded? Or mabye sees/knows a different problem in my approach, i would be thankful for any advice and or hint.
Update
I managed to load the script so it is available at runtime now, but the code referencing it is still not being executed.
What solved the loading problem: Add https to the src of the script tag
<script type="text/javascript" src="https://www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
What is not yet working: I think the stream of the player or the player itself is still not initiated. I put a console.log within one of these code snippets, but it is not visible in the console.
rjq('#rjp-radiojar-player').radiojar('player', {
"streamName": "stream-url"
});
I want to be sure that my scripts are being loaded before I call a function.
This code is written inline on the page, it is not being loaded by application.js, sometimes the scripts are loaded correctly but not always.
<script>
$(document).on('turbolinks:load', function() {
$.when(
// Required libs to token and fraud detection
$.getScript("https://openpay.s3.amazonaws.com/openpay.v1.min.js"),
$.getScript("https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"),
$.Deferred(function(deferred){
$(deferred.resolve);
})
).done(function(){
OpenPay.setId('123');
... more code ...
});
</script>
I'm getting:
How can I do that? I'm using rails 5
I added shake gesture plugin for my project.
This is my code:
<button onclick="myFunc()" id="round">Gesture Call</buttom>
<script>
function myFunction()
{
window.open("emcall.html");
navigator.vibrate([2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000,2000]);
navigator.notification.beep(10);
}
function myFunc()
{
alert('shake working');
function onShake()
{
alert("shake success");
window.open("emcall.html");
}
function onError()
{
alert("errorq");
}
shake.startWatch(onShake,30,onError);
}
</script>
Some thing wrong in mycode help me to over come this.
Include cordova.js file in your HTML file and register deviceready event in your script. Then, invoke shake plugin related code inside deviceready event listener function. It should work.
Also ensure to test it on device after adding and building platform as i dont see this shake plugin supported in browser.
->Plugin not supporting in phonegap.app,who are all testing the app using you ip address on phonegap app.
->just add platform through cli.
->And build or run it and test .
I'm trying to use toastr js library.
I included toastr.js, toastr.css and toastr-responsive.css
This works:
toastr.info("Hello world");
But this doesn't work. And I don't get any error in browser console:
toastr.options.positionClass = "toast-top-full-width";
toastr.info("Hello world");
What would be the cause?
Create a fiddle and show me what you are doing.
UPDATE:
You should not link to the raw css and javascript in github. Those are not CDNs, so they are not set up to serve the code. You should pull the code down for your project or use NuGet in Visual Studio.
For example, this works fine if you copy the CSS into the JsFiddle CSS window like this:
http://jsfiddle.net/7Ucj9/10/
And to be complete, here is the minor code change I made ... but it had nothing to do with it
$(function () {
toastr.info("Are you the 6 fingered man?");
$("#foo1").click(function () {
alert("test");
});
$("#foo2").click(function () {
toastr.info("Are you the 6 fingered man?");
console.log("hello");
});
});
So it works perfectly when it's inline between tags, but how can I put this in an external js file and have it run? I copied it verbatim and it won't work. What's the issue?
edit: you can see the tutorial I'm working off of here: http://popcornjs.org/popcorn-101
code:
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop_Stephen = Popcorn("#vid_Stephen");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop_Stephen.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "pop"
});
// play the video right away
// pop_Stephen.play();
}, false);
edit: OK it seems that it just doesn't work within CODA2, which is a bummer. Any idea why this is?
I'm betting that your <script /> tags have you loading your external file before the Popcorn library.
Make sure you load
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
before your external file.
Perhaps use the Utility Method Popcorn.getScript?
http://popcornjs.org/popcorn-docs/utility-methods/#Popcorn.getScript
from the site:
Popcorn.getScript("yourscript.js");