• JS Strategy

last modified May 3, 2007 by nickyg622

Keep all JS calls out of page markup.  Use DOM scripting to target element and attach events.  Modularize js?

Attempt to keep related functionality in object blocks.  For a good example see here (from Backpack): https://asset3.backpackit.com/javascripts/blocks.js

Good ID Structure
JS will need to hook into DOM elements by ID.  That means we'll need an ID naming convention that creates consistent, parse-able IDs.  IDs will be used to tie together related elements.
For example, something like this would work:

<div id="note_1">
   <div id="note-contents_1" class="oc-liveEdit-value">This is my note</div>
   <div id="note-edit_1" class="oc-liveEdit-form">
        <form name="note-edit-form_1" action="fallback.py" method="post">
             <textarea>This is my note</textarea>
             <input type="submit" value="Edit" />
   </div><!-- end #note-edit_1 -->
</div><!-- end #note_1 -->

JS will be able to parse the ID and then show/hide the appropriate elements.

Create non-js fallbacks for non-js-enabled browsers. That means:
  • Simple scripts to take the place of AJAX calls.  These scripts then return the user to previous page, with a message.
  • Hide elements on DOMReady only if JS is enabled (i.e., don't include style="display:none" in markup). This will allow non-js users to access live-edit forms.