Search

Tuesday, July 17, 2007

Prototype.js Ajax Responders Gotcha

I was trying to use the following ajax global responder to show/hide a status message container:
Ajax.Responders.register({
 onCreate: function() {
  $('statusContainer').show();
 },
 onComplete: function() {
  $('statusContainer').hide();
 }
});
However, I was calling the ajax updater as follows:
// Make the ajax request for the server content
new Ajax.Updater(
 $(this.resultsContainer),
 ajaxUrl,
 {
 method: 'get',
 onFailure: this.reportError.bindAsEventListener(this),
 onComplete: this.ShowContent.bindAsEventListener(this),
 evalScripts: true
 }
);
The issue was that the status container will show at the beginning of the ajax request but will never get hidden. Can you spot the error? The problem was that the onComplete function in my ajax request was "overriding" the onComplete function in the global ajax responder. So to make this work, simply change the "onComplete" function in the ajax call to "onSuccess". The final code is:
// Make the ajax request for the server content
new Ajax.Updater(
 $(this.resultsContainer),
 ajaxUrl,
 {
 method: 'get',
 onFailure: this.reportError.bindAsEventListener(this),
 onSuccess: this.ShowContent.bindAsEventListener(this),
 evalScripts: true
 }
);
// //]]>