Twitter widget break when moved with jQuery



I’m trying to move a twitter widget from one container to another.

However, when the widget moves, it’s getting blank.
Using any dom explorer, I can see that its internal iframe’s body is empty.

How to workaround this?

A reproductible fiddle shows the behavior.

I’m trying to move the widget using jQuery.move:

  $("#btnRepro").click(function() {

The widget is produced using this snippet (generated on twitter website:

<div id='wrapper'>
<a class="twitter-timeline" href="" data-widget-id="709489444726968320">Chargement des tweets</a>
  ! 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); = id;js.src = p + "://";fjs.parentNode.insertBefore(js, fjs);}}(document, "script", "twitter-wjs");


PS: actually crossposted on stackoverflow


Moving an iframe causes the iframe to reload and since our timeline widget is housed in a srcless iframe, it’ll reload to an empty document. We do not currently have anything in place to detect that a widget has been moved and hence needs to be rerendered.

Depending on your needs, one potentially viable approach would be to delete/create rather than move. You can use our factory functions to dynamically create a timeline widget.

twttr.widgets.createTimeline(widgetId, containerEl)


This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.