Twitter widget break when moved with jQuery

[stevebeauge]

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() {
    $("#wrapper").appendTo($("#right"));
  });

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

<div id='wrapper'>
<a class="twitter-timeline" href="https://twitter.com/hashtag/#dragnpoint" data-widget-id="709489444726968320">Chargement des tweets</a>
<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>
</div>

PS: actually crossposted on stackoverflow

[JakeHarding]

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)

[system]

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