Inject script globally in React - javascript

I have the following bit of code in my global index.js file in React:
const script = document.createElement('script');
script.src = 'assets/js/custom.js';
script.async = true;
document.body.appendChild(script);
This injects a script tag to the body of the dom. This doesn't quite work as expected, it appends the file but it doesn't trigger any of the jQuery code in the file.
However if I put the exact same script in a componentDidMount function of one of my components it works fine.
I don't want to add this to each and every component, How can I do this globally?
Thanks

Related

How to display external <script> using div in Reactjs?

I am trying to learn how to display small widgets (for example plane tickets brower) onto my website built in Reactjs. The code that's supposed to work instantly according to the provider is as below ("just copy and paste into website"):
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
<script src="https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget" async></script>
I tried to Google for answers and my idea atm looks like this:
function OfferBrowser() {
const script = document.createElement("script");
script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
script.async = true;
return(
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div>
)
}
The other this I tried was also to put {script} into the tag like this, but it doesn't work as well.
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-">{script}</div>
How should I approach this?
While I don't know React, I believe I have found the problem with the second chunk of code. You have created a script element, but have not added it to the DOM, and therefore it's not loading the script.
After looking around for a bot, I believe I've found a fix.
const script = document.createElement("script");
script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget";
script.async = true;
// append the script tag to the body
document.body.appendChild(script);
I think this needs to run after the component is mounted, so that the div is in the DOM.

Render image in an external webcomponent inside react

I have been trying to render image in an external web-component inside react but couldn't do it.
I am working on a react app that would use HTML template that can be run in browser, template is something like:
<script src="https://assets.some-domain.com/someBundledjs.js"></script>
<ParentForm>
<ChildForm name="entryForm" image-src="https://www.image-domain.com/person1.jpg">
</ChildForm>
</ParentFrom>
I tried to render it in reactDOM using react-helmet. Everything works fine except the image doesn't load in browser(though the call to fetch the image succeeds). When I debugged(luckily I have access to source code generating above form), I came to know that that the image is loading during server-side rendering, before js is downloaded, hence the image.onLoad() callback in the source code is never called. I verified it as per ref.
Update(rendering js without react-helmet):
I tried rendering below in react after loading script by doing something like:
componentDidMount () {
const script = document.createElement("script");
script.onload = () => {
// script has loaded, you can now use it safely
this.setState({ isLoadParentForm: true });
}
script.src = "https://assets.some-domain.com/someBundledjs.js";
script.async = false;
document.body.appendChild(script);
}
render(){
return(
<div>
{this.state.isLoadParentForm?
<ParentForm>
<ChildForm name="entryForm" image-src="https://www.image-domain.com/person1.jpg">
</ChildForm>
</ParentFrom>
: <></>
</div>
)
}
This ensures that the component is rendering post the script has loaded, still the image doesn't load inside the component.
Can someone explain and provide solution?
After spending lot of time I finally figured out the root cause. The react-app that we are using downloads bunch of javascript libraries. One of those libraries has a js file that overrides the Image constructor. Due to this the image src was not getting set as expected and hence the image failed to load.

Loading javascript import into React application

Edit
I decided to try adding the script tags to the index.html file and conditionally rendering them.
<script type="text/javascript">
var $show_stuff = 'no';
var $add_stuff = 'yes';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.example.com/includes.php?stuff=true';
document.getElementById('feed').appendChild(script);
</script>
Then in the component I want the feed to show up I did this,
<div id="credit-feed" />
I also tried conditionally rendering the script tag in the index.html file like this,
if(window.location.href === "localhost:3000/my/path" ) { script tag... }
These both do not work as well. The script tag does not show up in the div in the first example and the second does show the script tag but it does not render.
But, when I add the script tag like normal to the head of the HTML file, the feed renders as I would expect.
Background
We do business with a company that provides us a Javascript script tag which appends the data from it's response into the body of our web page. We have had a PHP site for the past 8 years without problems but now that we are switching to React, we can not figure out the correct way to use this tag in the component it will live.
Problem
When we add the script tag to the React component, it does not append the correct data to the page. In fact it does not append any data to the page.
Example
I have tried to load the script tag like normal,
<script type="text/javascript">
var $somevar = "false";
var $addjquery = "yes";
</script>
<script
type="text/javascript" src="https://www.example.com/do/deef.php?feedtype=all ">
</script>
Another way I have tried in the React component,
componentWillMount() {
const script = document.createElement('script');
const $somevar = 'false';
const $addjquery = 'yes';
script.src = 'https://www.example.com/get/feed.php?&data=all';
script.async = true;
document.body.appendChild(script);
}
Question
What is the correct way to load the script tag so it will append the data to my application?
Usually with a React app, you will have an index.html file that contains the React component. You should put the <script> reference inside the html file. So I would definitely use the first approach you mention. If it's not loading, can you check the browser inspector and find out what kind of error you are getting? For one thing, you should remove the empty white space from the URL. That could be the issue.

jQuery cannot be accessed properly after being loaded dynamically?

I am trying to write a small check that will test for jQuery, and if not present, dynamically load a copy so that a script can be run by it. It sets to no conflict in case anything else is present that also uses $, and then runs the script - a small menu.
However, upon actually testing this jQuery is loaded from the script, but fails to execute: "jQuery is not defined."
I know that jQuery has to come first before any functions that use it, but is there any way to fix this when it is dynamically installed?
(function() {
console.log("Loaded");
if(!window.jQuery) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
jQuery.noConflict();
}
})();
You're not waiting until the script has loaded.
script.onload = function(){
// do whatever
};

Javascript onclick event call to a webservice

Is it possible to call the below script on button click?
<script type="text/javascript" src="https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&e=false"> </script>
I want to use a custom button.
It depends on the logic in script but basically yes you can. See example code below. Then you have to add click event to your button with this function.
function addscript() {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "upload.js";
head.appendChild(script);
}
It appears you are using the Paga Service api. If you plan on submitting with your custom button, then after the script is loaded, you need to trigger $('#__paga_btn').click() which is can be found from Using the chrome dev tools to inspect element and get the id of the link. #__paga_btn, NB, the script is required to be loaded after the form element. Something like this would suffice for your case
function addscript() {
var head = document.getElementsByClassName("pagalink")[0];
script = document.createElement('script');
script.id = 'uploadScript';
script.type = 'text/javascript';
script.src = "https://www.mypaga.com/paga-web/epay/ePay-button.paga?k=xxxxxxxxxxxxxxxxxxxx&e=false&layout=V";
head.appendChild(script); //Figure out a way to detect when script has loaded.
$('#__paga_btn').click(); // needs to be called after the script as loaded to submit the form.
}
the pagalink node need to be placed below the form element on the page. Since that is where you would actually put the script. The script isn't really customizable since it modifies the dom on load.

Categories

Resources