Sixteen Small Stones » programming http://www.sixteensmallstones.org The Weblog of J. Max Wilson Thu, 02 Feb 2012 23:50:09 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE JavaScript Bugs: Overriding Internet Explorer’s document.getElementById() To Be W3C Compliant Exposes An Additional Bug In getAttributes() http://www.sixteensmallstones.org/ie-javascript-bugs-overriding-internet-explorers-documentgetelementbyid-to-be-w3c-compliant-exposes-an-additional-bug-in-getattributes http://www.sixteensmallstones.org/ie-javascript-bugs-overriding-internet-explorers-documentgetelementbyid-to-be-w3c-compliant-exposes-an-additional-bug-in-getattributes#comments Fri, 16 Nov 2007 20:13:00 +0000 J. Max Wilson Continue reading →]]> It’s time for another technical article. Those of my readers who aren’t interested in this sort of thing can safely disregard this particular post.



The next time someone asks you why web programmers prefer Firefox to Internet Explorer, send them a link to this post. (Even if they don’t understand it!)



The increasing popularity of Ajax technologies for web application development has increased the use of JavaScript. When I first released my first open source project, xajax, back in May of 2005, the term Ajax was only a few months old. Programming in JavaScript has since become a major part of my everyday work, and increasingly a growing number of bugs found in our applications are related to inconsistencies in JavaScript implementations in different web browsers.



Most programmers who work extensively in JavaScript have been stung, often more than once, by Microsoft’s shoddy, non-standard implementation of manipulating the HTML DOM using JavaScript. IE7 has been an improvement, but it still has some bugs that make programmers want to rip out their hair.



One of the cornerstone functions for JavaScript DOM manipulation is the document.getElementById() method which allows the program to get any element in the HTML by its id attribute, which is supposed to uniquely identify that element.



There is a well known bug in the Internet Explorer implementation of the getElementById() method, which, contrary to the W3C standard, allows the method to return an element if the element’s id attribute _or_ its _name_ attribute matches the id the programmer is looking for. The standard example of why this is problem is as follows:


<html>
	<head>
		<title>Demonstrate IE7 document.getElementById() bug</title>
		<meta name="description" content="matching on this is a bug"/>
	</head>
	<body>
		<textarea name="description" id="description">This is information about the bug</textarea>
		<script type="text/javascript">
			alert(document.getElementById('description').value);
		</script>
	</body>
</html>




If you view the example in Firefox, you will get a JavaScript alert message containing the content of the textarea. However, if you view it in IE7 the JavaScript alert will contain the word “undefined”.



The error is caused because IE’s document.getElementById(‘description’) sees the meta tag with the name attribute set to “description” and since it treats name and id attributes as interchangeable, returns the meta tag instead of the textarea which actually has an id set to “description”. Arrggh!



JavaScript programmers who are familiar with this bug often take great care to avoid the problem by being circumspect with the names and ids of their elements. However, this becomes increasingly difficult as applications become more complex with multiple reusable parts that are included into various parts of the same system, especially with multiple programmers working concurrently. Naming conventions can help, but there are times when the id of an input element (which must be unique) differs from its name attribute, which does not have to be unique.



In any case, I ran across a slick way of dealing with Internet Explorer’s badly implemented getElementById() method on a blog called Web Bug Track. The idea is to override IE’s native method with one that works according to W3C standards, like this:


<script type="text/javascript">
if (/msie/i.test (navigator.userAgent)) //only override IE
{
	document.nativeGetElementById = document.getElementById;
	document.getElementById = function(id)
	{
		var elem = document.nativeGetElementById(id);
		if(elem)
		{
			//make sure that it is a valid match on id
			if(elem.id == id)
			{
				return elem;
			}
			else
			{
				//otherwise find the correct element
				for(var i=1;i<document.all[id].length;i++)
				{
					if(document.all[id][i].id == id)
					{
						return document.all[id][i];
					}
				}
			}
		}
		return null;
	};
}
</script>




If we add this JavaScript code to the head of our example, it now works wonderfully, just like Firefox!



