Widget doesn't load after navigating within the website



Hello, I have a rails site in which I added a hashtag widget in the landing page. If I click to a different page and then come back to the landing page, the widget won’t load; if I reload the entire page then the widget will load. The website can be found here.

I saw a similar question here, though I wasn’t sure how to apply the fix. Is that something I need to insert within the widget I already have, or immediately below it in the same script. I am a newb without much experience with javascript or jQuery, so this help will help a lot!

The widget I’m using is:

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/hashtag/srag5" data-widget-id="695833566630932481">#srag5 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>


The reason this is happening is because the rendered iframe is taken out of the DOM (when you navigate to a different page) and then put back. iframe loses all its contents if it’s removed from the live DOM. This is standard browser behaviour and unfortunately the fix is not straightforward.

I’m not familiar with Rails, so I can only offer generic solutions here. There are 2 ways to go about it:

  1. Do not take the iframe out of the DOM. You can hide it with css when you navigate to another page. This will not destroy the contents of the iframe, so when you navigate back, you can show it.
  2. Re-render the widget whenever you come to that page i.e. you would delete the empty iframe, replace it with the original embed code[a], then call twitter.widgets.load().

Hope that helps.

a: <a class="twitter-timeline" data-dnt="true" href="..." data-widget-id="...">...</a>


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