We Keep Coding

Loading Dropbox dropin.js script in Meteor

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.

how to add this html code into the append code

So I have the following html code:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
Please take a look at the actual code run in the browser. It shows a link.
I want to add the link to an navigation bar with the following code:
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
But I'm not managing to add the code within the append correctly. How do I reference the js source and call the xMinicart function within the append code?
Thanks a lot!
super important update!
It's almost there! the following javascript code does work in jsfiddle but it doesn't work in squarespace. I'm not sure why.
$('nav ul').append('<li id="hello">test</li>');
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
You can see it working here: http://jsfiddle.net/u3NKD/8/

I think you want to use jQuery's getScript function
https://api.jquery.com/jQuery.getScript/
So you would load the URL and then use the callback to execute the code
<script>
var url = "https://app.ecwid.com/script.js?4549118";
$.getScript( url, function() {
var s = document.createElement('script');
s.innerText = 'xMinicart("style=","layout=Mini");'
$('nav ul').append(s);
});
</script>

Try this instead of my other answer, here's a JSFiddle I tried
http://jsfiddle.net/W2pQA/1
<script>
$(function(){
$('ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
var url = "https://app.ecwid.com/script.js?4549118";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
var s = document.createElement('script');
s.innerText = 'xMinicart("style=","layout=Mini");'
$('ul').append(script).append(s);
});
</script>

It may be that the JS you're trying to execute is trying to run before the external JS file has completed loading.
I modified your latest JSFiddle to wait for the external file to load, then when finished, execute the xMiniCart code:
http://jsfiddle.net/u3NKD/9/
$('nav ul').append('<li id="hello">test</li>');
var script = $.getScript("https://app.ecwid.com/script.js?4549118");
$.when(script).then(function(){
xMinicart("style=","layout=Mini","id=hello");
});
Here's some documentation on the $.when code above:
https://api.jquery.com/jQuery.when/

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

Javascript: update a src with dynamic info

I am trying to dynamically change the src of a tag. It pulls in the src to the tag just fine, but it doesn't run the javascript inside of the "example.js"
My.html
<script src='' id="s1"></script>
<script language="javascript">
function changeSrc()
{
s1.src = "example.js";
};
changeSrc();
</script>
example.js
document.write('<img src="somecoolimage.gif" alt="myweb"/>');
Example.js isn't writing the above info.

You can't change the src of a script block dynamically (it's not consistent across different browsers), add a new script block instead:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'example.js';
document.getElementById('some_div_id').appendChild(script);

Can't append a script to head

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://www.mydomain.com/bleh.php';
script.id = 'rawr';
$('head').append(script);
alert($('#rawr').attr('src'));
That returns null. Why is this?

Why not use getScript?

You can use the regular .appendChild() instead:
$('head')[0].appendChild(script);
http://jsfiddle.net/PeaqH/
What this will do is access the first <head> element on the page and then use the regular DOM child append. As far as why the method you tried didn't work, I'm not sure... I have to think about it, although I suspect it has something to do with how jQuery handles adding script elements to the page.

Something worth looking into. Run this with Firebug open.
<script src="jquery.js" id="jq"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
$(function(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js';
script.id = 'rawr';
$('head').append(script);
console.log($('#jq'));
});
</script>
U will see that jqueryUI is not being shown in HTML tab of firebug but when u look at the Net tab its showing that jQueryui.min file has loaded.
Now click on the console tab and expand #jq item. You can see all the options available to you. There is no src or source option.
Hope this helped.