However, I recently implemented this override workaround to the code for our web application, and doing so exposed another bug in IE7 that I hadn’t run across before. This bug is in its getAttribute() method .



The bug happens when you have a form in which there is an input with the name attribute set to “id”. For example,


<html>
	<head>
		<title>Demonstrate IE7 getAttribute() bug</title>
	</head>
	<body>
		<form id="myForm1">
			<input id="user_id" name="user_id" value="text" />
		</form>
		<form id="myForm2">
			<input id="id" name="id" value="text" />
		</form>
		<script type="text/javascript">
			var formElement1 = document.getElementById('myForm1');
			var formElement2 = document.getElementById('myForm2');
			alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));
		</script>
	</body>
</html>




In Firefox, when you load this example you get a JavaScript alert containing the ids of the two forms:



myForm1

myform2



But in IE7 you get instead:



myForm1

[object]



Somehow, IE7′s getAttribute() method erroneously accesses the form input with the name “id” instead of the actual form element’s id! A little experimentation shows that you get the same IE7 result even if you use formElement2.id instead of the getAttribute() method. Fortunately, you can still get the correct form element id by using one of the following:



formElement2.attributes['id'].value

formElement2.getAttributeNode(‘id’).value



Our overridden getElementById() method depends on comparing the id of the element retrieved by IE7′s native method with the id that is being sought, but because of this bug in the getAttribute() method and the id property, even when the native method has returned the correct element the comparison fails because the id is the input element instead of the id attribute.



So, in order to make sure our getElementById() override for IE7 works properly, even when the element we are trying to get is a form containing an input element with the name attribute set to “id”, we have to revise our override method as follows:


<script type="text/javascript">
if (/msie/i.test (navigator.userAgent)) //only override IE
{
	document.nativeGetElementById = document.getElementById;
	document.getElementById = function(id)
	{
		var elem = document.nativeGetElementById(id);
		if(elem)
		{
			//make sure that it is a valid match on id
			if(elem.attributes['id'].value == id)
			{
				return elem;
			}
			else
			{
				//otherwise find the correct element
				for(var i=1;i<document.all[id].length;i++)
				{
					if(document.all[id][i].attributes['id'].value == id)
					{
						return document.all[id][i];
					}
				}
			}
		}
		return null;
	};
}
</script>




So there you go! Another day in the life of a JavaScript developer! Hope someone else finds this helpful until Microsoft decides to fix their JavaScript HTML DOM.


]]> http://www.sixteensmallstones.org/ie-javascript-bugs-overriding-internet-explorers-documentgetelementbyid-to-be-w3c-compliant-exposes-an-additional-bug-in-getattributes/feed 8 PHP Bug: The magic __call method and overriding methods in child classes http://www.sixteensmallstones.org/php-bug-the-magic-call-method-and-overriding-methods-in-child-classes http://www.sixteensmallstones.org/php-bug-the-magic-call-method-and-overriding-methods-in-child-classes#comments Fri, 12 Oct 2007 02:36:00 +0000 J. Max Wilson Continue reading →]]> This article is about a technical aspect of computer programming and since I know that many of my readers are not computer programmers, and of those that are, many do not program in PHP, you may safely ignore it unless it interests you.

As I’ve been working on a light-weight data access layer for PHP5.1+ that I hope to release as open source in the near future, I have discovered an annoying design flaw in PHP.

Support for a more object-oriented approach to programming has been greatly improved since the introduction of PHP5. PHP also offers some magic methods that can be used to simulate properties and methods without having to actually declare them individually. These are great for implementing on the fly methods and properties.

But these magic “overloading” methods don’t function exactly as expected when it comes to inherited child classes.

Here an example program to demonstrate the problem I have discovered:

