We Keep Coding

How to call a JS function at the page load of Docusaurus site?

I need to load a custom JS function I wrote at the beginning of the page load in a Docusaurus documentation site.
What have I tried so far?
Attempt #1: Appending the script to the index.js file (.\src\components\HomepageFeatures\index.js)
This attempt worked well during testing but then yarn was not able to build the project anymore. The error was as follows:
[ERROR] Docusaurus server-side rendering could not render static page
with path /. [INFO] It looks like you are using code that should run
on the client-side only. To get around it, try using <BrowserOnly>
(https://docusaurus.io/docs/docusaurus-core/#browseronly) or
ExecutionEnvironment
(https://docusaurus.io/docs/docusaurus-core/#executionenvironment). It
might also require to wrap your client code in useEffect hook and/or
import a third-party library dynamically (if any).
Attempt #2: To counter the issue presented during my first attempt, I created a separate (.js) file in (./src/js/myfunction.js) and then tried to load that file. To keep this question short, I will add a sample script below to showcase the issue:
import BrowserOnly from '#docusaurus/BrowserOnly';
<BrowserOnly>
window.onload = function() {
alert("Welcome!");
}
</BrowserOnly>
Then I went to the Docusaurus config file and added the following:
scripts: [
{
src: './src/js/myfunction.js',
async: false,
},
],
The site was built successfully this time, but the function was not getting loaded. I tried to call the function as well but still, I was getting nothing. I think I don't understand how the <BrowserOnly> feature works or I am missing something else.
Your help will be much appreciated!

I solved the issue eventually by adjusting the custom-made JS file as follows:
import ExecutionEnvironment from '#docusaurus/ExecutionEnvironment';
if (ExecutionEnvironment.canUseDOM) {
// My own custom JS code.
}
Thereafter, I loaded that custom JS file from the config file (docusaurus.config.js) by adding the following:
clientModules: [
require.resolve('./path-to-custom-code/custom-code.js'),
],
This has been mentioned briefly in the documentation but it wasn't clear at all. The documentation of Docusaurus requires more elaboration and examples.
You can view it here though:
https://docusaurus.io/docs/advanced/client#client-modules
If anyone has a better approach, please add it to this post. Thanks!

Wicket 6 JavaScript reference not in head

I'm working on the migration of an application from Wicket 1.4 to Wicket 6. One page is not responding as it is supposed to and I suspect this is caused by a missing JavaScript file.
The file is present in a Java package. In the original application the file is added in a wizard step in the same package. For debug purposes (I'm not sure the missing file causes the problem) I moved to call to the application abstract page which is in another package.
The following call is added to an overwrite of renderHead. Which already contains files which are added correctly and contains super.renderHead.
response.render(
JavascriptHeaderItem.forReference(
new PackageResourceReference(ClassInSamePackage.class, "jsName.js")
)
);
The script-tag is present in the html-body instead of in the head.
I checked that the script is present at the location linked in the script-tag. But it seems impossible to render it in the html-head.

It turned out to be a combination of an used JavaScriptFilteredIntoFooterHeaderResponseand an error in the wicket output because wicket was in DEVELOPMENT mode instead of DEPLOYMENT mode. When wicket was in DEPLOYMENT mode the code was added to the footer correctly and it was also working correctly.

Google app engine python doesn't read js file

I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?

Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>

I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.

Grails - Redeploy after javascript change

Recently I added conf/ApplicationResources.groovy (using resources plugin) file to my project structure. Here I keep my modules definitions for javascript and css libraries. Before, I was importing libraries with classic g:javascript tag.
Now every time when javascript code changes (while server is running) I get client side js error saying
"Uncaught SyntaxError: Unexpected end of input".
So for each javascript change application needs to be redeployed, what I dont want.
I have also declared .js files to be excluded from resources plugin pattern, but the problem remains. Any advice/help will be appreciated.
Solution from Sérgio Michels that worked:
Add to Config.groovy: "grails.resources.debug = true;"

To avoid cache issues with the Resources plugin, in all my projects I'm using the config grails.resources.debug = true in Config.groovy.
You still use <r:require modules=""/> in your GSP, but in development mode the source will show all files included instead of merging them.

Edit javascript associated file of primefaces schedule component

I'm using schedule component of Primefaces 2.2.1. If you decompress primefaces-2.2.1.jar included in your project in /lib, you see a .js file and a .css file for each component of primefaces. In my case, I have schedule.js and schedule.css (placed at primefaces-2.2.1\META-INF\resources\primefaces\schedule). The point is that I have to modify schedule.js to add some functionality. So, I decompress primefaces-2.2.1.jar, modify schedule.js, compress everything again to primefaces-2.2.1.jar an place it again in /lib. Then I run the application and this message is showed to me:
javax.servlet.ServletException: Error loading theme, cannot find "themes/sam/theme.css" resource of "primefaces" library
I can see that the file theme.css is present in primefaces-2.2.1\META-INF\resources\primefaces\themes\sam
And I know that it's possible to change schedule.js and make it work becouse some other user did. You can see it here http://forum.primefaces.org/viewtopic.php?f=3&t=15163&p=80971#p80971
Anybody knows how?

All you have to do is :
1) Install 7-zip
2) Browse the primefaces-2.2.1.jar , copy the relevant js file outside the jar
3) Modify it as you wish
4) Delete the relevant js file from the jar
5) Drag and Drop the modified js file back to the jar
Also , take a look at a similar question :
Customizing event appearance primefaces schedule