Thursday, March 20, 2008

Commenting system javascript on my web-site

I've received a few requests to view the commenting system javascript from my demo web-site.
The javascript is already there for all to see, either by downloading the page or viewing the source directly.
I would definitely recommend using Firefox and Firebug when viewing as it allows you to view attached script files as well as the page source.
The screenshot shows the Script tab in Firebug, listing the script files attached to the current page. In the background you can see the source for the active file.

Most of the javascript for my demo site in contained in a single "application" file playpen.js. The code has been compressed, but not obfuscated. This means you can load it into your favorite text editor and read the full source after you've done some formatting. As far as understanding the code I would highly encourage you to look at Ext 2.0 Samples and Ext Documentation. Like anything worthwhile you need to invest time and energy to gain understanding.

The comment form is based on one of the examples for dynamic forms.

Here is a super-brief explaination, I'm a little time challenged at the moment :)

I use an application process to insert the data into the database.

The javascript to do this is on my demo site - just download the source and then format it to see what's going on.

When inserting it into the database I have to unescape the comment so it will render later. I use dbms_xmlgen.convert(:new.app_comment,dbms_xmlgen.entity_decode) to do this. There may be a better way I haven't thought of. I also strip out some html elements such as script, object, embed etc to prevent malicious attacks.

The javascript then does a PPR to display the comment immediately.

If this doesn't make sense to you, time to do some reading and learning :)

Mark

2 comments:

Seek said...

Hi Mark, thanks for your tips about ApEx and Ext JS, but how can I toggle the show/hide box via Javascript? I'm using ExtJS 3.0.0 and Ext.getCmp does not work.

Seek said...

Problem found, missing ID :)