Brennan’s Blog

With AJAX spreading to more and more web sites it is becoming increasingly valuable to learn how to use JavaScript. Most web developers cringe at the thought of working with JavaScript after years of bad experiences with no debugging support for very buggy and incompatible web browsers that do a poor job of interpreting JavaScript properly. Once you get to know the language as it was meant to be you really will learn to appreciate the power it provides. You just need guidance on working with what is a powerful language on a pretty rough terrain where IE6 is still in the mix to a significant degree. Meanwhile the terrain over IE7 and FF2 is not all that bad.

The newest book to be released is JavaScript: The Good Parts (170 pages) by Douglas Crockford who is the lead JavaScript Architect at Yahoo. He knows all about the bad parts and in this book, which I ordered and just shipped a minute ago, covers the good parts that you can use that will allow you to create the kind of web site that will make your users ecstatic and win you more fun and interesting projects.

Last year I read Pro JavaScript Techniques by John Resig who is the creator of the wildly popular JavaScript library jQuery. All of the books that I purchased just a few years back, covering advanced topics like DHTML (a term that makes my eyes roll), were using horrible syntax which did not allow for building advanced sites due various problems that are easily overcome with techniques explained in Pro JavaScript Techniques. You will learn about scoping, namespacing, inheritance and how to handle cross-browser issues.

Later this year a new book by John Resig called Secrets of the JavaScript Ninja will be published. The book is made up of topics suggested by the community through his blog which were not covered in depth in his first book or any other book out there. I am extremely anxious to get my hands on this book. Resig has an uncanny talent when it comes to JavaScript and reading his last book was an eye opener for me and I expect to learn a great deal more with this next book.

It is an important year for JavaScript. With competing technologies like Flash, Adobe AIR and Silverlight fighting for market share it is necessary for JavaScript to keep pace and it is not standing still. Soon the standard for JavaScript 2 will be nailed down and features like the Canvas in HTML5 and SVG will offer major competition to the proprietary alternatives. Now is a good time to retrain yourself on JavaScript. I strongly suggest you pick up these books.

I discovered a problem with the ASP.NET AJAX Client-Side library. It seems it was trying to access a property on a variable when the variable was not defined. The difficult part of the problem was that the function that was being called is a part of a series of events that are bound to various elements on the page automatically. I am unaware of what it is doing exactly or how to prevent it so fixing it was a challenge. Fundamentally the function was working like this...

function exampleFunction(a,b,c)
{
  if (a.disabled)
  {
    // do something
  }
}

Because the a parameter was passed in as undefined from a function that my custom code did not call I could not simply fix it on my end. I needed a way to first check if the a value was defined before it attempts to access the disabled property on it. Since JavaScript is a dynamic language I can redefine and remap functions very easily. I dug into the JavaScript in the MS AJAX Client-Side library and found the context for the function and wrapped it with my own function that checks if the given parameter is defined. If the value is defined I call the original function.

The code below is my fix. The _onFormElementActive function which is defined in Sys.WebForms is the function that was causing me trouble. This code first saves the existing function to a local reference and then reassigns a new function to that name within the prototype. Then within that function I name the function with FIXED at the end the name so that it can be called within the context of the object instance. The original function needed to access this with the right context which is why that is necessary. Then I can simply check the value of a and call the fixed function with the same parameters.

var $$_onFormElementActive = Sys.WebForms.PageRequestManager.prototype._onFormElementActive;
Sys.WebForms.PageRequestManager.prototype._onFormElementActive = function(a,c,d)
{
    this._onFormElementActiveFIXED = $$_onFormElementActive;
    if (a !== undefined)
    {
        this._onFormElementActiveFIXED(a,c,d);
    }
};

The beauty of this code and this solution is how JavaScript works. I can safely redefine an existing function, wrapping it with my own code, and still call the previous function easily. And even if the object instance for this class was already defined this adjustment will still take place because this change not only affects all instances created in the future, but all pre-existing instances.

Next I hope to get in touch with the ASP.NET AJAX team and let them know about this particular problem. Ultimately they may just need to code to read if (a && a.disabled) and the bug would be corrected. I also want to know how this problem came up. This web site was working fine for a couple of weeks before this started to happen. And curiously enough, it only affects IE7 and not IE6 or FF2.

