Cannot update tweet button with AJax

khiemnh
@khiemnh Nguyen Huu Khiem

Hi,

I have a list of news, displaying in a grid and I would like to provide my user with ability to tweet any news that they want to their tweeter account. The tweet button displaying well first time the page load, but when user navigate to another page of grid, the tweet button is disappear because I use AJAX to update the grid content (If I do not use AJAX for updating the grid, then the button showing fine).

Please advice what should I do to make the tweet button working with AJAX, because I really have to use AJAX in my case.

Thank you very much.

2 years 36 weeks ago

Best Reply

BenWard
@BenWard Ben Ward

Hello Johan,

This afternoon we've pushed a small update to widgets.js that should help you with this problem. When you generate new articles in JavaScript, you can now call the function twttr.widgets.load(), which will re-run the detection and invocation flow for all uninitialized buttons in the page.

So, generate <a class="twitter-share-button" href="http://twitter.com/share" data-url="http://example.com/post/12345">Tweet</a>, insert it into the DOM, and then call twttr.widgets.load(), and everything should spring into life.

Please let me know if you run into any issues,

Ben
-- @benward, Twitter Platform team.

2 years 33 weeks ago

Replies

snobojohan
@snobojohan Johan Hallberg

Have the same problem... there's a discussion here http://groups.google.com/group/twitter-development-talk/browse_thread/thread/c23c0e3369053b8 but it doesn't seem to work.

2 years 33 weeks ago
benward
@benward Ben Ward

Hello Johan,

This afternoon we've pushed a small update to widgets.js that should help you with this problem. When you generate new articles in JavaScript, you can now call the function twttr.widgets.load(), which will re-run the detection and invocation flow for all uninitialized buttons in the page.

So, generate <a class="twitter-share-button" href="http://twitter.com/share" data-url="http://example.com/post/12345">Tweet</a>, insert it into the DOM, and then call twttr.widgets.load(), and everything should spring into life.

Please let me know if you run into any issues,

Ben
-- @benward, Twitter Platform team.

2 years 33 weeks ago
tweatert
@tweatert Martin

Thanks! That works great.

2 years 32 weeks ago
NiteshKT
@NiteshKT Nitesh Kumar
  1. <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  2.  
  3. if(typeof(twttr) !== 'undefined') 
  4.                      {
  5.                           $('#twlikenode0').attr('href','http://twitter.com/share');
  6.                            $('#twlikenode0').attr('class','twitter-share-button');
  7.                           $('#twlikenode0').attr('data-count','vertical');
  8.                          $('#twlikenode0').attr('data-url',document.location.href);
  9.                          twttr.widgets.load();
  10.                       }

this flow throw an error TypeError: twttr.widgets is undefined

here twttr object is found.

1 year 10 weeks ago
_ramoon
@_ramoon Ramon Vasconcelos

thanks! it worked great for me too!

1 year 5 weeks ago
wanglishgo
@wanglishgo WANGLISH 꿈이 있나요?

So, generate Tweet, insert it into the DOM, and then call twttr.widgets.load(), and everything should spring into life.

2 years 24 weeks ago
btvBridger
@btvBridger Bridger BuddyTV

Having an issue with the twttr.widgets.load.
When widgets.js is loaded (i.e. when twttr._e fires), twttr.widgets is still undefined.
Is this expected behavior?

E.g., the following code never alerts "widgets":

  1. twttr.ready(function (twttr) {
  2.     for (var i in twttr.tfw)
  3.         alert(i + ': ' + twttr[i]);
  4. });
2 years 16 weeks ago
episod
@episod Taylor Singletary

I cannot reproduce this. Which browser are you using? We had an update yesterday, perhaps it was just bad timing?

2 years 16 weeks ago
btvBridger
@btvBridger Bridger BuddyTV

Still repros on IE 9.0, FF 8.0, Chrome 15.0. (Also, code above should have been for (var i in twttr), not for (var i in twttr.tfw)). twttr.widgets is defined eventually, just not when the functions passed to twttr.ready are called.

IE displays the following JS error, but other browsers do not:
"Unable to get value of the property 'insertBefore': object is null or undefined
widgets.js, line 1 character 2752"

No one else seems to have had this issue; maybe I'm including it wrong?

  1. if (!window.twttr) {
  2.     window.twttr = (function (d, s, id) {
  3.         var t, js, fjs = d.getElementsByTagName(s)[0];
  4.         if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
  5.         js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  6.         return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
  7.     } (document, "script", "twitter-wjs"));
  8. }
2 years 16 weeks ago
chanian
@chanian Ian Chan

