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.
Related
I've been stuck with integrating external script in my React application.
The idea is to use external html/js widget that will suggest addresses based on the data in the input field.
The widget requires two things:
<script type="text/javascript" src="https://some.address.com/widget.min.js"></script> - must be inside the html head tag.
<script> var widget = new jsWidget ({"detail1":"foo","detail2":"bar","lang":"en"});</script> - must be inside the html body tag.
My question is - how can I create new instance of an external script if the given item is not imported as a module? I know that the first part can be resolved with useEffect hook. However, if I try to make new instance of jsWidget, the code editor throws an error saying that jsWidget is not defined.
The given widget works fine in pure html. For example:
<html>
<head>
<script1></script1>
</head>
<body>
<script2></script2>
</body>
</html>
I've been stuck with this for a long time now and I can't figure out a way how to fix this. I would be really thankful if someone could give some advice.
maybe not the best method. i think it'll works
var script1 = document.createElement("script");
script1.type = "text/javascript";
script1.src = "https://some.address.com/widget.min.js";
var script2 = document.createElement("script");
script2.innerHTML = 'new jsWidget ({"detail1":"foo","detail2":"bar","lang":"en"});';
document.head.appendChild(script1);
script1.onload = function () {
document.body.appendChild(script2);
};
I'm trying to add a script tag in React,
<script src='https://squareup.com/appointments/buyer/widget/40tyyrjazxhd8u/B4GN8P3Q0N0Y8.js'></script>,
that contains a widget from an online booking site, how would I be able to add it in React?
Thank you !
So, something like this might work on your componentDidMount():
componentDidMount() {
const script = document.createElement("script");
script.src = "https://squareup.com/appointments/buyer/widget/40tyyrjazxhd8u/B4GN8P3Q0N0Y8.js";
script.async = true;
document.body.appendChild(script);
}
Here's a sandbox
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.
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
I'm trying to load an Accuweather widget which can change in location using a dropdown list. It works when there's no loaded location at first. But when i try to change the location, it doesn't work anymore. My guess is I should recall the Accuweather script or function (but I don't know how). Here's the link of the image of what I've done.
And here's a part of my JS code:
$('#awcc1414464209059').attr('data-locationkey',selected); //change the div's data-location-key to the selected location's key
$('#awcc1414464209059').attr('class',"aw-widget-current");
$('#awcc1414464209059').attr('data-unit', "c");
$('#awcc1414464209059').attr('data-language',"en-us");
$('#awcc1414464209059').attr('data-useip', "false");
$('#awcc1414464209059').attr('data-uid',"awcc1414464209059");
getweather();
function getweather(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "assets/js/accuweather.js";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
PS: It would be better if I can load multiple widgets at once, so that I can display all the locations for users' convenience. (I tried it already but I can't make it work)
I have made it work out. For those who need help with the same problem, you need to reload the script file for accuweather.
for ($m=0; $m < sizeof($mun_name); $m++) {
$echo .= '
<div id="awcc1414464'.$weather_id[$m].'" data-locationkey="'.$weather_id[$m].'" class="aw-widget-current" data-unit="c" data-language="en-us" data-useip="false" data-uid="awcc1414464'.$weather_id[$m].'"></div>
<script>getweather()</script>';
}
In my code, the getweather() function loads the script and adds it to the html head, thus giving me the result in this link.