I wanted to give the QA team a way to clear the items in the cache during their testing so I justed added a button to the main QA test page with a button that runs the following code. I actually ripped this code from my book, Pro ASP.NET for SQL Server.

using System.Runtime.CompilerServices;
using System.Web;
using System.Web.Caching;

// ...

[MethodImpl(MethodImplOptions.Synchronized)]
public void ClearCache()
{
    Cache cache = HttpRuntime.Cache;
    List<string> keys = new List<string>();
    foreach (DictionaryEntry entry in cache)
    {
        keys.Add((string)entry.Key);
    }
    foreach (string key in keys)
    {
        cache.Remove(key);
    }
}

Our relationship with JavaScript has been turbulent these past 10 years. In the early days there was so much promise as both the Netscape and Internet Explorer teams worked feverishly to add new features to the browsers and coined the term DHTML. It was an exciting time, for a while at least. Then the fact that features did not work reliably or even across the two dominant browsers started to sink in and the polish on this shiny new thing started to wear off. Yet we still persisted in trying to find ways to make it work, only to be slapped in the face over and over again.

One strategy I followed was to focus only on Netscape 4 for certain functionality and I would spend hours trying to nail down my new script, thinking I had the syntax right, alt-tab, F5... and then see inexplicable behavior happen. I naively thought that the Netscape 4 engine for JavaScript was bulletproof and I was wrong. I did not realize until a few years later, after ignoring JavaScript during that period, that the syntax I was using was completely valid. It was just the browser misinterpreting my code.

Starting just a few years back I started to see JavaScript becoming useful again. The combination of Google producing web applications like Google Mail and the Firebug extension for Firefox caused me to reconsider JavaScript one more time. What Google created excited me about what JavaScript could do for my web applications and Firebug offered support for making it happen by exposing what was happening inside the browser.

