Comments on: A Better Loading Message http://www.googlemapsbook.com/2006/09/12/better-loading/ with PHP or Rails and AJAX: From Novice to Professional Thu, 21 Jul 2011 18:23:11 +0000 http://wordpress.org/?v=2.3.3 By: tony http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-53888 tony Thu, 19 Jun 2008 13:09:18 +0000 http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-53888 This new code does not work properly. I have copied the files verbatim and its simply not working. I am not sure if there is a problem in the code or a problem on the site b/c none of the database examples are working in chapter 6. Can you please fix? This new code does not work properly. I have copied the files verbatim and its simply not working. I am not sure if there is a problem in the code or a problem on the site b/c none of the database examples are working in chapter 6. Can you please fix?

]]>
By: Caspar Gorvin http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-74 Caspar Gorvin Wed, 04 Oct 2006 18:42:53 +0000 http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-74 In the example code above, the alert() message box makes sure, no application code is executed before all scripts are loaded. Replace the alert()-call with a call to your application's program entry function, and you'll get the effect as described. The last line in the onload()-message ('var cp = ...') may only call functions that don't rely on the scripts loaded. It's there to demonstrate that calling a function of a script that's beeing loaded will fail, because the onload() function continues (and terminates) without the loading to complete. PS. sorry for the split replies, but the form cut off the text in the middle of the code expample. In the example code above, the alert() message box makes sure, no application code is executed before all scripts are loaded. Replace the alert()-call with a call to your application’s program entry function, and you’ll get the effect as described. The last line in the onload()-message (’var cp = …’) may only call functions that don’t rely on the scripts loaded. It’s there to demonstrate that calling a function of a script that’s beeing loaded will fail, because the onload() function continues (and terminates) without the loading to complete.

PS. sorry for the split replies, but the form cut off the text in the middle of the code expample.

]]>
By: Caspar Gorvin http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-73 Caspar Gorvin Wed, 04 Oct 2006 17:55:55 +0000 http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-73 Why does this show the load message right away even though we loaded the scripts in the onload() function and the browser doesn't show anything before finishing the onload() function? Because the window.onload() function starts the loading of the scripts but doesn't wait until all the scripts are loaded. It terminates after setting up the XmlHttp-requests and - the browser displays the html-file's 'Loading...' message. The only tricky thing to remember is to not do anything in the application that depends on one of the scripts before all the scripts are loaded. Why does this show the load message right away even though we loaded the scripts in the onload() function and the browser doesn’t show anything before finishing the onload() function? Because the window.onload() function starts the loading of the scripts but doesn’t wait until all the scripts are loaded. It terminates after setting up the XmlHttp-requests and - the browser displays the html-file’s ‘Loading…’ message. The only tricky thing to remember is to not do anything in the application that depends on one of the scripts before all the scripts are loaded.

]]>
By: Caspar Gorvin http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-72 Caspar Gorvin Wed, 04 Oct 2006 17:41:06 +0000 http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-72 onLoadFunction(_this.XHRObject); } } }; } // Open and send the request for the file this.XHRObject.open('GET', File, // requested file true); // asynchronous call this.XHRObject.send(null); }; // RequestAndRunScript() // Requests a script file from the server and runs the script CRequestObject.prototype.RequestAndRunScript = function (ScriptFile) { var _this = this; // Define an onload function that will be called after loading the script var onLoadFunction = function(XHRObject) { eval( XHRObject.responseText ); if (_this.onCompletion) { _this.onCompletion(); } }; // Load the script file and run it this.RequestFile(ScriptFile, onLoadFunction); }; // An example of an html-file's onload function: window.onload = function() { // Load and initialize the scripts var RequestObject1 = new CRequestObject(); var RequestObject2 = new CRequestObject(); var RequestObject3 = new CRequestObject(); var RequestObject4 = new CRequestObject(); var RequestObject5 = new CRequestObject(); RequestObject1.onCompletion = function() { RequestObject2.RequestAndRunScript('Script2.js'); }; RequestObject2.onCompletion = function() { RequestObject3.RequestAndRunScript('Script3.js'); }; RequestObject3.onCompletion = function() { RequestObject4.RequestAndRunScript('Script4.js'); }; RequestObject4.onCompletion = function() { RequestObject5.RequestAndRunScript('Script5.js'); }; RequestObject5.onCompletion = function() { alert('All scripts loaded'); }; RequestObject1.RequestAndRunScript('Script1.js'); // Initialize the application, do something useful... var cp = new CCommandProcessor(); }; onLoadFunction(_this.XHRObject);
}
}
};
}

// Open and send the request for the file
this.XHRObject.open(’GET’,
File, // requested file
true); // asynchronous call

this.XHRObject.send(null);
};

// RequestAndRunScript()
// Requests a script file from the server and runs the script

CRequestObject.prototype.RequestAndRunScript = function (ScriptFile)
{
var _this = this;

// Define an onload function that will be called after loading the script
var onLoadFunction = function(XHRObject)
{
eval( XHRObject.responseText );
if (_this.onCompletion) {
_this.onCompletion();
}
};
// Load the script file and run it
this.RequestFile(ScriptFile, onLoadFunction);
};

// An example of an html-file’s onload function:

