twitter widget only working in the first loading , then fails

Question

I have a web application which is developed using the Play Framework. There I have used Ajax to load most of the view html pages to a div called 'container' .

$( "#container" ).load("/contactUs"); // contactUs is the page which contains the widget

I have this html page which includes the widget for my twitter feed.

<div id= "twitter_div">
                <a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
            </div>

When I click that page to load to the container it will load and the twitter feed will display correctly. then HTML would be

<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>

But after I load another html page to that same container div and then again if I load the twitter page to the same div it wont render properly. ex :

first call $( "#container" ).load("/contactUs"); // working properly

then call $( "#container" ).load("/home");

and then again $( "#container" ).load("/contactUs"); // not working properly

It still shows

 <div id= "twitter_div">
                <a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
            </div>

Not the coverted a tag to an Iframe.

Why is this happening ?

EDIT

My contactUS page is like below

   <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

I solved this issue using Mouser's solution

So now my main page is more like below.

<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 like,

 <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>

also take a look intro [this SO][1] [1]: http://stackoverflow.com/a/18490110/2654789 — Semih Sari, Feb 15 '15 at 10:50
Optimus @prime, Twitter plugins are loaded upon page initialization. After that you need to call the parser manually: `twttr.widgets.load()`; — Mouser, Feb 15 '15 at 11:20
@Mouser : I edited the question. So where should I insert the code part `twttr.widgets.load();` — prime, Feb 15 '15 at 11:26
actually I found that approach before in this SOQ http://stackoverflow.com/questions/14010188/twitter-widget-only-load-first-time-in-webapp-ajax-page — prime, Feb 15 '15 at 11:27
But the I got `Uncaught ReferenceError: twttr is not defined` in my browser console. browser is Chrome — prime, Feb 15 '15 at 11:27

score 4 · Accepted Answer · answered Feb 15 '15 at 11:38

I'm using the following official Twitter loader:

    //TWITTER 
    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"));

Look at the reference window.twttr = (function (d,s,id). The code on your page is missing this.

My recommendation is to put this loader into your main page. Every time you load some external content into your div called container call the following code

twttr.widgets.load( $("#container")[0] );

Now Twitter should search that element for Twitter-elements and correctly parse them into timelines.

twitter widget only working in the first loading , then fails

1 Answers1