OpenRico Object Example

by Mike Levin SEO & Datamaster, 10/07/2005

Using Ajax, you can either replace HTML fragments in the document object model (DOM) or you can tweak the values within objects. But if you swap out HTML fragments that contain form input fields, that field will not get posted on submit in FireFox or Opera. It’s true. You can’t replace a select tag and its nested options with another select tag and options. It simply won’t post. Instead, you need to alter the original select element, eliminating all the original options and adding the new ones. From our little bit of research and speculation, we believe it is due to serializing of forms at the moment of page-load. Swapped out elements lose their serialization. MSIE doesn’t have this problem, which we speculated was due to MSIE’s support for HTML components (HTC), which was another way of getting Remote Scripting behavior before Ajax.

Anyway, we had to stop using the element response type in an OpenRico XML response if it was manipulating form input fields. I had previously posted the absolute barebones example of using the OpenRico Ajax library. I suspect OpenRico is not more widely used because of the extreme difficulty in a non-JavaScript person understanding the object example in their documentation. So, I had our programmer here work her way through it, and help me create this barebones example of object response-type of the OpenRico library. This example alters values within the DOM without altering the DOM structure. It’s much more reliable and browser-compatible when changing options in forms, such as would be needed in an Ajax implementation of this Brent Ashley JSRS demo. It may not be maximum barebones, because I break the myTime variable into several lines to avoid line-wrapping.

rico.html…

<html> <head> <title>Test OpenRico Object</title> <script src=“/global/prototype.js”></script> <script src=”/global/rico.js”></script> <script type=”text/javascript”> function bodyOnLoad () { ajaxEngine.registerRequest(‘myRequest’, ‘rico.asp’); var newObj = new MyObj(); ajaxEngine.registerAjaxObject(‘tgtEle’, newObj); } function MyObj() { this.ajaxUpdate = updateTime; } function updateTime(response) { var myTime = response.getElementsByTagName(“time”) myTime = myTime[0].firstChild.nodeValue document.getElementById(“tgtEle”).value = myTime } </script> </head> <body onload=“bodyOnLoad();”> <input type=“button” value=“Check time” onclick=“ajaxEngine.sendRequest(‘myRequest’, ‘arbitrary’);”/> <input id=“tgtEle” value=“What time is it on the server?”/> </body> </html>

rico.asp…

<% Response.ContentType=”text/xml” Response.CacheControl = “no-cache” Response.AddHeader “pragma”,”no-cache” myDate = Now() %> <ajax-response> <response type=“object” id=“tgtEle”> <time><%=myDate%></time> </response> </ajax-response>

Things to notice here are…

Passing at least one arbitrary parameter is required for the OpenRico library.

Instead of registering an element, you’re registering an object. So an instance of the object needs to be instantiated before registering it.

Registering the object ties the element to the object.

The object’s sole purpose in life appears to be to pass XML data to an arbitrary function when its ajaxUpdate method is invoked.

You put all the real heavy-lifting (the parsing of the XML object) in a function that you arbitrarily name. It get’s invoked with a response parameter. That response parameter contains the entire XML object.

You then use whatever techniques you’re comfortable with to pull the data out of the XML object. In this case, I use document.getElementById(“tgtEle”).value. But in most cases, iterating through the object would be more appropriate.