<?php
class A
{
// Use the magic __call method to handle
// method calls that aren't actually defined
function __call($strMethod, $arrArgs)
{
switch ($strMethod)
{
case "getEvaluation":
return "PHP " . phpversion();
break;
default:
$strError = 'Call to undefined method ';
$strError .= get_class($this);
$strError .= '::'.$strMethod.'()';
throw new Exception($strError);
break;
}
}
}
class B extends A
{
// Define a real method in the child class
// that overrides the magic method in
// the parent class to modify what it normally
// would return
function getEvaluation()
{
return parent::getEvaluation() . " Rocks!";
}
}
// Instantiate the parent class and call the
// method which should be handled magically by
// the __call method
$A = new A();
echo $A->getEvaluation() . "<br/>";
// Instantiate the child class and call the method
$B = new B();
echo $B->getEvaluation() . "<br/>";
?>

The output one would expect from this script would be:

PHP 5.2.4
PHP 5.2.4 Rocks!

But instead this is what you really get:

PHP 5.2.4

Fatal error: Call to undefined method A::getevaluation() in /www/test.php on line 34

The magic __call() method is never invoked when an undefined method is called on the parent class from within the child class method. Ouch!

This was apparently reported as a bug to the PHP development team back in PHP 5.1 Release Candidate 1 in October of 2005 (Bug #34739) but it was marked as “Bogus” and closed with a the explanation that ”__call() is not used when calling static methods.”

Of course, the explanation is itself “Bogus.” It doesn’t make any sense at all. In this case, the paamayim-nekudotayim (::) or scope resolution operator is being used in conjunction with the parent keyword to access the overridden method of a parent class within an instance of the child, not a static method on the class.

The code above should work as written.

There is a workaround, but I find it very unsatisfactory. You have to replace the call to parent::getEvaluation() with parent::_call(‘getEvaluation’,null) . This works, but it means that you have to know that your parent class uses the magic _call() method and which methods are magical and which are not in order to override them in a child class.

The child class should be agnostic to whether the parent class methods that it is trying to invoke are real or magical.

So I have submitted the bug to the PHP bug tracker. Let’s hope that the developers agree that this is a serious design flaw that interferes with the ability to program object oriented code in PHP.

]]> http://www.sixteensmallstones.org/php-bug-the-magic-call-method-and-overriding-methods-in-child-classes/feed 0 LDS Tech: Roll Your Own LDS Blog Portal! http://www.sixteensmallstones.org/lds-tech-roll-your-own-lds-blog-portal http://www.sixteensmallstones.org/lds-tech-roll-your-own-lds-blog-portal#comments Wed, 25 Jul 2007 20:55:09 +0000 J. Max Wilson Continue reading →]]> Over the last couple of years I have been approached by various individuals looking for a programmer to develop an LDS blog portal.

There are, of course, already a couple of popular portals for keeping up with blogging by LDS members, but there have sometimes been those who are dissatisfied with the blog selection. Some feel that too many apostate and borderline apostate blogs are included, while others don’t feel they are included enough.

Well now anyone can, with a very small amount of effort, create and host his or her own public or private LDS blog portal.

I am not really interested in maintaining my own LDS blog portal to compete with existing portals, even though the code upon which the most popular of these, ldsblogs.org, is available for free from its creator, Russ Johnston.

However, I do have an interest in new technology, and as a personal challenge, I wondered if I might be able to create a near clone of his portal, using only XHTML, CSS, and JavaScript in conjunction with the nifty new Google Ajax Feed API .

The resulting application is pretty cool, even if I do say so myself. It reproduces much of the functionality of the Mormon Archipelago portal, without any need for server side code, or complicated feed caching. And even better, it accomplishes it in about 38K of static XHTML, CSS, and JavaScript that runs entirely in the user’s browser and communicates to Google to fetch posts from the blogs it aggregates.

And because it requires no server side technology, it can be run from just about anywhere, even from a blogger blogspot.com site or even your own computer’s hard drive or desktop!

Check out the example running on blogspot at
http://lds-blogs.blogspot.com

Anyone is free to download the blog portal code and roll their own LDS Blog portal, add or remove feeds, and organize them how ever they wish.

The code can be downloaded in two flavors: a multi file version that splits out the code into 3 separate html, css, and javascript files, or the single file version that includes all of the code in a single html file that can be used as a blogger template.

Download Blog Portal Multi File version
Download Blog Portal Single File version