Gradually as I re-educated myself on JavaScript I picked up techniques to write JavaScript more efficiently and reliably while also making it work across a broader selection of browsers than were available in 1998. And a major push forward was the rising popularity of JavaScript libraries (jQuery, Prototype, YUI and many others has made it nearly trivial to add advanced client-side behavior to web applications that works across all of the major modern browsers. After learning a bit about the available JavaScript libraries I read Pro Javascript Techniques by John Resig which opened my eyes on how much more powerful JavaScript can be. Later I watched a video of a presentation that Resig made for Yahoo! on Advancing JavaScript with Libraries (Part I, Part II). His book is excellent and these videos compliment it very well.

With my efforts to re-educate myself about JavaScript the last few years I feel I have a good relationship with JavaScript. This re-education has been like therapy for this troubled relationship with a once flawed technology. Each time I talk with someone about web development they seem surprised or even shocked that I would be so willing to jump head first into attempting complex functionality with JavaScript. It seems there is a lot more "JavaScript Therapy" that needs to happen. People have not forgotten the bad old days and letting go of that negative experience has been hard for most web developers. I have come to accept the fact that in order to produce rich web applications that I have to leverage JavaScript along with everything I know about HTML and CSS. These three technologies can do amazing things together and as the browser makers compete to produce faster, more stable and more standards compliant browsers these capabilities will only improve.

In the coming weeks I will be writing about what I have learned about modern JavaScript, especially with ASP.NET. In the meantime, if you are interested in JavaScript I strongly suggest reading Resig's book, watching those videos and exploring the tools referenced in Web Development Tools for the Power Developer. Later you can check back here for more on JavaScript techniques.

Rendering a User Control in ASP.NET using a web service or a generic handler is easy. Taking the string that is generated with a User Control and then serializing it to be embedded in JavaScript is also easy. Both combine to what you will need to create custom ads that are exactly like how Google Ads are served. This technique can also be used to share a common piece of markup across many web sites. As the central web site is updated so are all sites that reference it.

The first method below will render a User Control to a string. The second method will serialize that string for use with JavaScript as a JSON value. The value can then be included in a dynamically generated script for use from remote sites. I had some early troubles with the DataContractJsonSerializer which replaces the deprecated JavaScriptSerializer but eventually I got the following code to work reliably. Previously I created something similar but without User Controls a while back for the local .NET User Group to show banners for upcoming meetings.

using System.Runtime.Serialization.Json;

private string GetUserControlMarkup(string controlUrl)
{
  // sample url: ~/Controls/SharedCalendar.ascx
  StringBuilder sb = new StringBuilder();
  Control ctrl = new Page().LoadControl(controlUrl);
  if (ctrl != null)
  {
    StringWriter sw = new StringWriter(sb);
    HtmlTextWriter tw = new HtmlTextWriter(sw);
    ctrl.DataBind();
    ctrl.RenderControl(tw);
  }
  return sb.ToString();
}

private string Serialize(string str)
{
  DataContractJsonSerializer serializer =
    new DataContractJsonSerializer(typeof(string));
  MemoryStream ms = new MemoryStream();
  serializer.WriteObject(ms, str);
  return Encoding.UTF8.GetString(ms.ToArray()).Trim();
}

Previously I wrote Internet Explorer 7 and Future Proofing your Website which was a primer for preparing the imminent release of Internet Explorer 7. Now we will soon see Internet Explorer 8 which will stir things up again. A couple of months back Microsoft floated the idea of creating multiple standards modes, with the more modern implementation being an opt-in mode that required pages to include a meta value that IE8 would use to switch over to the new modern standards mode. The proposed solution was widely rejected.

Today the IE team announced through the IEBlog, in post a entitled Microsoft's Interoperability Principles and IE8, that Microsoft is withdrawing that idea. There will be only two modes in IE8, quirks mode and standards mode. Initially Microsoft did not want to break all of the pages that were expecting the IE7 standards mode, much like pages were expecting IE6 standards mode when IE7 was released. Now after significant feedback from the community Microsoft will bite the bullet and happily move forward with web standards even if it means breaking many sites that should be updated anyway.

All in all this should not be a big problem. Given that Best Practices for CSS encourage developers/designers build their pages and sites with the most standards compliant browser first and then adapt lesser compliant browsers these cross-browser issues should not be much of a concern. Yet many sites were not built with techniques that are safe across browser versions. Techniques like the box model hack enable support across multiple browser versions that support different levels of web standards. Leveraging how CSS works in this way is how you can future proof your web site.

(more...)

I recently started work on small tool called JavaScript Browser which will run as a standalone Windows application as well as a Tool Window for Visual Studio 2008. I have made good progress in the time I have put into it. I now have the XML document format defined for the initial release. I am using XSD to constrain the XML document and to provide Intellisense as I write the XML documents. I am then using XSL and CSS to display the documentation in the JavaScript Browser which is using the WebBrowser control for the viewer.

(more...)

If you are using the Rating Control for the ASP.NET AJAX Control Toolkit on a long page you will notice that after selecting your rating the page jumps to the top of the screen. On a short page you will not notice anything but the hash sign appearing at the end of the URL. On a long page the jump is a big problem. It is due to the href attribute on the anchor tags being set to a hash instead of something like javascript:void(0); which would prevent the jumping. I fixed this with one line of JavaScript using jQuery to set the link value to ensure clicking does not have the unwanted side-effect.

In the below sample I have the Rating Control wrapped in a div tag with Rating set as the CSS class. This way I can have many ratings on one page and having this one line fix all of them.

$('div.Rating a').attr('href', 'javascript:void(0);');

As I work on JavaScript I often consult with Google to find documentation on which functions are available and how they work. Sometimes I find the answer right away and other times it takes more effort to find the right answers. I really want it to be easier and faster to find the right answers quickly so I started work on a Tool Window that I call JavaScript Browser that integrates within Visual Studio 2008. The work done by James Hart to automatically generate the XML Doc Comments from the jQuery XML documentation is compelling. I have been tossing around idea of making the format of the jQuery XML documentation the format that I would use directly for the JavaScript Browser, but it may be limiting for other script libraries that work in very different ways.

(more...)

These days I write more JavaScript than C#, or at least it seems like it sometime. To make my work a little easier I have started using the JavaScript support in Visual Studio 2008 that provides Intellisense support if you put Xml Doc into your JavaScript. The problem with working with jQuery in Visual Studio 2008 is that it fails due to how the jQuery script is written. For reasons why Intellisense fails, you can read more from Jeff King. Adjusting jQuery to make Visual Studio happy is not really a priority and not even necessary. I can simply reference the real jQuery script from the web pages and within my scripts I can reference a stub for jQuery that is simply a shell with Xml Doc.

[ Update: Hotfix for Visual Studio 2008 to fix jQuery Intellisense ]

(more...)