javascript inside storybook - javascript

So my file extension is .mdx and I'm not sure if it allows me to include js code inside the .mdx file. I tried having it in the preview tag but it prints it as a string.
Below I have tried to write js code in a separate js file, import the function in the .mdx file, and use it, but it still won't work.
I also tried writing the inline function directly to the button onclick but had no luck.
Code:
<Preview>
<div>
<button onclick="onClickHandler">Click</button>
</div>
</Preview>
Is there a way to include a small js code in mdx file.

Related

Difference between linking a javascript file and directly adding script into html

I am recreating a javascript game which requires tables, but when I link my javascript file to my index.html the grid does not show on my browser, but when I directly add my javascript inside the script tag in my html, the grid shows on the browser.
Any help would be appreciated thank you!
This is my code by referencing a js file inside html(the tables do not show)
html with js link
This is my code without referencing a js file(tables do show)
html without js link
This is my main.js
main js
This is the browser without linking js file
browser without js file
This is my browser with linking js file
browser with js reference
First I linked the js file with script src=js path but it did not work but it worked when I put the javascript directly inside the html script tag. I was wondering how I can make it work with referencing a separate js file for a cleaner html code.
It's due to that your local paths are not resolving correctly. Without seeing directory structure I can't know what could be wrong.
First of all, please re-check and verify that both files main.js and index.html are in the same directory.
Alternatively, you could create folder called js inside of your main directory (where index.html is) and then move the main.js into that folder and try:
<script type="text/javascript" src="/js/main.js"></script>
index.html and main.js files must be at the same directory in order to include .js file as you did
<script type="text/javascript" src="main.js"></script>
UPDATE (I will leave answer whole, if somebody also gets stuck, so they can troubleshoot the problem):
The reason why it couldn't resolve path is because there was blank spaces between src and = ; when giving src, that part needs to be connected.
Just like this
<script type="text/javascript" src="main.js"></script>
Take a look here:
What happens:

How to make sure JS file runs in external php without including again?

I have a PHP script that includes a .JS file. The PHP file makes a jquery call to an external functions.php file which requires the same .JS file, however, with it being a separate file, I have to include it again inside functions.php. If I do this, it breaks the first include, but the 2nd include works. If I remove the include from the external file, the script doesn't work, but everything in the original file does.
Is there a way to include a JS file in the external file without calling it again? Can it just call from the first include?
Included as:
<script type="text/javascript" src="js/scripts.min.js"></script>
Using php's include_once
should resolve your problem. This function ensures that the given file will only be included once.

How to merge CSS and JS into HTML

I have 3 files, style.css, logic.js and container.html, while developing I need this files to exist separate, but when I am done, I'm searching for a tool that merges referenced css and js files into the HTML file:
<script src="./script/main.js"></script>
will turn into:
<script> ...code... </script>
and the same with CSS.
Is this possible? I first though this would be able with webpack, but the idea from webpack is not directly copying the content from the referenced files into the HTML file. Don't know if relevant, but I save my project on git and would like to run this build on bamboo, result of building my whole project should be one html file where all the code is inside, not being referenced, I could not find something that would do that?
Well a quick Google search gives me:
html-inline
web-combiner

Import external js script into Angular app

I was trying to implement this widget to my Angular app. For the second part I was able to create a custom js file in my assets folder, create a .d.ts file for it and successfully imported the function in my component.
But for the first part:
<script async src="https://telegram.org/js/telegram-widget.js?5" data-telegram-login="samplebot" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script>
If I do it with plain HTML and js, it will fetch from the website and generate a login button. Yet I tried simply pasting it into my component's HTML, it does not get rendered. As it is not a function nor a variable, I am not sure how can I place it into a specific div in the component.
Please help.

Magento Go, referencing a JS file attached to a theme in a CMS static block?

If I want to reference a JS file in a CMS block and the js file has been attached to the theme, how is it done? The CMS block has the script:
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');</script>
I dont have the functionality to see where the JS are stored once they are loaded into the JS editor and library section of Magento Go.
I would omit the section but it needs to be there, so should look like:
<script>
Galleria.loadTheme('JS file attached to the theme');
Galleria.run('#galleria');</script>
Can someone enlighten me as to the location of the JS files and how to add it?

Categories