Embedded twitter feed not loading every time

1
Hi there We are implementing a twitter feed using the instructions in these posts (thanks to those who posted): https://community.mendix.com/link/questions/7142 and https://community.mendix.com/link/questions/6908 We used the following code in separate snippets: HTML Snippet 1 (Masked data-widget-id and User): <a class="twitter-timeline" href="https://twitter.com/search?q=%40MyUser" data-tweet-limit="1" data-chrome="noheader nofooter noborders noscrollbar transparent" data-widget-id="MyWidgetID">Tweets about @MyUser</a> Javascript Snippet 1 (JQuery not enabled): !function(d,s,id) { var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)) { js=d.createElement(s); js.id=id; js.src=p+"://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs); } } (document,"script","twitter-wjs"); Javascript Snippet 2 (JQuery not enabled): if (typeof twttr != "undefined") { twttr.widgets.load( ); } The timeline feed seems to load content sporadically (once every few minutes) and produces nothing when we refresh the page on subsequent loads (i.e. we only see an empty block on the page).  When it produces something it sometimes renders a nicely rendered version we expect, sometimes produces a poorly rendered version of what we expect and sometimes it just produces a link to twitter.  I placed console.log() lines in the Javascript at certain sections for debugging purposes and I can see these points triggered in the console which tells me that the code is triggered.  There aren't any errors in the console. Has anyone else seen something similar? Many thanks
asked
1 answers
0

Hi Gustav,

Based on your description I would guess that the issues are cause because the loading order is not imposed for the javascript snippets.
It just happens sometimes that the javascript snippet is downloaded before the page (the DOM) is fuly rendered. Once it is downloaded it is immediatly exectued which means it does not find your HTML element so you are left with an empty block.

I am not 100% sure that this is exactly your problem. One way to check would be to see if undefined errors appear in your browser console when you open the application.


If this is indeed the issue then IOP: The safest and most reliable way to fix it is to build your own Custom Widget wrapper. Custom widgets in mendix use AMD to explicitly define what needs to be loaded before the code is run.

If you don"t have any experiance with custom widgets and it seems like a lot of effort, then you need to find a way to enforce the order in which order your snippets get executed in the browser.

Luckily you will find plenty of information online about this.
You can use ths answer to start https://stackoverflow.com/questions/8100576/how-to-check-if-dom-is-ready-without-a-framework

Hope this helps,
Andrej

answered