The public site was relatively straight forward to convert (to retrieve contents from the database) once it was decided that AJAX adds no value to the user experience and or search engine optimization.
The administration site was very different. Beside AJAX, the following JavaScript plug-ins were used to enhance user experience:
- Lightbox2 by Lokesh Dhakar
To view images
- TinyMCE from Moxiecode Systems AB
To provide a rich text editor so the users do not have to learn HTML
- Sortable from jQuery UI Project
To provide a drag-and-drop methodology to sort images
Issues Encountered with Plug-Ins
Lightbox2 uses the Prototype framework. It's use of "$" conflict with jQuery's use of "$". The easiest solution was to adjust jQuery (execute "jQuery.noConflict();" and use "jQuery" instead).
TinyMCE redefines TinyMCE enabled textareas to a different set of HTML elements (iframe, etc.). Therefore, to access the values of textareas in AJAX must be done via their APIs. This is because texts entered in a TinyMCE enabled textarea are not in textarea tag defined.
House Keeping Issues
Due to the fact that content and HTML elements are dynamically retrieved and build, JavaScript / jQuery event listeners must be registered after the new content has been loaded. This is because event listeners tied specifically to existing elements.
As well, these event listeners need to un-registered as the content is destroyed (unloaded). If this is not done, the browser will be listening to events that are no longer tied to valid / existing elements.
Loading...
Since loading content using AJAX means no new page reload, it is very important to let users know when retrieving content from the server (via a loading message or icon). This is because the browser's loading indicator is not triggered. More importantly, requests are not generally not fulfilled instantaneously due to factors like server load, network bandwidth, network latency due to distance, etc.
Demo Videos
