Loading Dropbox dropin.js script in Meteor - javascript

I need to load this script in a Meteor project:
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="my-api-key"></script>
I first tried to do a $('head').append('<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="my-api-key"></script>') on Template.Image.onRendered, but the problem is that the library loads every time the template is rendered, and gives this error: dropins.js included more than once
I've also looked at the wait-on-lib package, https://github.com/DerMambo/wait-on-lib, but I'm not able to pass the data-app-key or id to the Router waiton function.
Do you have any suggestions on how to load this script?

I've never used dropbox sdk, but maybe this help you or give some idea for that.
if(window.Dropbox){
// Nice, is already loaded
}
else {
$("head")
.append('<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="your-api-key"></script>');
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.dropbox.com/static/api/2/dropins.js';
head.appendChild(script);
script.onload = function(){
//whatever, I Want It All!
};
}
You can add this on your Template.template_name.onCreated code block.

Related

How do I trigger ad on button click? [duplicate]

I have 2 divs in my HTML.
<div id="div1"></div>
<div id="div2"></div>
On clicking the "div2" I want to load an external javascript file say for example "https://abcapis.com/sample.js".
I tried including the JS file on onclick event like below,
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js";
document.getElementsByTagName("head")[0].appendChild(script);
This included the script tag in the head section but did not load since the script tag will be loaded on page load only (correct me here if I'm wrong).
Is there any other way that I could proceed?
Thanks in Advance.
Using jQuery's $.getScript() function should do the job for you.
Here is a slice of sample code:
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
If you are not using jQuery, you're going to have to learn how to use AJAX to dynamically load new script into your page.
Your code almost works. You need to use .setAttribute. Here is my working code. I used jQuery as my script:
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);
And that'll do it.
EDIT:
Some more info. When you do something like script.type = 'text/javascript' you are setting a property on the object but this is not necessarily the same thing as associating that property with an actual node attribute.
Are you using jQuery? If so, you can try $.getScript().
You might also want to check this answer. But basically, you can do something like this:
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
An info I missed was, that the path has to be absolute.
Copy and paste this function on your code.
<script type="text/javascript">
getScript=(url)=>{
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if(document.body == null){
document.head.appendChild(script);
}else{
document.body.appendChild(script);
}
}
</script>
And now call this function with your .js file url.
Example:getScript('https://abcapis.com/sample.js');
Info:
File should not contain DOMContentLoaded or $(document).ready() function

Conditionally add <script> element into header based on route

I have a website with different routes, say site.com/foo and site.com/bar. I would like some widget scripts to be added to the html headers of the site only if the route is site.com/foo (and not if it is site.com/bar)
Currently what I have are a bunch of elements in the header like this:
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","xyz");</script>
so every child route of site.com gets the scripts.
Is there a way to conditionally add in these scripts based on routes using JS and HTML?
Are you somewhat looking for this? It's in plain javascript without any library
<html>
<body onload="onloadFunc()">
</body>
<script>
var script = document.createElement("script");
script.type = "text/javascript";
function onloadFunc() {
let path = window.location.pathname
if(path.search("bar") >= 0){
script.src = "a.js";
} else{
script.src = "b.js";
}
}
document.body.appendChild(script);
</script>
</html>

Wait for jQuery to load

I'm trying to check if jQuery is loaded. If not, load it, then proceed to load external javascript files. The issue I'm having is one of the external files expects to have jQuery already loaded, so I get a 'jQuery not defined" error. Is there a way I can load jQuery using JavaScript, and as soon as it's done then continue?
if(!window.jQuery){
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
//load these scripts after jquery has been loaded
<script src="/some/other/js/file/that/requires/jquery"></script>
<script src="/some/other/js/file/that/requires/jquery"></script>
What I'd like to do is wait for this to completely load before continuing. I tried this but I got errors about exceeding call stack
Consider the technique tried and tested by HTML5Boilerplate instead:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
Note that <script src="//ajax.googleapis.com only works on an actual http: or https: server; if you're testing on a local filesystem, write <script src="http://ajax.googleapis.com instead.

How to load an external Javascript file during an "onclick" event?

I have 2 divs in my HTML.
<div id="div1"></div>
<div id="div2"></div>
On clicking the "div2" I want to load an external javascript file say for example "https://abcapis.com/sample.js".
I tried including the JS file on onclick event like below,
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js";
document.getElementsByTagName("head")[0].appendChild(script);
This included the script tag in the head section but did not load since the script tag will be loaded on page load only (correct me here if I'm wrong).
Is there any other way that I could proceed?
Thanks in Advance.
Using jQuery's $.getScript() function should do the job for you.
Here is a slice of sample code:
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
If you are not using jQuery, you're going to have to learn how to use AJAX to dynamically load new script into your page.
Your code almost works. You need to use .setAttribute. Here is my working code. I used jQuery as my script:
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);
And that'll do it.
EDIT:
Some more info. When you do something like script.type = 'text/javascript' you are setting a property on the object but this is not necessarily the same thing as associating that property with an actual node attribute.
Are you using jQuery? If so, you can try $.getScript().
You might also want to check this answer. But basically, you can do something like this:
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
An info I missed was, that the path has to be absolute.
Copy and paste this function on your code.
<script type="text/javascript">
getScript=(url)=>{
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if(document.body == null){
document.head.appendChild(script);
}else{
document.body.appendChild(script);
}
}
</script>
And now call this function with your .js file url.
Example:getScript('https://abcapis.com/sample.js');
Info:
File should not contain DOMContentLoaded or $(document).ready() function

Including JavaScript at runtime is not working in IE8

The below piece of code was working in IE6 & IE7 and almost all versions of FF. It just don't work in IE8. It doesn't work in the sense once I added the script tag in to HTML->HEAD element I don't see the script being loaded in the browser(the alerts in the script doesn't show up). I see the tags have been inserted in the HTML-HEAD though.
var head = document getElementsByTagName('head')[0];
// Check if the script is already loaded.
if (head ){
var script = document.createElement('script');
script.type = 'text/javascript';
script.language = 'JavaScript';
script.src = '/Tolven/scripts/' + jsFileName;
head.appendChild(script);
}
Does anybody have this issue? Or any clues to resolve this?
If this script is in <head> tag than head does not exists when this script is parsed and executed. So, of cource if (head) is false.
Your are using JS framework -- so feel free to use it's tools. And also do not forget to include Your framework, before using it.
<!-- if your are using mootools -->
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Your code...
});
</script>
<!-- if your are using prototype -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", function() {
// Your code...
});
</script>
Consider using a library like RequireJS or LABjs that do the job of including scripts at runtime really well.
var head = document getElementsByTagName('head')[0];
should be
var head = document.getElementsByTagName('head')[0];
Script seems to work after this modification.
This is was actually working. There is was an error(it only happens in IE8) in one of the scripts that's inserted at runtime. Eventually it's not executing alerts in the pages loaded next. Thanks for your answers though.

Categories