Safari shows a blank page

I just ran into something odd and found all sorts of complex solutions (none of which worked for me), so I decided to post this case.

I’m creating a new version of an interface at work and tested with FireFox during development. When I opened it in Safari, all I got was the background image. No content at all. I Googled and several people reported having the same problem and said that clearing the cache would do the trick. It did not.

In the end, the issue was a missing ‘–>’ inside a script tag.

<script type="text/javascript"> <!-- // open a comment for older browsers - is this actually required still??
/* lots of JS here */

// There should be a close comment (-->)  here!

Safari, not finding the closing comment tag, simply considered all of the HTML to be commented out.

I hope this helps!


Book Suggestions:


Introduction to Ajax

In this article, I provide an explanation of Ajax with a historical introduction and WITHOUT the use of any frameworks such as jQuery. If you are eager to start seeing the code, please scroll down.


What is Ajax?

Ajax stands for Asynchronous Javascript And XML. It’s a way to call back-end scripts asynchronously – that is, without impacting user experience/flow. Basically, you don’t even see the cursor become an hourglass or whatever other “waiting/processing” icon your system uses. It’s not a language, but a technique. As for back-end scripts, you can use whatever you feel more comfortable with: PHP, Perl, Java, JSP, Shell, C, etc. The way to choose which technology to use as back-end is outside the scope of this article.

 Historical approach for calling back-end apps

Throughout web-development history, the very first way used to achieve back-end processing followed by front-end display was to create a form and set the back-end script as the action to that form. Upon submission, the form fields would be sent to the back-end script as a series of special environment variables, which would then be handled by the programmed logic. The back-end output would be displayed on the screen (either the same page/frame or a different page/frame, depending on the target attribute of the form).

The catch 22 of this approach is that if you want to present another form after processing, that form must be produced by the back-end script, which leads to maintenance mayhem – to add or remove a field, you have to do so in both the original HTML and in the HTML of the back-end script.

Continue Reading…

Ajax: Form fields into URL query string

Here’s a quickie for you Ajax coders who need a function to parse your form fields into a URL query string. It handles input fields (text, hidden, whatever), radio and checkbox elements, and single/multiple select menus. Just make sure that all your form fields have IDs. Multiple choice SELECTs get grouped by pipes (|). Update:Modified multiple-choice SELECTs to work like real GETs.

function build_post_string(frm) {
	var poststr;
	var poststr_array = [];
	if (! {
		// assume it's a string. get the form object
		frm = document.getElementById(frm);
	for (i=0;i<frm.elements.length;i++){

		var elem = frm.elements;
		if (! {
			// skip any fields that don't have IDs
		if (elem.type == 'radio' || elem.type == 'checkbox') {
			// only grab radio buttons and checkboxes that are checked
			if (!elem.checked) {
		// get select values
		if (elem.nodeName.match(/SELECT/i) && elem.multiple) {
			//var sel = elem;
			var sel_array = new Array();

			for (var o=0;o<elem.options.length;o++) {
				if (elem.options[o].selected) {
					sel_array[sel_array.length] ="="+elem.options[o].value;	
			var sel_str = sel_array.join('&');
			// build key/value pairs for SELECTs
			poststr_array[poststr_array.length] = sel_str;
		else if (elem.nodeName.match(/SELECT/i)) {
			poststr_array[poststr_array.length] ='='+elem.options[elem.selectedIndex].value;
		else {
			// build key/value pairs for everything else
			poststr_array[poststr_array.length] ="="+elem.value;

	// build poststr
	poststr = poststr_array.join("&");
	return poststr;


Book Suggestions: