Hi i'm trying to get a listener for the foursquare save button by using the fsquare.widget.
But the documentation on the site is very short so I can't figure it out. Here's my code any idea's?
<!-- Place this anchor tag where you want the button to go -->
<a data-on-load="javascript:test();" href="https://foursquare.com/intent/venue.html" class="fourSq-widget" data-variant="wide">Save to foursquare</a>
<!-- Place this script somewhere after the anchor tag above. If you have multiple buttons, only include the script once. -->
<script type='text/javascript'>
(function() {
window.___fourSq = {
"explicit": false,
"onReady": function () {
var widget = new fourSq.widget.SaveTo();
fourSq.widget.Events.bind("follow", function(){
//wish something like this worked
alert('test');
});
}
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
I'm just guessing, but maybe it helps:
This is your(foursquares') code:
<script type='text/javascript'>
(function() {
window.___fourSq = {
"explicit": false,
"onReady": function () {
var widget = new fourSq.widget.SaveTo();
fourSq.widget.Events.bind("follow", function(){
//wish something like this worked
alert('test');
});
}
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
Maybe it helps to add:
"onSaveTo": function () {
alert("Dunno if that works :D");
});
}
Hope it works. If someone knows the real answer i will delete this.
Related
So I want to make jQuery load inside my script. the user doesn't have to add the <script> to the head, but the script adds automatically. I tried using:
(function() {;
var script = document.createElement("SCRIPT");
script.src = '/src/jquery-embed.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
} else {
window.setTimeout(function() {
checkReady(callback);
}, 20);
}
};
checkReady(function($) {
//code here
fucntion callbutton {
console.log("i return as not defined when called by a button")
}
when I add it, it works fine but all my functions break. How can I go about this without screwing up more?
edit: Link to the file im working on here
Per discussion, to achieve your goal you must ask your clients to delay their script execution until you've loaded your libraries (jQuery in this case).
Shown below is all that is necessary to accomplish the loading:
var script = document.createElement('SCRIPT');
document.getElementsByTagName('head')[0].appendChild(script);
script.src = 'https://code.jquery.com/jquery-3.5.1.min.js';
script.onload = () => {
document.dispatchEvent(new CustomEvent('doYourThing'));
};
Then, your users would use this code:
document.addEventListener('doYourThing', ()=>{
// End user code that relies on jQuery goes here
});
Here is a plunkr that demonstrates the principle.
You forgot document.body.appendChild() and you also forgot to add the parentheses after callbutton
change it to this:
(function() {
var script = document.createElement("SCRIPT");
document.body.appendChild(script);
script.src = '/src/jquery-embed.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
} else {
window.setTimeout(function() {
checkReady(callback);
}, 20);
}
};
checkReady(function($) {
//code here
function callbutton(){
console.log("i return as not defined when called by a button")
}
}
})
I am trying to include jquery into section, if condition is true. For some reasons script doesnt work for me, not sure what is wrong
function loadScript() {
var currentLocation = String(window.location);
var c = currentLocation.includes('test')
if(c===true){
//document.write('<scr'+'ipt type="text/javascript" src="assets/jquery.js"></scr'+'ipt>');
console.log(c);
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "jquery.js";
//head.appendChild(script);
document.getElementsByTagName('head')[0].appendChild(script);
alert("asdsad");
}
else{
console.log('error');
}
}
loadScript();
Any help is appreciated
function loadJQueryIfMatch(keyword) {
if (window.location.href.includes(keyword)) {
var script_tag = document.createElement('script');
script_tag.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(script_tag);
}
}
loadJQueryIfMatch("test");
Your code is fine currentLocation.includes('test') is a case sensitive only.
load script in codepen
I need to include a plugin after clicking on a button, on document ready the next code below don't work.
$(document).ready(function()
{
$("#ativar").click(function()
{
var script = document.createElement('script');
script.src = '//api.handtalk.me/plugin/latest/handtalk.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
});
});
<script src="//api.handtalk.me/plugin/latest/handtalk.min.js"></script>
<script>
var ht = new HT({
token: "a34asfdas43d4f5" //example of token
});
</script>
I tried to implement this javascript above, but this don't run the script after button click. How can i approach this?
Please Try this code:
$(document).ready(function(){
$("#ativar").click(function() {
var script = document.createElement('script');
script.id = 'handtalk-id';
script.src = '//api.handtalk.me/plugin/latest/handtalk.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
$(document).find('#handtalk-id').on('load', function() {
var ht = new HT({
token: "a34asfdas43d4f5" //example of token
});
});
});
});
You are executing code before the script has been downloading.
Try this
<script src="//api.handtalk.me/plugin/latest/handtalk.min.js"></script>
<script>
var isScriptLoaded = setIterval(function(){
if(window.HT){
clearInterval(isScriptLoaded);
var ht = new HT({
token: "a34asfdas43d4f5" //example of token
});
}
},1000);
</script>
I have an external JS file to manage all script in my page.
I want to write in this file some code to check if jquery plugin is loaded and (if not) load it!
I tried to begin my myScripts.js file with this code:
if (typeof jQuery == 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
And in my index.html
I did this:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<script src="myScripts.js"></script>
</head>
<body>
<button id="test">test</button>
<script>
$('#test').click( function() {
alert('clicked');
});
</script>
</body>
</html>
But it's not performing the alert dialog.. What's wrong?
Enclose click event in $(document).ready to ensure that the event gets fired when DOM is ready.
$(document).ready(function(){
$('#test').click( function() {
alert('clicked');
});
});
When you add the jquery file using the script.it would not available so you have to add onload listener to detect the when it's available.
function fnjquery() {
$('#test').click( function() {
alert('clicked');
});
}
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
jqTag.onload = fnjquery;
headTag.appendChild(jqTag);
} else {
fnjquery();
}
Here is a working Fiddle
function myJQueryCode() {
//Do stuff with jQuery
$('#test').click( function() {
alert('clicked');
});
}
if(typeof jQuery=='undefined') {
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
jqTag.onload = myJQueryCode;
headTag.appendChild(jqTag);
} else {
myJQueryCode();
}
<button id="test">
click
</button>
Im trying to write a script that will append the jquery cdn script
to the body of the document.
function addJquery() {
url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
addJquery();
What am i doing wrong here
You can't add scripts to the body and have them execute. Late-loaded scripts must be loaded through the head element:
(function addJQuery() {
var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.url = url;
script.onload = function() { addJQuery(); }
document.head.appendChild(script);
}());
However, this loads jQuery regardless of whether it's already loaded, so that's no good. Here's what you generally want instead:
(function loadMyCode() {
// do we have jquery? if not, load it.
if (typeof jQuery === "undefined") {
var url = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
var script = document.createElement('script');
script.url = url;
script.onload = function() {
// this will run after jquery gets loaded
loadMyCode();
}
document.head.appendChild(script);
return;
}
// if we get here, we know we have jquery
//
// rest of the code goes here.
}());
This is another way
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
li.async=true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();