Some notes on developing with Ajax/Javascript

Initial tutorial

I found the following initial tutorial most helpful in starting to utilize Ajax
http://www.dynamicajax.com/fr/AJAX_Hello_World-271_290_322.html

Basically the idea is that your original document has a stub element(with associated unique id) that gets replaced with the returned html of the secondary XMLHttpRequest^? call.

Modifying the earlier Carolinas Coast code

The 2 files where modification was made was the nws.js javascript file to include the Ajax type functions and the transfer of specific platform content information (CC_FRP1, CC_FRP2) out of the home page content and into platform specific content files(CC_FRP1.htm,CC_FRP2.htm). The home page has also been modified to provide a 'stub' element whose content is dynamically replaced by the Ajax function and the imagemap function calls to the new Ajax function 'getInfo(which)'.

A desktop example of this work is contained in the zip file attached at this page bottom.

After downloading and unzipping the files, in Firefox you should be able to open the home page file and click/close the platforms for CC_FRP1, CC_FRP2 which are utilizing the Ajax function 'getInfo(which)' instead of 'buoyInfo(which)'.

The 'hideInfo' function had a line added also to hide the new Ajax element.

I'm not sure exactly how to handle the earlier 'group' functions/variables and can work with Susanna to finish converting any of the earlier functions to an Ajax version.

Found the following link helpful in understanding the 'getElementById' functionality
http://www.tutorialtastic.co.uk/tutorial/showhide_elements_with_javascript

I also found that in moving the content to platform specific html files, that I needed to remove the 'div' wrapping element tags. My plan is to generate these platform specific html files separately into the specified subdirectory 'platform_content' instead of all into the home page. This should help insure that the viewed html pages don't become bloated with data which has not been selected yet. Not sure if we can apply these dynamic Ajax techniques to other parts of the website as well in regards to other data, map or graph images.

Gotcha's

Security

One issue I ran into was that in starting with a simple tutorial example, I was making a simple direct reference to the data content file on my desktop like

receiveReq.open("GET", 'SayHello.html', true);

which worked fine in Firefox, but I kept getting an 'access denied' error in IE (same issue listed at http://www.webdeveloper.com/forum/showthread.php?t=147342 )

I couldn't get a simple direct file reference to work in IE from my desktop, I could only get a full URL type address to work like

receiveReq.open("GET", "http://carocoops.org/gearth/SayHello.html", true);

I could get both the Firefox and IE simple examples using a direct file reference(no 'http://...') to work if I did all my work on the issuing server though.

So basically the lesson is to either do all your work on the same issuing server to begin with, or if you're testing against remote files locally, use Firefox for testing until you get the final version uploaded to the issuing server.

Other

• I tried modifying the 'handling' function like 'handleGetInfo()' by supplying a function parameter like 'handleGetInfo(which), but this seemed to cause the code to stop working so I went back to the original function call without parameters.

• Haven't tested everything in Opera and Safari also, so may still be some other browser issues that need to be addressed with those as well.

See also

Using Ajax from perl
http://www.perl.com/pub/a/2006/03/02/ajax_and_perl.html

-- JeremyCothran - 19 Dec 2007
to top