Search code examples
ajaxprototypejs

Prototype Ajax.PeriodicalUpdater inserts empty string when server unreachable

I'm using the following to grab some updated HTML and insert it into a div with id "content"

var updater = new Ajax.PeriodicalUpdater('content', '/Doc?'+d.getTime(),
  {
    method: 'post',
    frequency: 5,
  });

The problem is that when the server is shut down (it's running inside of an app that is modifying and server up the data), the updater then simply clears out the content div.

Is there a way to make it so that when PeriodicalUpdater times out, gets a 404, etc. it just leaves the content unchanged? I would rather that the last available data just stay there, not be erased.

For completeness, this is my entire code:

<html>
<head>
<title></title>
<script type="text/javascript" src="/Prototype"></script>
<script type="text/javascript">
var css;
var css_data;

function load_content()
{
  var d = new Date();

  css = document.createElement('style');
  css.setAttribute('type', 'text/css');
  if(css.styleSheet) { css.styleSheet.cssText = '';} //Because IE is evil
  else { css_data = document.createTextNode(''); css.appendChild(css_data); } //And everyone else is cool
  document.getElementsByTagName("head")[0].appendChild(css);

  var updater = new Ajax.PeriodicalUpdater({success: 'content'}, '/%doc_path%?'+d.getTime(),
  {
    method: 'post',
    frequency: 5,
    onSuccess: function(transport) {
          new Ajax.Request('/%css_path%?'+d.getTime(), {
              method: 'post',
              onSuccess: function(transport) {
                if(css.styleSheet) { css.styleSheet.cssText = transport.responseText}
                else { 
                    var new_css_data = document.createTextNode(transport.responseText);
                    css.replaceChild(new_css_data, css_data); 
                    css_data = new_css_data;
                } 
              }
          });
          new Ajax.Request('/%title_path%?'+d.getTime(), {
              method: 'post',
              onSuccess: function(transport) {
                document.title = transport.responseText;
              }
          });
    }
  });
}

</script>

</head>

<body>
<div id="content"></div>

<script type="text/javascript">
    load_content();
</script>

</body>
</html>

As you can see, I tried Triptych's solution...but still no go. It updates with blank data when the request fails still. Since I've got the whole thing here now, can anyone see any mistakes I'm making.

Note: Ignore the strings like %doc_path%... those are just control strings I use so that they can later be replaces programmatically with the proper path for each document...all stuff that's done on the server and really doesn't matter for this.

@Vinze

According to the documentation, onFailure is "Invoked when a request completes and its status code exists but is not in the 2xy family. This is skipped if a code-specific callback is defined, and happens before onComplete."

But if the server was stopped, wouldn't it just time out and there be no status code at all? Maybe I'm understanding that wrong...

Solution

  • Pass an object (not a string) as the first parameter to PeriodicalUpdater. The value keyed as 'success' will only be called on successful AJAX calls.

    new Ajax.PeriodicalUpdater({success: 'content'}, '/Doc?'+d.getTime(),
  {
    method: 'post',
    frequency: 5,
  });

    More on Ajax.Updater (from which PeriodicalUpdater inherits)