I am trying to add a Trustpilot TrustBox to a Next.js app.
I have this in my componentDidMount:
var trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);
This in my Head:
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
And this in my html:
<div id="trustbox" className="trustpilot-widget" data-locale="en-GB" data-template-id="XX" data-businessunit-id="XX" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="5" data-schema-type="Organization">
Trustpilot
</div>
This works fine on hot reload. E.g. if I add the code while the server is running. But o fresh re-load it breaks and I get the following error:
Cannot read property 'loadFromElement' of undefined
Any ideas?
Figured it out. You need the following code in componentDidMount to ensure the external js is loaded first.
componentDidMount() {
var aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
aScript.async = "true"
document.head.appendChild(aScript);
aScript.onload = function () {
var trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);
};
}
Hope this helps anyone stuck with the same thing.
For future readers, Trustpilot has now a documentation for single page apps that you can find here
I was wondering why nothing was rendered even with their official documentation but after 2 hours of pain I found out that (at the time i am writing this) you can't load their widget on the Brave navigator...
Related
Im trying to add JWPlayer to my React component, i know in a static/server rendered webpage you can simply add the script tag, and then you can use the component but in react its a different story.
for example in a server rendered language like php rendering a JWPlayer component looks as follows:
<script src="location of jwplayer library cdn"></script>
</head>
<body>
<div id="myElement"></div>
<script type="text/JavaScript">
jwplayer("myElement").setup({
"playlist": [{
"file": "<?php echo $videourl; ?>"
}]
});
</script>
this is easy, and there is ample documentation on how to make this work. but i want to be able to use the CDN from JWPlayer in react as well, and the most popular react package has been deprecated, and is no longer being supported. I feel like i should be able to add to the DOM the cdn, and then be able to use that to be able to finish the rest of this.
for example i have:
useEffect(() => {
const JWPlayerScript = async () => {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "location of jwplayer library cdn";
script.async = true;
document.body.appendChild(script);
};
JWPlayerScript()},[])
This works, however i still dont have access to any of the javascript in the cdn, my console just keeps stating that jwplayer() has not been defined, and its correct. it hasnt but i dont know how to extract that from the cdn to gain access to those javascript functions.
i am completely new to Angularjs trying to understand how can i use ons.enableAutoStatusBarFill(); this so i my menus wont over take the status bar.
here is how i have my controller setup.
var mod = ons.bootstrap('app', ['onsen']);
mod.controller('MyControler', function($scope) {
ons.ready(function() {
// code inside...
});
});
Any suggestions will be helpful. I am using this reference http://onsen.io/guide/overview.html#UtilityAPIs
I tried to solve it this way
var module = ons.bootstrap('my-app', ['onsen', 'ngSanitize']);
var module = ons.enableAutoStatusBarFill();
It seems like working but its not finding my controllers now. Getting this error
Uncaught TypeError: Cannot read property 'controller' of undefined
I got it solved. Actually the cordoda file was at the bottom of my page. Due to which the page was not able to load properly.
Now i added in this pattern in my index.html and got it resolved.
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="lib/onsen/js/angular/angular-sanitize.min.js"></script>
<script src="cordova.js"></script> //This should be added first before the main custom.js file which starts my module.
<script src="js/custom.js"></script>
Thank you for all your support!
I'm very much a noob to Angular. And I'm getting an error that I just can't figure out (even after much Googling and fiddling around).
Here's my code (and here it is on CodePen):
<!DOCTYPE html>
<html ng-app="ergo">
<title>Ergo</title>
</html>
<body ng-controller="ErgoController as ergo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script>
( function() {
var app = angular.module( "ergo", [] );
app.controller( "ErgoController", function() {
// TODO
} );
} );
</script>
</body>
</html>
The code above produces this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=ergo&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js%3A17%3A339)
(Here's a link to the full URL from that error message.)
A few places on the web say that this can happen if the ngRoute module fails to load - it was formerly part of the Angular core, but was split out into its own module in 1.2.
Now, I'm not using ngRoute anywhere in this very simple page, so I don't understand how that could be the problem - but hey, I'll give it a shot. Here's my revised page (and the corresponding CodePen) - I've added another tag to load the ngRoute module, and also added 'ngRoute' as a dependency when instantiating my module:
<!DOCTYPE html>
<html ng-app="ergo">
<title>Ergo</title>
</html>
<body ng-controller="ErgoController as ergo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script>
( function() {
var app = angular.module( "ergo", ['ngRoute'] );
app.controller( "ErgoController", function() {
// TODO
} );
} );
</script>
</body>
</html>
I still get the same error.
Help? I was doing pretty much the exact same thing the other day, and it was working fine. (Unfortunately, I don't have that code handy to examine.)
Secondary question: if you look at the errors in Chrome's JavaScript console after loading either of these pages, you'll see that the stack trace is full of references to this JavaScript file:
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js
Which is bizarre, because the URL I'm actually loading in my <script> tag is this:
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js
(one URL contains .min; the other does not)
I looked at the network console to see whether angular.min.js was loading angular.js dynamically (for some bizarre reason), or maybe the .min URL was simply redirecting to the unminified version. Neither seems to be the case. So, why is the console showing references to a JavaScript file that, as far as I can tell, isn't even being loaded on this page?
It looks like you aren't invoking your function that sets up your angular app.
Try invoking that function and you should be good to go:
<script>
(function() {
var app = angular.module( "ergo", ['ngRoute'] );
app.controller( "ErgoController", function() {
// TODO
} );
})();
</script>
I'm customizing a Refinery CMS instance and creating custom front end pages. I tried to follow the README for Wymeditor, but it seems that the Wymeditor embedded in RefineryCMS has been modified, and this isn't working.
https://github.com/wymeditor/wymeditor
I tried to view the source of a Refinery admin page with the editor, and just copied the Javascript and CSS source tags to include into my front end custom page, and added the class to the text area, and called the wymeditor() function, but it gave a Javascript error.
HTML source...
<link href="/assets/wymeditor/skins/refinery/skin.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/wymeditor/setup.js?body=1" type="text/javascript"></script>
<script src="/assets/wymeditor/functions.js?body=1" type="text/javascript"></script>
...
Yields console error
Uncaught TypeError: Cannot read property 'msie' of undefined boot_wym.js?body=1:117
Try a version of jquery older than 1.9. The .browser method has been removed in 1.9
You can also try this monkey patch of js
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
I added this immediately after the textarea. I wasn't able to get it to work with the JQuery that came with Refinery (even with jquery-migrate), and I wasn't able to get it to work with the Wymeditor that came with Refinery either. I don't believe this is the ideal solution, but it's all I could come up with for now. I'm sure it will break something else, as the console is giving errors like 'Object has no method carousel' now. I don't want to put an old JQuery in the application.js or application.haml layout, so hopefully this will localize breakage. Open to more ideas...
= f.text_area :body, rows: 15, cols: 100, class: 'wymeditor'
<script type="text/javascript" src="/assets/jquery/jquery.js"></script>
<script type="text/javascript" src="/assets/wymeditor/jquery.wymeditor.js"></script>
:javascript
jQuery(function() {
$('.wymeditor').wymeditor();
console.log("initialized .wymeditor: "+$('.wymeditor'));
});
I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.
Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.
I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.
Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.