I am lucky to get the new layout, originally uploaded by Terence Yim.

Though a little bit off topic, looks like it starts rolling out.

Recently helped my colleague to add the missing mysqli_ping() function to PDO object in PHP. If anyone missed it, here it is:

<?php
class NPDO {
    private $pdo;
    private $params;

    public function __construct() {
        $this->params = func_get_args();
        $this->init();
    }

    public function __call($name, array $args) {
        return call_user_func_array(array($this->pdo, $name), $args);
    }

    // The ping() will try to reconnect once if connection lost.
    public function ping() {
        try {
            $this->pdo->query('SELECT 1');
        } catch (PDOException $e) {
            $this->init();  // Don't catch exception here, so that re-connect fail will throw exception
        }

        return true;
    }

    private function init() {
        $class = new ReflectionClass('PDO');
        $this->pdo = $class->newInstanceArgs($this->params);
    }
}
?>

Just come across a stupid piece of JS program today in some web site:

function preselectSS(what)
{
  if (what == 1) document.getElementById("selSS").selectedIndex = 0;
  else if (what == 2) document.getElementById("selSS").selectedIndex = 1;
  else if (what == 3) document.getElementById("selSS").selectedIndex = 2;
  else document.getElementById("selSS").selectedIndex = 3;
}

Isn’t it a lot nicer to write it as

function preselectSS(what) {
    document.getElementById("selSS").selectedIndex = (what > 0 && what <= 3) ? (what - 1) : 3;
}

The world is full of stupid programmers writing stupid programs.

Update: The same functionality is now provided by the Yahoo! YUI Get Utility.

Update 2: Since the domain I used to host the file is not longer exist, I just paste the JS at the end of the post.

The YUI connection manager use XMLHttpRequest to make remote call, hence calling cross domain URL is prohibited by the browser security model. This class is to solve this situation without the need to setup any server side proxy, while maintaining the same calling mechanism as the YUI connection manager.

Script source: http://rockstonesand.com/js/crossdomainmanager.js

Minified version: http://rockstonesand.com/js/crossdomainmanager_min.js

Usage: Same as YUI connection manager

Functions supported:

asyncRequest, isCallInProgress, abort

Example:
Client side:

<script src="http://rockstonesand.com/js/crossdomainmanager_min.js"></script>
<script>
// Same callback object definition as YUI connection manager
var callback = {
    success: function(obj) {
        var response = obj.responseText;
        // Do UI updates
    },
    failure: function(obj) {
    }
};
var txId = CrossDomainConnect.asyncRequest(
   "http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json",
   callback,
   "jsoncallback");
</script>

Limitations:

• Only GET method is supported, as it uses script tag hack
• The target server side script must support an additional “callback” parameter for the connection manager to specify a callback function.

The crossdomainmanager.js:

var CrossDomainConnect = {

    seqNo : 0,
    scriptNodeMap : {},

    asyncRequest : function(url, callback, callbackName) {

        // The URL must support a "callback" parameter
        if (!callbackName) {
            callbackName = "callback";
        }

        var responseName = "response" + this.seqNo;
        this.seqNo++;

        if (url.indexOf('?') === -1) {
            url += "?" + callbackName + "=CrossDomainConnect." + responseName;
        } else {
            url += "&" + callbackName + "=CrossDomainConnect." + responseName;
        }

        // Create the script node
        var node = document.createElement("script");
        node.setAttribute('src', url);

        this.scriptNodeMap[responseName] = node;

        var responseObj = { tId : responseName };
        if (callback.argument) {
            responseObj.argument = callback.argument;
        }

        var timeoutId = null;

        // Bind the response function
        this[responseName] = function(str) {
            delete this[responseName];
            delete this.scriptNodeMap[responseName];

            if (timeoutId) {
                clearTimeout(timeoutId);
            }

            // Must use setTimeout, otherwise may cause crashes in IE6
            setTimeout(function() {
                node.parentNode.removeChild(node);
            }, 0);

            responseObj.status = 200;
            responseObj.responseText = str;

            if (callback.scope) {
                callback.success.call(callback.scope, responseObj);
            } else {
                callback.success(responseObj);
            }
        };

        // Setup timeout function
        if (callback.timeout) {
            var that = this;
            var timeoutFunc = function() {
                that.abort(responseName, callback);
            };

            // Set the timeout
            timeoutId = setTimeout(timeoutFunc, callback.timeout);
        }

        var p = document.getElementsByTagName("head")[0] || document.body;

        p.appendChild(node);

        return responseName;
    },

    isCallInProgress : function(txId) {
        return this.hasOwnProperty(txId);
    },

    abort : function(txId, callback) {
        if (this[txId]) {
            var node = this.scriptNodeMap[txId];

            setTimeout(function() {
                node.parentNode.removeChild(node);
                node = null;
            }, 0);

            delete this[txId];
            delete this.scriptNodeMap[txId];

            if (callback) {
                var responseObj = { tId : txId };
                if (callback.argument) {
                    responseObj.argument = callback.argument;
                }

                responseObj.status = -1;
                responseObj.statusText = "transaction aborted";

                if (callback.scope) {
                    callback.failure.call(calback.scope, responseObj);
                } else {
                    callback.failure(responseObj);
                }
            }

            return true;
        }

        return false;
    }
};

Good framework for applying MVC design in Web Application.

http://yuiblog.com/blog/2007/09/13/bubbling-library-by-caridy/

Recently I was helping my colleague to fix a strange bug in his Javascript. The bug behave like this:

1. Open the web page in IE.
2. After everything are loaded (HTML, images, scripts, …), click on address bar and press enter
3. IE crashed

When I try to identify the bug, I’ve created a simple page that can reproduce the bug.

crash.html

<div id="panel"></div>
<a href="#" onclick="loadScript(); return false;">Load script</a>

<script>
    var n = 0;
    var callback = function() {
        n++;
        var panel = document.getElementById("panel");
        panel.innerHTML = "loadScript called " + n + " times.";
        var node = document.getElementById("testid");
        node.parentNode.removeChild(node);
    }

    var loadScript = function() {
        var node = document.createElement("script");
        node.src="crash.js";
        node.id = "testid";

        document.getElementsByTagName("head")[0].appendChild(node);
    }

    window.onload = loadScript;
</script>

crash.js

callback();

What the page does is to create a script node dynamically and insert into the document to load an external .js file. When the external “crash.js” is loaded, it calls a function to update the page content and remove the script node. IE will be crashed by either click on the address and hit enter button or just click on the link “Load script”.

The actual reason why IE crashes on this situation is unknown, but one thing can be sure is it only crashes if the same URL is being requested. If you try to append a dummy random query to the script src URL, IE is working fine.

I’ve also discovered another way, which I think is better in solving this problem. Simply use a setTimeout() function to wrap around the removeChild statement with timeout = 0.

setTimeout(function() {
    var node = document.getElementById("testid");
    node.parentNode.removeChild(node);
}, 0);

The problem will be gone by doing this.