I have a web application built using the Play Framework that utilizes Ajax to load view html pages into a 'container' div.
$( "#container" ).load("/contactUs"); // The contactUs page contains the widget
In one of my html pages, I include a Twitter feed widget.
<div id= "twitter_div">
<a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
</div>
When I initially load this page with the widget into the container, the Twitter feed displays correctly. The resulting HTML looks like this:
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; width: 331px;" title="Twitter Timeline" height="380"></iframe>
However, if I load another html page into the same container div and then attempt to reload the Twitter page, it fails to render properly. For instance:
First call
$( "#container" ).load("/contactUs"); // works correctlyThen call $( "#container" ).load("/home");
And then try to load
$( "#container" ).load("/contactUs"); // doesn't work properlyThe Twitter feed is still displayed as
<div id= "twitter_div">
<a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
</div>
Without being converted to an iframe.
This raises the question - why does this happen?
EDIT
My contactUS page is structured as follows:
<script> $(document).ready(function() {
!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");
});
</script>
<div id= "twitter_div">
<a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
</div>
EDIT 2
To resolve this issue, I implemented Mouser's solution.
As a result, my main page now looks like this:
<html>
<head>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
</head>
<body>
<div id = "container" ></div>
</body>
And my contactUS page is as follows:
<script> $(document).ready(function() {
twttr.widgets.load();
});
</script>
<div id= "twitter_div">
<a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
</div>