Develop Reference

[ODOO15]Execute a JavaScript script when a page is fully loaded

I'm working on a JavaScript script that aims to add some events on a couple of buttons in the barcode interface in Odoo V15.
When I'm trying to add an event on a button in the standard navbar at the top of the page (the navbar that allows, for example, to go back to the applications list) I can't locate the button with jQuery. I select the button through its class, but the returned object remains empty.I'm simply doing something like :
console.log($('.buttonClass'));
I guess that is because my script executes before the button generation.
I tried to place my script at the last position of the assets in the manifest, but it still not working.
How could I execute JavaScript code only when my page is fully loaded, so I can be sure that all of my elements exist?
Thank you,
Regards,

Try to use the DOMContentLoaded event for all your script.
More here: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
Example:
addEventListener('DOMContentLoaded', (event) => {
// your code
console.log($('.buttonClass'));
});

How about using $(document).ready()?
Example:
$(document).ready(function() {
console.log($('.buttonClass'));
});
See more about ready on jQuery API Documentation.

Chrome Extensions: Use a content script to modify existing scripts on a web page?

I'm creating a chrome extension that needs to hook into another script that already exists on my target web page. For simplicity's sake, I'm trying to find the following existing script element on a page and add a console.log() to it.
<script type="text/javascript">
var viewModel = new ScenePlayViewModel('', 'Ace', false);
viewModel
.load('jgWJJ2qsxx')
.then(function () {
sceneDOM = new SceneEditDOM2(viewModel.scene());
sceneDOM.init();
viewModel.isSubmitViaShareUrl(false);
viewModel.isSubmitViaUnityPackage(false);
console.log("HOOK INJECTED"); <--------------------------------------------- line to add
});
</script>
I've tried a number of solutions but none of them have seemed to work. For example, I've tried using a content script to find the script and replace the text, but it appears to run the pre-change script instead of my modified code.
// replaces javascript on website, but doesn't run new version
var scriptLoadScene = $("script:contains('new ScenePlayViewModel')"); // find the script
scriptLoadScene.text("console.log('Hello World')"); // change the text
What should I do? Basically, I'm just trying to change/add scripts to the web page to add more features.

This doesn't exactly answer your question, but hopefully will help you find a solution.
First - hopefully someone with more knowledge than me will confirm or discredit this - from my understanding, the script code is only run once, on page load, unless otherwise triggered by some event. Since Chrome extensions are triggered after the page has loaded, this script will have already been run, and anything inserted after won't run unless triggered.
I suppose you could always call the function again after you've edited it, but I don't have the knowledge or experience to predict what would happen then.
In my experience, I've just added my own '' tags with the code I wanted to run by writing them into the DOM, either into the '' or '' element.
Best of luck.
-brent

JQuery code stops working after page loads when navigating indirectly

I'm facing the following issue:
All code works properly unless I navigate to a page by copy-pasting the url, clicking on the mouse scroll wheel etc. If I use the site menu to navigate to a page by left-clicking on it, it works fine.
So, when a page is loaded indirectly, some of my JQuery code stops working after the page has finished loading - so it actually works for a second or so, and then stops. If, e.g. a click on a button before the page has finished loading, the code will run. If I wait until the page has finished loading, it doesn't.
Also, this doesn't happen to all code, just parts of it. I've tried to figure out why some of it works, and it might be (or not) that the code that stops working is the one directly using methods from plugins I've included, which isn't inside a click event (or maybe inside another function?).
Example of working code:
$(".pr-gallery img").click(function(){
var gallery = $(this).attr("data-num");
$(gallery.toString()).magnificPopup('open');
});
Here, even though there is the magnificPopup method, it works fine.
Example of non-working code:
$('#ctr-fixed-menu').drawer({
align: 'right'
});
I load all code inside:
(function($) {
$(document).ready(function() {
...code...
});
})(jQuery);
and have also tried $(function(window), jQuery(window).load, as well as encasing all code inside a function like so:
jQuery(window).load(function(){
function TestCall() {
...all code here...
}
window.onload=TestCall;
});
})(jQuery)
none of which have worked. It might be something really simple but I've tried to solve it for a couple of weeks now and it's driving me crazy. Also, there are no error messages in the console.
Just to note that this is for a WordPress website, so I don't know whether there might be some type of conflict with the original theme code (lazy loading for example?).
Any help would be greatly appreciated.

JavaScript Will Not Load After DOM

I'm having trouble getting my JS to run after all my content has loaded. Right now on the site Im working on: http://hsvgridproject.com, the grid will not load the first time a user visit the site and needs a hard refresh before it will work. I believe I need to use a window.onload function of some sort but as I am still learning Java I'm not sure how to implement it into my project without breaking the code.
The script for the grid on homepage has a window tag surrounding it already (credit Codrops):
(function(window) {
Please let me know if you need more info. Thank you!

It's probably not working because you're executing your script before the DOM is fully loaded.
To ensure it's executed after the DOM is fully loaded, either move the script tag which executes your code right before the closing tag of the body element or use DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
// execute your code
});

document.addEventListener slows down loading

I have a Web App. I have written a Calendar javascript code. A script tag is in body of html code loads that js file from server.
Until writing the last codes, loading page was taking around 900 ms. When I wrote last of my javascript codes, it takes 6 seconds loading the page.
Javascript code basically defines a class for my calendar. It has lots of methods in it. In my last codes, I wrote a new method which is like below:
registerHider = function(){
alert('hello');
if(document.addEventListener){
document.addEventListener('click', hider, false);
}
};
The method "hider" is another method which just changes "display" style to "none". That's all. When I comment out "addEventListener" code, page loads around 900ms again. But when I uncomment is it takes 6 secs again.
I put there an alert to see if page tries to process any code there on load, but no message comes to screen. From there I understand, codes are not executed yet. Even I changed code to register the event only if document is ready, no help, still same.
What can be the reason of this problem?

All problems are solved. It has turned out that it wasn't about any of those javascript codes.
Lessons learned: If HTTP header's content-length is higher than content's real size;
Firefox waits longer but it still works.
Chrome fails to load the javascript code. So it doesn't work.
Thanks anyway to everybody attended.