Fixing the ‘onClick’ in Dreamweaver

Here’s a Dreamweaver tip from the ‘fishing with dynamite’ department.

Although it’s not the ideal tool for all tasks, Macromedia Dreamweaver is a very useful tool.

However it has one particularly nasty little habit that has bugged me for a while now — an infuriating penchant for automatically and forcibly converting my perfectly valid ‘onclick’ attributes to a perfectly invalid ‘onClick’ attributes. As far as I can tell, any time a valid onclick is opened in Dreamweaver, it re-parses the page with uppercase ‘C’s in the onclicks. I’ve searched for settings or preferences to disable it, but to no avail.

Of course, technically, good ‘unobtrusive JavaScript’ practice would dictate that I shouldn’t be using ‘onclick’ inside my XHTML anyway. No argument. We’re not writing any new ones into the site, but it’s going to take a gradual process to refit some of our older systems. In the meantime, I’m getting ‘real cranky-like’ having to do find & replaces on ‘onClick’ every time I fix a tiny typo in a page — not to mention the disharmony and accusations that were unleashed when we believed we harbored a uppercase evil-doer amongst our ranks.

My Solution

I briefly considered picking my way through Dreamweaver’s folder structure looking for the guilty file, but with thousands of files, it looked like taking hours. I settled on a brute strength attack. This method has some risk involved and I make no guarantees or promises, other than it worked for me.

1) Firstly I made a copy of my ‘Dreamweaver MX 2004/Configuration’ folder and put it somewhere safe — if it all went pear-shaped this was my salvation.

2) I have used ‘Replace in Files’ from Emurasoft for a while (their little text editor is a tiny gem too). It’s freeware, fast and works, but you may a similar app you prefer. Your call.

3) I set it to find ‘onClick=’ and replace it with ‘onclick=’. I had no idea what type of file I was targeting, so I set the file type to ‘*.*’ — all files. I also turned on the ‘Match Case‘ option and the ‘Search in subfolders‘ and ‘Match only words‘ options.

4) Lastly I pointed it at the Dreamweaver ‘configuration’ folder, crossed my fingers, closed my eyes and hit ‘Replace All’.

One minute later it had finished scanning the nearly 6600 files within that folder, and, as you can see, it found 2676 occurrences of ‘onClick’, which it fixed in nearly 500 files. Gulp. That’s more than I thought…

However, I’m pleased to report that not only has it definitely fixed the problem, but I have no side-effects, breakages or other problems to report in the meantime.

Of course, maybe I just haven’t found them yet.

