Tim Gittos

I'm an Australian currently living in Austin, TX in the USA.

I currently earn a living programming, though I wouldn't call myself a programmer. If I had to attach a label to myself, I'd use the term autodidact.

I love learning, and my favorite things to learn about are programming, computer graphics, AI & machine learning, robotics, painting and creativity.

ASP.NET Ajax, FCKEditor and Firebug

Last updated on 12 Feb 2009

Today at work I had the pleasure of dealing with a functionality bug in our new CMS that is written in ASP.NET. Our CMS uses FCKEditor for the rich text editor, and we’re using a whole gang of ASP.NET Ajax stuff for the interface. Specifically, we’re using a TabContainer with user controls inside each tab.

The CMS is designed in the way that most CMS’s are – we have 2 major components. Page objects contain the content data of a page, so text, HTML meta data, etc. Template objects contain templates – that is, HTML files with areas where you insert the page content, similar to how Dreamweaver does it’s templates for you.

When you publish a page/site, the CMS compiles the content into the template, then saves that as a file. When you’re editing or creating a page in the admin interface, the application reads the content areas available in the current template you have selected for that page, and creates an FCKEditor dialog for it.

Because you might not know how the content you’re writing fits into the template you’re going to use, we provide a preview function. This preview function will read in the content of the FCKEditor dialogs, create a temporary page object, set the src of an iframe to our preview page, which takes the page objects and feed it to a preview function which will compile the page and return the string, which we dump to the output stream of the preview page. We then fire up the iframe inside an ASP.NET popup extender, for a nice modal preview.

This all worked fine, until we got the tab container involved.

In order to streamline the work flow and reduce the page refreshes on postbacks, we decided to put the content in a tab container, with different parts of the page in different tabs. When we did this, we noticed that when the preview button did a partial postback, it reloaded the FCKEditor dialogs from the database, obliterating the changes we made to the page (if any), or just displaying nothing for the content if it was a new page.

This was just on my computer.

On a co-workers computer, it worked perfectly as intended, despite the fact we were both working from the same source, in the same IDE, running it in the same browser. What gives?

After poking around on both computers and trying the application in different browsers, we concluded that it doesn’t work only in my Firefox – IE was fine on my computer, and all browsers were fine on his. Acting on a hunch, I disabled Firebug for my Firefox, because I noticed my co-worker didn’t have Firebug installed.

The application started working again.

I don’t know why this happens, and why Firebug should be interfering with the Javascript in an obtrusive way, or even which Javascript it’s interfering with. I don’t know if Firebug was screwing with FCKEditor or ASP.NET Ajax. So, this post is partially to put this info out there, in the hopes that someone else can answer for me.

It’s also partially to say, if you’re seeing odd behavior that seems to be cropping up inconsistently across machines running Firefox, try disabling Firebug. Since being done by Firebug, I’ve decided to leave it off during all development, and thinking back, I wonder how many other Javascript bugs I’ve fought with that were caused by Firebug, and not the code.