• Recently Written

  • Non linear management – fostering creativity / design driven development
  • Nonlinear management: creative thinking
  • When Doctrine leftJoin fails
  • Getting the cursor position inside a text-field and smart ways to build form validators
  • Javascript regular expressions quick guide
  • Database sharding unraveled - part IV
  • Smart trick to check some bottlenecks in your DB
  • Database sharding unraveled - part III
  • Cool trick to extract only what you need using regular expressions
  • Symfony quickies 1

• Categories

  • business
    • Management
  • Events
  • Marketing
  • Programming
    • JavaScript
    • MySQL
    • PHP
      • Symfony
  • Scalability tools
  • Uncategorized
  • WEB 2.0

• Archives

  • February 2010
  • January 2010
  • October 2009
  • December 2008
  • October 2008
  • June 2008
  • May 2008
  • April 2008

• Admin

  • Log in
  • Wordpress
  • XHTML

Been having a lot of work on customizing Dokeos for a client, so didn’t really have any spare time to write. This post is about common mistakes or overlooks when developing RIAs with JavaScript.
First of all, something to always keep in mind when working with Internet Explorer: it will never ever act like you wish from the first time.

Pay extra attention especially when dealing with DOM elements, as it tends to throw errors that FF doesn’t - I’m not talking about the fact that IE is not DOM compliant and methods that work in Mozilla family browsers don’t exist in IE or have different names.
Here’s a list of things to remember:

1. If you want to get things done fast, use a framework - Prototype does an excellent job.
2. HTMLElement is not accessible in IE, so in order to extend it, few hacks are necessary (first is to use Element.extend from prototype, or have a look at this: http://www.geekdaily.net/2007/06/18/javascript-htmlelement-in-ie/.
3. Always use $() from prototype when dealing with extended DOM elements, otherwise IE will issue errors. A short example from Prototype’s api:

   // this will error out in IE:
   $('someElement').parentNode.hide()
   // to make it cross-browser:
   $($('someElement').parentNode).hide()
   

   Read more here.

4. element.cloneNode() clones a node for the entire execution of the script. In other words, any modification to the original element will also reflect in the clone.
5. Chained lists in IE. If you want to custom build them, you’ll find out that an option element cannot be hidden (option_element.style.display=”none” won’t work). Furthermore, if you want to delete it, that doesn’t work unless it has an id (<option name=”2″ value=”2″ >2</option> cannot be deleted).
   Another frustrating thing in IE is that sometimes element.innerHTML doesn’t always work as expected.
   If you manipulated the DOM elements, removing or replacing them, for example, then any change using innerHTML in the parent node won’t work, as some child element debrie still remains. Use $(”my_element”).update(html_content_goes_here) instead.
   If I have time I’ll post some examples.
6. Checking node existence in IE is a bit tricky. For example, suppose you need something like:
   if ($(”something”).previousSibling.firstChild) { // code here } which works flawlessly in FF.
   That will only work in IE if previousSibling exists, if not it gives an Object required error. So to make it correct, use something like:
   if ($(”something”).previousSibling && if $(”something”).previousSibling.firstChild)
7. A handy function to obtain a variable reference (although true variable reference doesn’t exist in JavaScript) :

   function reference_to(property ) {
   	return window[property];
   }
   // usage
   var einstein = “something”;
   alert(reference_to(”einstein”));
   // ouputs: something
   // If you want the reference from an object member variable or method extend the function by
   // replacing window with the desired object.
   

Comments

• Useful links

  RSS

• Search

Advertisements