window.onload = function()
{
// Load and initialize the scripts
var RequestObject1 = new CRequestObject();
var RequestObject2 = new CRequestObject();
var RequestObject3 = new CRequestObject();
var RequestObject4 = new CRequestObject();
var RequestObject5 = new CRequestObject();
RequestObject1.onCompletion = function() { RequestObject2.RequestAndRunScript(’Script2.js’); };
RequestObject2.onCompletion = function() { RequestObject3.RequestAndRunScript(’Script3.js’); };
RequestObject3.onCompletion = function() { RequestObject4.RequestAndRunScript(’Script4.js’); };
RequestObject4.onCompletion = function() { RequestObject5.RequestAndRunScript(’Script5.js’); };
RequestObject5.onCompletion = function() { alert(’All scripts loaded’); };
RequestObject1.RequestAndRunScript(’Script1.js’);

// Initialize the application, do something useful…
var cp = new CCommandProcessor();

};

]]>
By: Caspar Gorvin http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-71 Caspar Gorvin Wed, 04 Oct 2006 17:39:04 +0000 http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-71 Here's the rest of the code example (the reply form cut it off): // Call the specified function if (_this.XHRObject.status Here’s the rest of the code example (the reply form cut it off):

// Call the specified function
if (_this.XHRObject.status

]]>
By: Caspar Gorvin http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-70 Caspar Gorvin Wed, 04 Oct 2006 17:36:36 +0000 http://www.googlemapsbook.com/2006/09/12/better-loading/#comment-70 Hello Mike, I got your book this monday and I'm very pleased with it. I've been working with the Maps API for a while, but I still learn a lot from the book, in particular from the "Advanced" topics and from your hints on external sources for geocoding data. For the loading dilemma, I use an approach that is in my opignion easier and more flexible: 1) put nothing but html in your html-file, don't load any scripts by meta-tags except for the Google API. 2) show a "loading..." message in your html-file 3) in your onload() function, load your application's scripts via XmlHttpRequest 4) when onreadystate == 4 for the first script loaded, eval() the script and then go on and load the next script etc., to make sure, the scripts get loaded and initialized in the correct order 5) load your data files the same way 6) Due to the way the browsers implement variable scopes, any global objects contained in the scripts must be defined implicit, i. e. without the 'var' keyword. E. g.: Define: 'myClass = function () {...}; ' Not: 'var myClass = function...' and not 'function myClass()...' An implementation of the above (error checking stripped off): // The CRequestObject class implements the XHTML-Request-Object class // Constructor function CRequestObject () { // Create an XMLHttpRequest-object (browser implementation dependend) if (window.XMLHttpRequest) { // is Mozilla Firefox, Opera, Internet Explorer 7 this.XHRObject = new XMLHttpRequest(); } else { if (window.ActiveXObject) { // is Internet Explorer 6 or earlier this.XHRObject = new ActiveXObject("Microsoft.XMLHTTP"); } } } // RequestFile() // Requests a file from the server and calls the specified function on completion CRequestObject.prototype.RequestFile = function (File, onLoadFunction) { var _this = this; // a way to pass the this-pointer of the CRequestObject to the event handler (which overwrites the this pointer) this.XHRObject.onreadystatechange = function () { if(_this.XHRObject.readyState == 4) // complete { // Call the specified function if (_this.XHRObject.status Hello Mike,

I got your book this monday and I’m very pleased with it. I’ve been working with the Maps API for a while, but I still learn a lot from the book, in particular from the “Advanced” topics and from your hints on external sources for geocoding data.

For the loading dilemma, I use an approach that is in my opignion easier and more flexible:

1) put nothing but html in your html-file, don’t load any scripts by meta-tags except for the Google API.

2) show a “loading…” message in your html-file

3) in your onload() function, load your application’s scripts via XmlHttpRequest

4) when onreadystate == 4 for the first script loaded, eval() the script and then go on and load the next script etc., to make sure, the scripts get loaded and initialized in the correct order

5) load your data files the same way

6) Due to the way the browsers implement variable scopes, any global objects contained in the scripts must be defined implicit, i. e. without the ‘var’ keyword. E. g.:
Define: ‘myClass = function () {…}; ‘
Not: ‘var myClass = function…’ and not ‘function myClass()…’

An implementation of the above (error checking stripped off):

// The CRequestObject class implements the XHTML-Request-Object class

// Constructor
function CRequestObject ()
{
// Create an XMLHttpRequest-object (browser implementation dependend)
if (window.XMLHttpRequest) { // is Mozilla Firefox, Opera, Internet Explorer 7
this.XHRObject = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) { // is Internet Explorer 6 or earlier
this.XHRObject = new ActiveXObject(”Microsoft.XMLHTTP”);
}
}
}

// RequestFile()
// Requests a file from the server and calls the specified function on completion

CRequestObject.prototype.RequestFile = function (File, onLoadFunction)
{
var _this = this; // a way to pass the this-pointer of the CRequestObject to the event handler (which overwrites the this pointer)

this.XHRObject.onreadystatechange = function ()
{
if(_this.XHRObject.readyState == 4) // complete
{
// Call the specified function
if (_this.XHRObject.status

]]>