I have maintained the general feel, terminology, and blog groups used by ldsblogs.org because my personal challenge was to create an clone using only client-side technology and I thought it would be good for people to start with something familiar that they could then tweak. Modify it however you would like to include or exclude blogs, group them differently, or change the labels, how posts are displayed, or even the whole layout if you like. It is very flexible.

Of course, the code can be used to create not just an LDS blog portal, but any kind of blog portal; to aggregate and group posts from any number of websites that offer RSS Feeds and display them in groups on a single page.

Some technical details

The most difficult part of setting up the blog portal is getting your Google API Key for the website on which you intend to run the portal. You will need to have a Google Account. If you have a gmail account, you already have one. If not, you can sign up at http://www.google.com/accounts/ .

To generate the Google API Key for your website, go to
http://code.google.com/apis/ajaxfeeds/signup.html . Login with your Google account if necessary, agree to the Terms of Use and enter the url of your website. Then click “Generate API Key”. Google will generate a key that will look like a long list of letters and numbers.

Open up the index.html file for the portal in a text editor like Notepad and find the following line (about line #17 in the multi file version, line #40 in the single file version):

var FeedAPIKey = ‘’;

Copy and paste the API Key that Google generated in between the single quotes. Like this:

var FeedAPIKey = ‘XBQIAAAAyWlSO6jLDRIPbjAOCuNWIBT2XXp_ZAY8_ufC3CFXhHIE1NLwkxSOzqSZjo9n2sRzVuv6OkmWTwCsAR’;

Then save the index.html file.

At this point, the portal should be fully functional, even if you open it in your browser from your own hard drive or desktop.

The feeds are grouped and displayed using a custom feedGroup JavaScript class that I wrote as a wrapper for the Google Ajax Feed API. If you want to add, remove, or move a feed from one group to another, simply find the line of JavaScript where it is added to the group in the html file and make the changes.

For instance, if you wanted to add the feed for the official lds.org website to the first group, you would find the lines where the first group is configured and add the following:

feedGroup1.addFeed(‘http://feeds.lds.org/ldsHomeFeatures’);

That is it. Now save the html file and reload it in your browser and the most recent posts to lds.org will appear mingled with other posts from sites in the first group.

The download includes as readme file with some additional details, and feel free to ask questions or give feedback here in the comments.

]]> http://www.sixteensmallstones.org/lds-tech-roll-your-own-lds-blog-portal/feed 2 Happy Birthday Xajax! http://www.sixteensmallstones.org/happy-birthday-xajax http://www.sixteensmallstones.org/happy-birthday-xajax#comments Thu, 25 May 2006 06:10:00 +0000 J. Max Wilson Continue reading →]]> Today is the one year anniversary of my open source project: xajax!

The xajax project was registered with SourceForge.net on May 24th 2005, just slightly more than 3 months after the very term Ajax was coined by Jesse James Garrett in his article published on February 18, 2005 at Adaptive Path.

We’ve come a long way since then, thanks to the great efforts and skill of Jared White and Eion Robb.

We have 782 registered users in the xajax community forum, and 6200 posts in 1263 Topics since the forum was established in October 2005.

Xajax has been downloaded 48,318 times from SourceForge.net. The xajaxproject.org homepage gets an average of 900 visits per day.

Thanks to all of you have donated to the project and a big thanks to all of you who are using xajax and contributing feature requests, finding bugs, and helping others in the community!

We look forward to another great year as xajax continues to develop to meet your development needs.

]]> http://www.sixteensmallstones.org/happy-birthday-xajax/feed 0 The Firebug Extension for Firefox http://www.sixteensmallstones.org/the-firebug-extension-for-firefox http://www.sixteensmallstones.org/the-firebug-extension-for-firefox#comments Wed, 18 Jan 2006 23:31:47 +0000 J. Max Wilson Continue reading →]]> If you develop for the web, there is a new extension for Firefox that you simply must get:

Firebug combines the functionality of the DOM inspector with the Error console and command-line JavaScript interpretor and then packs it with some great additional features.

