Clean Up Your Applications Using AJAX

Loading notification

When trying out the examples using HTML_AJAX, you will notice a red box containing a "Loading..." notice each time an AJAX call is performed. This is automatically done by HTML_AJAX.
This notice is a <div> element that is created if it does not already exist. To show a different message, insert a <div> element with id="HTML_AJAX_LOADING" in your HTML, such as in the example below:

<div id="HTML_AJAX_LOADING" style=
 "background-color : blue; color : 
 white; display : none; position : 
 absolute; right : 50px; top : 50px;">
 Loading new string...</div>

If you do not want this message to be shown on every request, you have to overwrite the JavaScript function that generates it:

HTML_AJAX.onOpen = function(){
  // do nothing
}

Debugging AJAX

As you are experimenting with AJAX, you will find one of the biggest changes to be your debugging approach. Instead of having to care solely for PHP code debugging, now you have to debug JavaScript and the AJAX communication between the two. However, this can be quite easy to manage.

First, always test each piece separately. When working in JavaScript, make sure to create a debugging function. The easiest thing to do is to create your own JavaScript equivalent of the PHP print_r() function, as shown below:

function print_r(input) {
  var ret;
..for(var i in input) {
....ret += "["+i+"] = "+input[i]+"\n";
..}
..alert(ret);
}

JPSpan also offers logging capabilities through its observer functionality. You can use this to log AJAX call errors and successes.

The default server setup also passes PHP errors across as JavaScript alerts. You might also notice that you are seeing alerts from JavaScript errors; this happens because JPSpan is catching them and creating alerts as well.

When using HTML_AJAX, you can add your own error handler to change a <div> element with the error id:

HTML_AJAX.onError = function(e) {
  msg = "\n\n";
  for(var i in e) {
    msg += i + ':' + e[i] +"\n";
  }
  document.getElementById('error').
    innerHTML += msg;
}

This will catch all your AJAX errors, which are normally just PHP errors, but can also include 404s, timeouts, and so on.

Finally, we recommend developing on Firefox and then testing in Internet Explorer. Firefox's built-in development tools are generally better than anything available for Internet Explorer, and there are tons of great Firefox extensions.