Prototype and onComplete

erich August 10th, 2006

My first big project at my new job has been to rewrite the forward-facing part of our booking engine. The old design used very static page structures with a lot of form submits, and was not navigation-friendly. Moving through the process required a lot of submit and back actions, with the associated page loads that go along with that - very time consuming and frustrating.
The calendar portion of the page was an ugly behemoth in and of itself, consisting of an HTML table element (with borders!) embedded in an iframe. Woof. I definitely wanted to get away from the page refreshes, as well as provide a much easier method of selecting unit types, dates, and length of stay. Enter AJAX and Prototype.

AJAX stands for Asynchronous Javascript And XML, and Prototype is the javascript library I am using for this functionality. With AJAX, calls to the database happen behind the scenes and update content on the page without having to refresh the page. However, I ran into a minor difficulty while working on this project, namely, that certain functions have to be executed upon completion of the AJAX call.

Prototype provides a way to specify what happens after the AJAX call has finished, and that method is onComplete.

PLAIN TEXT
JavaScript:
  1. var params = 'function=getAvailsByWeekNumber&invID=101';
  2. try { var myAjax = new Ajax.Request(strURL,                                             {method:'get',                                      parameters: params,                                                 asynchronous: true,                   onComplete: function(request)                                                                                                  {
  3. // Call some function
  4. someFunction(request.responseText);
  5. },
  6. onException: function(req,exception) {
  7. alert("The request had a fatal exception thrown.nn" +   exception);
  8. },
  9. onFailure: function(request) { return reloadPage(); }
  10. });
  11. }
  12. catch(Exception) {alert("Exception detected: " + Exception);  }

In this example, I am calling someFunction upon completion of the AJAX request, and I am passing the result of the AJAX call to the function. But what if I needed to pass something else to the function, like the inventory ID defined in the query string?

As it turns out, IE and Firefox behave differently when it comes to doing this (go figure...). In Firefox, the following works:

PLAIN TEXT
JavaScript:
  1. onComplete: function(request)
  2.  
  3. {
  4.  
  5. // Get the parameter property of the Ajax.Request object
  6.  
  7. var params = this.parameters;
  8.  
  9. // Parse the key/value pairs and pass to function
  10.  
  11. }

This fails in IE, because this.parameters is undefined. However, the params variable defined from above the try/catch block is available, where in Firefox it is not.

Hopefully, this helps someone out...

tags: , , , , , , , , , , , , , ,

Related:

Trackback URI | Comments RSS

Leave a Reply

You must be logged in to post a comment.