There is, no doubt, a more elegant solution to this bug, but if it’s an issue for you and you’re feeling brave,..

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.sitepoint.com/ Kevin Yank

    I wonder, could you have used the Find and Replace tool built into Dreamweaver to do this? Software, heal thyself! :)

  • http://www.sitepoint.com AlexW

    [quote=Kevin Yank]I wonder, could you have used the Find and Replace tool built into Dreamweaver to do this? Software, heal thyself! :)[/quote]

    Hehehe,.. I thought about that, but I considered that I was already pushing my luck.

  • http://www.deanclatworthy.com Dean C

    Find + Replace in multiple files is a godsend. You can do the same thing in UltraEdit :)

  • colinmcc

    Wow, neat program!

    I built my first site some five years ago and started puting all the files in the one folder, which has now grown to a mess of several thousand .htm .jpg and .gif files.

    The thought of going through each .html file and running find and replace has horrified me, but now I’m going to make a backup of the site locally, and try running ‘Replace in Files’ on the whole site, changing all the mentions of src=” with src=”pics/

    So after I’ve copied *.jpg to a new pic folder and done the same with *.gif I should have all my links looking to find the picture files in the /pic folder.

    If it works I’ll be really happy!

    Thanks, Sitepoint!

  • David

    HTML-Kit, the widely used free html/PHP/ASP editor has a downloadable plugin to do this as well that gets installed under Batch plugins. Very very useful but you must be careful of course.

  • mrhatch

    Just because I’m a geek,and I have to know why! I looked at the configuration for Dreamweaver and found the following:
    The files that need to be changed are in the configuration folder under MacromediaDreamWeaver MX 2004ConfigurationTagLibrarieshtml They have the extension of .vtm and can be edited with any text or XML editor if you scroll down to the attrib section and change the case for any of the events it will update how the code is inserted.

    Of course for those of you who aren’t geeks, you could always go to the DW menus and select edit Tag Libraries and choose the HTML category and edit the individual attributes for the tags that you would like.

    It is probably faster in the long run to do the search and replace, but I would suggest caution and using something more like this:
    search for:

    replace with:

    and of course constrain your search to the folder named above.

    I hope this helps.

    Mike H.

  • Seinfeld

    The biggest annoyance from DW is that I can’t set a default DTD when the DTD is not known…. I work with pieces (Smarty templates) of HTML every time and DW uses HTML 4.0 and I code XHTML.

  • MickoZ

    On other hand… if you replace the onClick= in that article with onclick=, nobody will understand anything about what you are talking about! ;-)

  • http://www.igeek.info asp_funda

    Really Alex, I expected better from you than this desperate measure by replacing all instances of “onClick” with “onclick”!!! A simple thing would have been to goto the EDIT menu of the Dreamweaver & select “Tag Libraries”. Then you could’ve expanded the “HTML” node & change the attributes of any tags by expanding the sub-nodes!!

    I’ve searched for settings or preferences to disable it, but to no avail

    Its right there in the EDIT menu under “Tag Libraries”. Perhaps you didn’t look hard enough & you didn’t look in the help file, did ya? ;)

  • http://www.dustindiaz.com polvero

    Of course, technically, good ‘unobtrusive JavaScript’ practice would dictate that I shouldn’t be using ‘onclick’ inside my XHTML anyway. No argument.

    No Argument Indeed.

  • http://www.DigitalDesign.us azw

    Asp_funda might be right. But I wasn’t able to get that to work.

    One problem with Alex’s method is that it doesn’t fix the other event handlers, although he could do the same thing for each of them.

    I choose to selectively edit tags for all of the event handlers for the tags I typically use with them.

    The files that need to be edited are in this folder:
    C:Program FilesMacromediaDreamweaver MX 2004ConfigurationTagLibrariesHTML

    You’ll open the files in Notepad.

    You should to save a copy, of course, before changing any of the files.

    The files I changed were:
    a.vtm
    body.vtm
    button.vtm
    form.vtm
    input.vtm

    You might also need to change:
    frameset.vtm
    area.vtm
    img.vtm
    label.vtm
    select.vtm
    textarea.vtm

    Actually a lot of tags can accept some of the event handlers, like onClick, onMouseOver, onKeyPress, etc. so you should change the tags you actually use.

  • AJenbo

    I already set the default case to lowercase in DW settings, but i still got this mangled case. And it’s realy a lot of work to to go threw each individual tag and it’s atributes to correct Macromedias (Adobes) mistakes, atleast they could have given us a common set of atributes. or even set all to default.
    Than you very much for finding the solution and the folder to apply it to (i needed to fix more then just onClick).

  • AJenbo

    Ps. yes you can use the DW seach and replace for this :)

  • Jérémie

    Yeah, i had this pb.
    Each time i opened a document with onload, dw replaced it with onLoad. So my Xhtml document didn’t passed the w3c validation. It was frustrating to have it open and modify with PSPAD or Notepad++.

    But in Dreamweaver CS4 (or may be since cs3) you can edit the tag library.
    Edit > Preferences. In code format, you can find a tag editor where you can replace each attribute of an html tag.
    For example : in body, replace onClick by onclick (also for each events, like onload, onfocus, onresize, onblur, onunload).
    So this is not a problem anymore…

  • Jérémie

    Or easier, don’t allow dreamweaver to modify your code.
    Edit > Preferences. In Code Format uncheck the following :
    Replace case of : tags, attributes

    P.S.: sorry for the poor translation, i’m french

  • http://www.DigitalDesign.us azw

    Jeremie, although the second solution you wrote about would appear to be an easy answer, unfortunately it doesn’t work, at least not in CS3. DW will continue to change onLoad and similar code.

    That’s why your first answer is the only solution I’ve found. I’ve described it in more detail just a few comments above yours.