Cannot update tweet button with AJax

[khiemnh]

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.

[snobojohan]

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.

[benward]

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 Tweet, 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.

[tweatert]

Thanks! That works great.

[wanglishgo]

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

[btvBridger]

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

twttr.ready(function (twttr) {
for (var i in twttr.tfw)
alert(i + ': ’ + twttr[i]);
});


[episod]

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

[btvBridger]

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?
if (!window.twttr) {
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 = “//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”));
}

[chanian]

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!

[RalphDelnoy]

I’ve had the same problem…solved with a little bit of jquery…

//adding button to dom
$(’#tweetbutton’).append(’<a class=“twitter-share-button” href=“http://twitter.com/share” data-url="http://www.google.nl>Tweet’);
//loading widgets
$.getScript(’//platform.twitter.com/widgets.js’, function(){
//calling method load
twttr.widgets.load();


[RalphDelnoy]

I’ve had the same problem…solved with a little bit of jquery…

//adding button to dom
$(’#tweetbutton’).append(’<a class=“twitter-share-button” href=“http://twitter.com/share” data-url="http://www.google.nl>Tweet’);
//loading widgets
$.getScript(’//platform.twitter.com/widgets.js’, function(){
//calling method load
twttr.widgets.load();


[heruan]

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.

[chanian]

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

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

[danathan]

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.

[tdhooper]

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

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

[repunck]

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

[crtag]

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.

[Niaccurshi]

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.

[mpntod]

This is listed as fixed, but I’m still getting exactly the same problem.
twttr.ready(function() {
twttr.widgets.load();
});
Generates:
Uncaught TypeError: Cannot call method ‘load’ of undefined