Tagged AJAX

Refresh Twitter and Facebook social icons after an Ajax request

I recently found myself dealing with the following problem: I wanted to lazy-load as much of the social networking components of a site as possible, which meant deferring the load of both the Twitter and Facebook JS until after the document finished rendering. This process was relatively straightforward, but in the course of implementing the buttons I discovered something interesting: when you do an Ajax request to refresh a portion of the page, buttons in there are not dynamically refreshed. This makes sense–there’s nothing to re-run the appropriate JS methods to render them–but it’s not good.

My quest on Google first took me to this forum, where the exact same problem I was having was discussed back in Sept-Oct. Since a new version of the Twitter @anywhere API came out today, and doesn’t include a TweetButton, that wasn’t going to be an option either.

Thankfully, I found this post, which outlined the best workaround I’d seen yet for interacting with Twitter’s widgets.js file. It’s worth a quick aside here: the problem is created because the @anywhere API, which has all named functions, does not have a method to create a TweetButton. That is handled instead within widgets.js, which is all wrapped in one big anonymous function. There’s a render() method hiding pitifully inside, but it took someone with JS skills beyond mine to coax it out of hiding.

Both of the examples in the previous link work great, and can be cut-and-paste. In my case, however, I didn’t want to mess with the actual $.get request, which was happening in a completely different script file, and was written years ago. Thankfully, a few quick tweaks resulted in this:

$('.topic-term-link').ajaxComplete(function(){
   //re-render the facebook icons (in a div with id of 'content')     
   FB.XFBML.parse(document.getElementById('content'));

  //re-render twitter icons by calling the render() method on each
  $('#content').find('a.twitter-share-button').each(function(){
     var tweet_button = new twttr.TweetButton( $( this ).get( 0 ) );
     tweet_button.render();
  });
});

Since jQuery lets me bind directly to the ajaxComplete event, I didn’t even need control over the Ajax call, which is good, because it wasn’t an option. Now, maybe Twitter will name the main function in widgets.js and we can just call a single line like for Facebook in the above example.

Google announces screenshots of next-generation calendar (CL2)

It’s been well over three weeks since Google first announced that its next-generation calendar app known as CL2 was in the closed-beta phase. According to the company, around 200 individuals were given access to the calendar (the rest of us just get an invalid page error), with strict instructions on how to preserve secrecy. In spite of this, TechCrunch.com indicates that one of the beta testers provided access to Yahoo! While Yahoo! has since notified Google of this, it would be rediculous to assume they did so before carefully analyzing all of the new features.
The advantages offered by the new CL2 should be many and varied. Obviously, the calendar will be highly integrated with Google’s popular Gmail e-mail application, and will utilize the latest in AJAX programming techniques. TechCrunch also has a list of some of the features that Google is intending to include in the public release:

Creating Events

You can create events on your calendar in a number of ways.

Click ‘Create Event.‘ This brings you to the create event page, where you can enter information about your event.

Click on Quick Add (or type the letter Q). Quick Add gives you a text box where you can type all the information about your event in normal English, and we’ll fill out the form for you. We’re pretty excited about this feature, so please let us know how it works for you.

Drag-to-create. If you’re looking at the day where you want to create an event on your calendar, just click and drag your mouse from the desired start time to the end time. Once you’ve selected your time range, you can just choose a title for your new event.

Event Pages

Whenever you create an event, we create a web page which you’ll see when you click on the “more details” link on any event. This web page is only visible to you, unless you’ve invited other people to your event or made the event public, in which case you can use the page to share information about the event with people who are attending or the public at large. Note: you don’t have to be a CL2 user to be able to see event pages, so you can use these pages to share information with anyone involved with the event, regardless of what online tools (if any) they use. (Ever wish your favorite local band would learn how to use HTML and publish their calendar? Once we get your feedback and open CL2 to the world you can help them do just that.)


While it seems that Google’s release of its CL2 software is imminent, it’s probably a good idea to assume that some serious additional testing will have to be accomplished before that can become a reality. Plus, if the introduction of Gmail was any indication, we’re looking at a slow and steady release to the general public based on limited numbers of ‘invitations’ extended to those who already have accounts. This approach seemed to work excellently with Gmail, as the Google team was able to roll out additional addresses by offering users the ability to invite first 6, then 50 users to establish an account. The snowball effect of this type of rollout should not be ignored by future web-based application developers, as it provides a means for quickly expanding a software product’s reach, all while allowing the company to maintain control over just how rapidly the software proliferates. For most of us, though, this means either jumping on the bandwagon early, or getting shut out in the cold until a more widespread release.

Thumbstacks.com: Web-based presentation building and sharing software

If you’ve ever worked with PowerPoint, you’ve probably found that one of the most frustrating limitations of working with the program is the lack of good options for sharing your presentations via the web. Of course, PowerPoint does offer the ‘Save as Web Page‘ option, but as anyone who tries to use the feature will quickly discover, the ‘web page’ is actually a pointer file and an entire folder of ‘slides,’ a cumbersome solution at best. Furthermore, in order to truly experience the full feature-set of a PowerPoint presentation, you ultimately need PowerPoint, which costs money.
For those who create their presentations with the intention of sharing them, and want to circumvent PowerPoint’s limitations and the high cost of the Office suite, Thumbstacks.com is an exciting new option in the world of web-based applications. Users create an account, then can immediately begin to build their presentations. Admittedly, Thumbstacks does not offer the complete feature set that PowerPoint does, but it utilizes either Flash (if installed) or AJAX to produce some pretty impressive results. There are several different slide templates, and you can customize slides with different fonts and images, all while editing each element in real time. Best of all, Thumbstacks makes it incredibly easy to publish your presentation via their website, so that anyone can view your finished work, either in real time or at a time of their own choosing, depending on how you set the preferences.
For now, Thumbstacks.com is in the alpha testing phase, meaning that the user interface has some definite bugs, and that sometimes certain functionality will disappear of fail, presumably while the development team works on the site. However, even in the preliminary phase, it is easy to see that Thumbstacks’ web-based model for presentation creation is a useful idea with many positive benefits in both corporate and academic sectors. Let us only hope that the free accounts don’t disappear once the software leaves the testing stage.

AJAX and the company formerly known as Macromedia

This post on Matt’s blog gives a great little summary of the onset of , or AJAX for short, as a programming tool for the Web. I have nothing of substance to add to this, except to comment on the mention of he makes. As Matt points out, AJAX’s functionality holds the power to create pages with the interactivity of Flash, while maintaining the small file sizes and quick page loads that have historically distinguished Flash from other methods of creating dynamic content (read: JAVA). This makes me happy, because it couldn’t have come at a better time. After 5 years of happily utilizing Flash, Fireworks, and Dreamweaver in total harmony, I grimace at the prospect of Macromedia’s recent acquisition by the megalithic Adobe corporation. However, it is pleasing to know that, while we’ll all miss the seamless integration of those three programs once its botched up by the morons at Adobe (c.f. ImageReady), and other open-source technologies offer us the chance to march ahead unimpeded by the universification of the web development software marketspace.