We have opened an issue for this located here: https://dev.twitter.com/issues/167

It's worth mentioning that generally, you shouldn't need to explicitly call twttr.widgets.load() method immediately after the page load as it will be called implicitly once widgets.js has loaded up.

Either way, we will fix up this sync issue and update the issue page once it has been patched!

2 years 16 weeks ago
tdhooper
@tdhooper Thomas Hooper

This is still a problem when widgets.js is loaded asynchronously

http://jsfiddle.net/tdhooper/erGzt/

1 year 48 weeks ago
mpntod
@mpntod Martin Tod

This is listed as fixed, but I'm still getting exactly the same problem.

  1. twttr.ready(function() {
  2.      twttr.widgets.load();
  3. });

Generates:
Uncaught TypeError: Cannot call method 'load' of undefined

1 year 34 weeks ago
RalphDelnoy
@RalphDelnoy Ralph Delnoy

I've had the same problem..solved with a little bit of jquery..

  1. //adding button to dom
  2. $('#tweetbutton').append('<a class="twitter-share-button" href="http://twitter.com/share" data-url="http://www.google.nl>Tweet</a>');
  3. //loading widgets
  4. $.getScript('//platform.twitter.com/widgets.js', function(){
  5. //calling method load
  6. twttr.widgets.load();
2 years 14 weeks ago
RalphDelnoy
@RalphDelnoy Ralph Delnoy

I've had the same problem..solved with a little bit of jquery..

  1. //adding button to dom
  2. $('#tweetbutton').append('<a class="twitter-share-button" href="http://twitter.com/share" data-url="http://www.google.nl>Tweet</a>');
  3. //loading widgets
  4. $.getScript('//platform.twitter.com/widgets.js', function(){
  5. //calling method load
  6. twttr.widgets.load();
2 years 14 weeks ago
heruan
@heruan Giovanni Lovato

It would be really useful being able to pass a context argument to twttr.widgets.load() to perform the rendering only on a specific part of the page, something like the gapi.plusone.render(context) for the Google+ button.

2 years 12 weeks ago
chanian
@chanian Ian Chan

This is a feature we have now seen requested several times and plan to add it in the near future. Thanks for the suggestion!

2 years 12 weeks ago
andy_cycology
@andy_cycology Andy @ Cycology

Great to hear, being able to pass an ID or class to that function is essential for locations where multiple tweet (and perhaps other) buttons are loaded individually - we do this on a list of social updates, and loading all 20 tweet buttons when someone just wants to share one of those updates is all we can do right now. The Facebook Like and Google +1 buttons all load explicitly which is nice.

Where is the best place to track that addition?

2 years 10 weeks ago
danathan
@danathan Dan Check

That would be a great help -- being able to avoid the initial parse and then explicitly render elements as they come into view would be a major improvement.

2 years 8 weeks ago
andy_cycology
@andy_cycology Andy @ Cycology

Hi Ian, did this ever happen, and if so how can we pass an id or class to load()?

1 year 30 weeks ago
repunck
@repunck Emiliano Ricci

the
twttr.widgets.load()
line, worked perfectly, thanks

1 year 41 weeks ago
crtag
@crtag Alexey Novikov

Note that twttr.widgets.load() will have no effect on dynamically generated buttons unless those are visible. Thus if your intention is to create something on the fly being hidden and then reveal in a nice way to user you should consider running twttr.widgets.load() either on your animation end or as soon as twitter button container starts to get visible. This is not the case for example with FB buttons, so something that should be considered along with context parsing - to allow rendering in a hidden elements.

1 year 41 weeks ago
Niaccurshi
@Niaccurshi Lee Griffin

Further to this it would be useful if there was some way to find when the twttr.widgets.load() call was complete. An optional callback (as well as being able to focus the method on a specific section of the page as suggested above) would allow more freedom to use the completed rendered tweets in further javascript.

1 year 37 weeks ago
endform
@endform André Pinter⏎

Hi guys,

twttr.widgets.load now takes an optional root HTMLElement argument. You can start using this now!

1 year 30 weeks ago
moisesdemoura
@moisesdemoura Moises de Moura

Well... this saved my life. :-) Tks a lot @BenWard

1 year 24 weeks ago
MehdiDevelopper
@MehdiDevelopper Mehdi Salmi

Merci beaucoup @BenWard, c'est juste ce qu'il me faillait !

1 year 1 week ago
sizzlingsamir
@sizzlingsamir Samir

I had the same issue previously.. but i added twttr.widgets.load() inside the script tag. and it works fine now.. Thanks a lot @BenWard

1 year 1 week ago