Among its many features, Firebug allows you to inspect XMLHttpRequest responses, and so it will be invauable when debugging Ajax applications.

Another great feature is the ability to log custom debug messages from your javascript. Until now, debugging JavaScript often involved strategically placed alert messages. With Firebug, you simply add the following code to your script:

function printfire()
{
    if (document.createEvent)
    {
        printfire.args = arguments;
        var ev = document.createEvent("Events");
        ev.initEvent("printfire", false, true);
        dispatchEvent(ev);
    }
}

Then you call printfire(something); in your script and your debug message will be logged in the Firebug console.

You can read about Firebug’s other features in the FAQ .

Congratulations to programmer Joe Hewitt for this great plugin!

]]> http://www.sixteensmallstones.org/the-firebug-extension-for-firefox/feed 0 xajax 0.2 released http://www.sixteensmallstones.org/xajax-02-released http://www.sixteensmallstones.org/xajax-02-released#comments Fri, 30 Dec 2005 07:01:00 +0000 J. Max Wilson Continue reading →]]> I’m pleased to announce the release of xajax version 0.2.

The xajax PHP library allows PHP developers to easily add Ajax functionality to their PHP driven websites. A big thank you to Jared White for his excellent work on the project and to our wonderful forum participants who have helped debug, submitted code improvements, and suggested feature enhancements.

Also a special thanks to those who donated money to the project. The donations will help us pay for hosting for the new xajax webite, wiki, and forum .

]]> http://www.sixteensmallstones.org/xajax-02-released/feed 0 Ajax & XUL with xajax http://www.sixteensmallstones.org/ajax-xul-with-xajax http://www.sixteensmallstones.org/ajax-xul-with-xajax#comments Fri, 02 Dec 2005 20:25:00 +0000 J. Max Wilson Continue reading →]]> One interesting subject that has come up in the the xajax project forum is using our xajax library to implement PHP driven Ajax for XUL applications written to run in Mozilla based browsers like Firefox. In case you don’t know about it already, XUL is Mozilla’s XML-based User interface Language. Developers use XUL to create extensions for Firefox, among other things.

Using xajax with xul is only in the beginning stages of exploration, but I look forward to what comes out of it. While it does not work with today’s xajax beta test, I’ve made a slight modification to the development version of xajax in CVS that makes it so that it will work with XUL, and I’ve added a couple of very simple examples to the repository as well. These changes will be included in the official release of xajax 0.2 after the beta test in complete.

Here is an example for the curious. We have two files, a .php server file that processes requests from the xul application, and a .xul application xml file.

xulServer.php:

<?php
// xulServer.php demonstrates a XUL application with xajax
// XUL will only work in Mozilla based browsers like Firefox
// using xajax version 0.2
// http://xajaxproject.org
require_once("xajax.inc.php");
function test()
{
        $objResponse = new xajaxResponse();
        $objResponse->addAlert("Hello World!");
        $objResponse->addAssign('testButton','label','Success!');
        return $objResponse->getXML();
}
$xajax = new xajax();
$xajax->registerFunction("test");
$xajax->processRequests();
?>

If you want to create a standalone XUL app that is not generated by PHP you have to hardcode the javascript variables and links in your xul code instead of using the printJavascript() function and you have to use the xajax.call() function to call your xajax functions instead of the “xajax_” functions that are normally generated by the PHP xajax library.

xulClient.xul:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
        <link rel="stylesheet" type="text/css"
         href="/css/default.css"/>
        <script type="application/x-javascript">
                var xajaxRequestUri="xulServer.php";
                var xajaxDebug=false;
                var xajaxStatusMessages=false;
                var xajaxDefinedGet=0;
                var xajaxDefinedPost=1;
        </script>
        <script type="application/x-javascript"
        src="http://www.sixteensmallstones.org/xajax_js/xajax.js">
        </script>
</head>
<xul:button id="testButton" oncommand="xajax.call('test',[]);"
 label="Test"/>
</html>

I’ll be interested in seeing where our xajax users will go with this.

]]> http://www.sixteensmallstones.org/ajax-xul-with-xajax/feed 1