Use jQuery to extract data from HTML lists and tables

JavaScript, jQuery, UI By . Updated March 31, 2011

A question that I’ve been seeing more frequently these days is how to extract a JavaScript object from an HTML list or table, given no data or information other than the markup. It’s not ideal to work backwards from HTML, but sometimes you just don’t have a lot of choice in the matter.

Whether you’re enhancing legacy elements that have been generated on the server-side or want to parse the output of a third-party DHTML widget, there are a variety of situations where converting HTML to raw data is a legitimate need. You may have seen iterative solutions to this problem before. However, nested looping code gets messy fast, doesn’t feel much like idiomatic jQuery, and certainly isn’t as concise as you’d probably like.

Luckily, one of JavaScript’s lesser-known utility methods and jQuery’s implementation of it can improve the situation quite a bit. In this post, I’m going to show you how to use this method, jQuery’s cross-browser solution, and how to use it to extract data objects from arbitrary HTML lists and tables.

Click here to read the rest of this post »

A VSDoc for jQuery 1.5

JavaScript, jQuery By . Updated February 5, 2011

Using the jQuery 1.5 VSDoc to get Intellisense in Visual Studio

I’ve noticed several people looking for a jQuery 1.5 VSDoc this week. After looking around myself, I didn’t see one anywhere either. So, I updated Damian Edwards’ VsDocBuilder for jQuery 1.5 and generated a new VSDoc.

It doesn’t handle the new jqXHR and Deferred return types quite right, so you won’t get Intellisense for the new chained $.ajax() callbacks. However, it should be better than nothing until a fully functioning version is released.

You can download it here: jQuery-1.5.0-vsdoc.js

Update: Damian has just made a fully functional version of the 1.5 VSDoc available (that was quick): jquery-1.5-vsdoc.js. You should use his instead of mine.

Important: This new VSDoc makes use of <para> tags to display line breaks inside documentation tooltips. To view them properly, you’ll need to be sure that you have the JScript Editor Extensions installed so that Visual Studio understands those new VSDoc tags.

jQuery 1.5′s AJAX rewrite and ASP.NET services: All is well

AJAX, ASP.NET, jQuery By . Posted February 2, 2011

jQuery 1.5′s complete overhaul of the AJAX API has led to several people contacting me recently, understandably nervous about how the rewrite will impact working with ASMX ScriptServices and ASPX page methods. Seeing the default calling syntax change to $.ajax(url, settings) was especially unsettling to many.

I’m happy to report that the short answer is: jQuery 1.5′s new AJAX module has almost no negative impact on any of the techniques you may have read about here. The rewrite maintains very good compatibility for the $.ajax(settings) calling syntax and for now-deprecated features such as dataFilters.

One advanced dataFilter usage appears to be broken, but it’s something that you probably already stopped using with jQuery 1.4. To be clear, I’ll briefly enumerate all of the techniques I’ve re-tested and jQuery 1.5′s impact (or lack thereof) on each.

Click here to read the rest of this post »

Cripple the Google CDN’s caching with a single character

jQuery, Performance By . Updated October 11, 2011

It’s no secret that I’m a proponent of using a shared CDN to host jQuery. As more and more sites take advantage of public CDNs for their jQuery reference, the cross-site caching benefit is becoming almost a given. However, there are a couple ways that even I recommend against using these public CDNs.

With the impending policy change on hotlinking copies of jQuery hosted on jQuery.com, I expect that at least several sites will be migrating their hotlinked script references to one of the public CDNs soon. So, I think this is a good time to address one CDN-related usage mistake that I’ve seen an uptick in lately.

Click here to read the rest of this post »

4 years of Encosia, and the best of 2010

General By . Posted December 22, 2010

It’s December 21st as I write this, which means it’s time for my yearly recap and a recounting of this year’s most popular posts. The way 2010 began, it threatened to be a tough fourth year of Encosia, but has eventually turned out to be a great year in the end.

Encosia-related metrics are up across the board, from page views, to RSS subscribers, to Twitter followers. In fact, the site has served right at one and a quarter million page views to JavaScript-enabled, human visitors in the past year. That’s chump change for a lot of larger sites, but it’s a number that’s truly hard for me to fathom in the context of my paltry trickle of niche content.

The year wasn’t all smooth sailing though…

Click here to read the rest of this post »

The 2010 Encosia Holiday Contest Results

General By . Posted December 13, 2010

526 entries later, it’s time to announce the winners of the 2010 Encosia Holiday Giveaway. Without further ado:

Congratulations! I’m contacting each of you right now via email or Twitter to get your prizes to you. If you haven’t received anything from me in the next 24 hours, please get in touch with me directly to be sure my attempt wasn’t marked as spam or otherwise thwarted.

I want to thank my friends James and Rob at TekPub for providing the TekPub memberships, and of course Microsoft for providing the MSDN subscription.

Finally, I want to thank everyone for participating. The topic suggestions, both in comments and the TekPub voting area have been even higher quality than I had expected. You can be sure that your feedback will influence what you read here and see at TekPub over the course of the next year.

Announcing the 2010 Encosia Holiday Giveaway

General By . Posted December 7, 2010

Each year around the 21st of December, I’ve ended the year with a brief recap and a list of the year’s most popular posts. That has worked well in the past, but this year I find myself in the position to give more than just information back to the community. So, as I close in on my fourth full year here at Encosia, I’m going to try something a bit different this time around.

This year, I’m going to precede that yearly recap giving away some great prizes, including a full free year at TekPub and Visual Studio 2010 Ultimate with a year-long subscription to the MSDN library.

Additionally, I know that many of you will already be spending time offline with your friends and family by the 21st of December. So, I’m also going to move things up a bit this year to make sure that everyone’s able to participate.

Click here to read the rest of this post »

jQuery Templates, composite rendering, and remote loading

JavaScript, jQuery, UI By . Updated December 4, 2010

In my last post about jQuery Templates, I showed you how to use template composition to build a template out of simple sub-templates. These composite templates are a great way to address the complexity that creeps into real-world UIs, as they inevitably grow and become more intricate. However, one feature missing from my last example was the ability to store those composite templates in external files and load them asynchronously for rendering.

I’ve described how to accomplish that with single templates in the past, using jQuery’s AJAX utilities and a particular usage of tmpl(). Unfortunately, remotely loading a group of composite templates from a single file is not quite as simple, and the technique I’ve described previously will not work.

Not to worry though, it’s still relatively easy.

In this post, I’ll show you how to move a group of composite templates to an external file, how to load and render them with jQuery Templates, and how to take advantage of an expected benefit to improve separation of concerns.

Click here to read the rest of this post »

Composition with jQuery Templates: Why and How

JavaScript, jQuery, UI By . Updated November 11, 2010

I doubt anyone was happier than I was to see that support for composite template rendering was added to jQuery Templates during the interim between the first community proposal and its recent release. If you’re a regular reader, you might remember that I personally lobbied for that functionality back in May, based on how I’ve used jTemplates’ similar #include feature.

Since then, a common question I’ve received amounts to: “Great, but why?”

I think that’s natural, because template composition is one of those things that can seem obscure until you put it to work for the first time. From that point onward, you’ll begin to see the structure of your client-side templates in a different light. Simplifying your templates into smaller logical parts and then combining those parts to create the desired end result is a powerful approach. It’s terrific for making large templates more approachable and maintainable over the lifetime of an application.

In this post, I want to show you an example of a scenario that template composition is well suited to, a couple ways that jQuery Templates’ {{tmpl}} feature can be used to simplify that scenario, and a bonus advantage that the composition approach provides even after the template has been rendered.

Click here to read the rest of this post »

Using external templates with jQuery Templates

JavaScript, jQuery, UI By . Posted October 5, 2010

Now that jQuery Templates is official and definitely will not include remote template loading, I wanted to publish a quick guide on implementing that yourself. As I mentioned previously, there’s a handy interaction between jQuery Templates’ API and jQuery’s AJAX methods that makes this easier than you might expect.

In this post, I’ll show you how to use a plain string as a template, how to asynchronously load an external template file as a string, and how to render it with jQuery Templates once it’s loaded.

Click here to read the rest of this post »