Angular Data Binding Inside an Embed.ly Twitter Widget Not Working - javascript

Hi I'm trying to build something with angular where you can submit the url of a tweet and it will embed the tweet. I thought I could just stick the handlebars inside of embedly's twitter widget but it doesn't work. It's something maybe about the order in which the events are firing.
This is the code
<section data-ng-controller="ArticlesController">
{{article.title}}<p>
<a class="embedly-card" href="{{article.title}}">hi</a><p>
<a class="embedly-card" href="https://twitter.com/jashkenas/status/563803426107449347">bye</a>
<a class="embedly-card" ng-href="{{article.title}}">why</a>
</section>
And this is the result
As you can see I tried it a few different ways and it works when it just has the url pasted in there but not with the angular data. Although when you click on the hi and why links they do take you to the right place.
This is inspecting the page
The one that worked created this whole iframe but the others are just plain links.
Should also say theres an embedly script which I put in the header
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
Any help is much appreciated. I don't really know angular, I just wanted to play around and learn a bit about it. I guess maybe I am now. Thanks.

The problem you met is that embedly renders the element before Angular renders the DOM element, which means embedly may don't know what the href actually is and it stops rendering and left nothing.
You can refer to these projects 1 2 for how to handle rendering sequence.

so I ended up just delaying the embedly script loading with this js
setTimeout(function() {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);
}, 5000);
i found here https://stackoverflow.com/a/9611751/927591

Related

How to display external <script> using div in Reactjs?

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.

Script doesn't run after load a div with ajax

I have the script audiojs for changing the style of audios tag in html when I go to my page it work without problems, but when I click a button to reload div (this div contain audios tags) with function load jQuery the style of audiojs removed, I tried to get script after load the div with jQuery getScript, but the script load many times that caused to stop of my browser.
this is the function to call the audiojs
audiojs.events.ready(function() {
audiojs.createAll();
});
I want a solution to call this function one time no more, thanks
Try to adding a new script tag to with the script to re-load in your code something like below:
<script language="text/javascript">
function audiojs()
{
var div= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'audiojs.js';
div.appendChild(script);
}
audiojs();
</script>
I hope you will get some ideas now. Also check your caching.
It's hard to know without any link to the audio.js library, but most API's or libraries will give some indication that they are loaded. I would use an if statement to create something like:
(function () {
function checkForLoaded(){
if (audiojs.state !== null) { //or something similar
audiojs.createAll();
}
}
})();
Thanks everyone,
i found the solution,
after loading the div with ajax i added this code to remove the class audiojs
$("audio").removeClass("audiojs");

Struggling with Javascript and jQuery logic

Please help me by answering with a short theory behind how it works as I would like to understand the logic rather than just get an answer. If you know of any material that explains it for beginners then please reference it. I have spent quite a lot of time researching and have come up blank and find the name or anything that explains this behavior.
My question is and want to understand, I thought the way browsers parse the html is line by line. When it encounters a <script> tag everything else comes to a halt (this basic example) whilst it passes it off to the js interpreter to also complete line by line. Once it has finished it then passes it back to the html parser to continue with the rest of the page
So my question is from the short example below, why is "find" being loaded before backup.js has completed, when I remove backup.js and have jQuery instead the code in console.log(find); works as expected, but when jQuery is removed from html and asked to be added via backup.js, which is still the first tag encountered before the console.log(find); at the bottom, it does not work? I get the following error message:
ReferenceError: $ is not defined
var find = $('.link');
Makes me believe that var find = $('.link'); is being attempted to be accessed before backup.js and jQuery have finished loading, but why is this when "find" comes long after backup.js? Or am I doing something wrong with the Javascript code in backup.js that adds it after rather than earlier?
I have this short piece of html:
<html>
<head>
<!--<script src="https://code.jquery.com/jquery-1.11.1.js"></script>-->
<script type="text/javascript" src="backup.js"></script>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<p>hello</p>
<div class="link">test</div>
<script>
var find = $('.link');
console.log(find);
</script>
</body>
</html>
In backup.js I have this:
if(typeof jQuery=='undefined') {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'https://code.jquery.com/jquery-1.11.1.js';
head.appendChild(script);
console.log('jquery not found');
}
else{
console.log('jquery found');
}
In your backup.js file you load jquery from the server if it does not yet exist. Loading something from the server through an Asynchronous call means it won't stop the page rendering, so what happens is:
The page starts rendering, it comes to backup.js, starts loading jquery from the server, keeps rendering the page while loading jquery, goes all the way to the bottom and then finds $(".link");. In this line of code the symbol "$" means jQuery (I want to use jquery for this part of code), but it might happen that jquery is not yet completely loaded, and so the program breaks and tells you ReferenceError: $ is not defined (or in human: you're trying to use $ but it doesn't exist).
To fix this, you can create a function that gets called when jquery has loaded:
if(typeof jQuery=='undefined') {
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'https://code.jquery.com/jquery-1.11.1.js';
script.onload = function() {
runAfterjQueryLoad();
}
head.appendChild(script);
console.log('jquery not found');
} else {
console.log('jquery found');
}
function runAfterjQueryLoad() {
var find = $('.link');
console.log(find);
}
Working fiddle: http://jsfiddle.net/aj803z7u/
You're right about the page rendering top-down, but always be careful for asynchronous calls (also know as ajax, in case you want to search for more information on the web).
The best way of learning is by doing. Think of a page you want to create and try to do it, searching for tutorials for each single small step (you can always come here on SO and ask questions) .

