javascript - twitter widget only working in the first loading , then fails - Stack Overflow

admin2025-04-19 0

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="//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="//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/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

   });
 </script>
   <div id= "twitter_div">
            <a class="twitter-timeline" href="//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=".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="//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
 </div>

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.//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.//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./widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

   });
 </script>
   <div id= "twitter_div">
            <a class="twitter-timeline" href="https://twitter.//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./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.//XXXX" data-widget-id="XXXXXX">Tweets by @@XXXX</a>
 </div>

Share edited Feb 15, 2015 at 11:49 asked Feb 15, 2015 at 10:34 prime 15.6k16 gold badges104 silver badges137 bronze badges

also take a look intro [this SO][1] [1]: stackoverflow./a/18490110/2654789 – Semih Sari Commented Feb 15, 2015 at 10:50
how that question is related to this question ? – prime Commented Feb 15, 2015 at 11:11
Optimus @prime, Twitter plugins are loaded upon page initialization. After that you need to call the parser manually: twttr.widgets.load(); – Mouser Commented Feb 15, 2015 at 11:20
@Mouser : I edited the question. So where should I insert the code part twttr.widgets.load(); – prime Commented Feb 15, 2015 at 11:26
actually I found that approach before in this SOQ stackoverflow./questions/14010188/… – prime Commented Feb 15, 2015 at 11:27

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

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./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 remendation 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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745053818a282279.html

javascripttwitter widget only working in the first loading

then failsStack Overflow

最新回复(0)