I seem to be running into an issue with the Twitter widget Timeline, although the problem could apply to any script.
My goal is to embed the Twitter widget Timeline (which ultimately results in an iframe). It appears that the method of adding the iframe involves inserting a script into the post, which will then call another script with functions that will eventually execute a function to load/create the final iframe.
<script>
!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>
On my website, I have posts (post1, post2, post3) that display partial content of the post. When a user clicks on the title of one of these posts, the partial post is removed from the DOM, the full post is fetched with Ajax, and then attached to the DOM. When closing the fully loaded post, its content is removed from the DOM and the partial post content is attached again. This process of attaching and detaching is to prevent conflicts with #ids.
However, when the partial content is attached back into the post, the iframe is empty and the script does not execute again to load it. This issue only occurs with the Twitter widget iframe, and not with other iframes like YouTube videos.
Can someone provide guidance on this issue?
Update:
There are a few things worth noting here. The script added in the post appears to load the Twitter widget script to the head of the document. The post script checks for the existence of this head script before creating the iframe. This suggests that the iframe is not being created during the full post (Ajax) load. Deleting the head script allows the iframe to be created correctly in the full post.
However, this "trick" does not solve the issue for the reattached content. The problem persists when I reattach the content and the post script does not run again (nor does any other script).
Update2:
Here is a fiddle showcasing the reattach issue http://jsfiddle.net/KsFJR/