Use a JavaScript variable inside src of script tag

Google provides its script embed code to display a trends Map by placing this code in our site.
<script type="text/javascript" src="//www.google.com.pk/trends/embed.js?hl=en-US&q=iphone&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330"></script>
The above code displays the trends map.
Notice the q=iphone in the above URL. I want to pass a JavaScript variable value instead of hard coding a fixed value like iPhone in this case.
How can I use a JavaScript variable inside the src of script tag?
I tried creating script programmatically, it injects the script code but the script does not get executed.
My try
document.body.appendChild(document.createElement('script')).src= varHavingScriptURL;
My try is in a JS Fiddle here.
The problem is, you can not do this after page load. Look at the source of the script
document.write('<iframe width="500" ... </iframe>');
So you need to do this as the page is rendering because of the document.write.
Now looking at what you did
document.body.appendChild(document.createElement('script')).src = varHavingScriptURL;
That is not going to work, you need to break it up
var scr = document.createElement('script');
scr.src = varHavingScriptURL;
document.getElementsByTagName("head")[0].appendChild(scr);
but again, it is not going to work because of the document.write.
Finally after hours of struggle, I found the solution using PostScribe.
// jQuery used as an example of delaying until load.
$(function
() {
// Build url params and make the ad call
var str= "magic";
postscribe('#ad', '<script src=//www.google.com.pk/trends/embed.js?hl=en-US&q='+str+'&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330><\/script>');
});
Postscribe
Working Demo

Site content shifts vertically on certain pages

I'm in the process of building a new website for my wife's business, using Squarespace. Don't tell her, since it's one of her Christmas presents. :)
However, I'm experiencing a weird issue. About half of the pages on the site include content from a third-party widget called Healcode. Those pages have a strange jerkiness to them on pageload, where the logo and navbar move around -- ultimately winding up in the right spot, but looking bad while doing so. Pages that don't have a third-party widget don't have this jerkiness.
Example of page that jerks: https://coconditioning.squarespace.com/yoga-classes/
Example of page that doesn't jerk: https://coconditioning.squarespace.com/private-coaching/
The Healcode widget is javascript code that looks like this:
<script type="text/javascript">
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
Any help would be MUCH appreciated. Thank you in advance!
You could hide the page until the body loads:
<body style = 'display: none'; />
And in your javascript, adding window.onload():
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write( unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
window.onload = function()
{
document.body.style.display = 'block';
};
Also, is document.write() the best solution for you?
Don't try to use document.write if possible as with document.write JS parser doesn't know where to put it. at best, the browser will ignore it. at worst, it could write over the top of your current document. Use appendChild
function loadHealCodeScript () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.healcode.com/javascripts/hc_widget.js'
document.body.appendChild(script);
}
window.onload = loadHealCodeScript; // load healcode after page has been loaded
The jittering effect is happening because the healcode is loading its script before the page has completely loaded. If possible place all you javascripts after the body tag rather than head
As suggested by google also https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

Categories

Resources