Monthly Archives: August 2010

Enable html5 in Firefox


Hi,

If you are using Firefox 3.6 or above version, then you can enable html5 rendering by changing the configuration of Firefox.

Type about:config in address bar.

Type html5.enable in filter, and double click to set the value true.

Enjoy the HTML5!

To test the page, please create a  page named html5.html, and paste the following code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SVG in text/html</title>
</head>
<body>
<p>A green circle:<svg> <circle r="50" cx="50" cy="50" fill="green"></circle></svg></p>
</body>
</html>

Save the page and open it in Firefox, you should be able to see green circle!

More information about html5 is here.

Little bit about coldfusion sessions and general logout code


Hello friends,

I just started working on ColdFusion, and I have some interesting stuffs, that I’d like to share with you.

For any web application, we normally use session for maintaining client’s login/logout activity. Sessions are created on server side, and each session will have some unique id (in ColdFusion, we have ‘sessionid’). It will alive for some time duration, so if successfully logged-in user requests another page during that time, then server will skip checking of authentication.

We’ll see how session and cookie plays roll in that duration. Server sends two variables to client’s browser. Normally it creates cookies, but if cookies are disabled in client’s browser, then it uses URL. Those two variables are CFID and CFTOKEN.

Now let’s do something interesting. Create one login page and one welcome page. Welcome page will only viewable if user successfully logged in. Now you login from one browser and see the cookies. Pass the same cookies in URL for welcome page from another browser or computer (e.g. welcome.cfm?CFID=35473&CFTOKEN=12004479). You’ll be able see welcome page without asking for login!

So those two variables were just a reference to identify your browser! But two most important thing that you shouldn’t forget ever!
1. If you are using any website that provides login (e.g. facebook, gmail) for your activity, then don’t forget to systematically logout from the website.
2. If you are developer then you should handle the sessions carefully.

In ColdFusion there are four standard cookies that are used for session management. More information is here.
So when we code for logout page, we normally remove the user’s session from server. There is an easy way to do this, and it is to use structDelete(session) function.
But it’ll remove the mapping of client’s browser and server. So in future it will not allow you or another user to login from the same browser.

So you should remove all the session items. You can delete all session items except the standard items (CFID, CFToken, URLToken, SessionID).

Here is the code that you might want to have in your logout.cfm page:

<cfsilent>
 <cflock scope=”Session” type=”Readonly” timeout=”20?>
 <cfset variables.sessionItems = “#StructKeyList(Session)#”>
 </cflock>
 <cfloop index=”ListElement” list=”#variables.sessionItems#”>
 <cfif listFindNoCase(“CFID,CFToken,URLToken,SessionID”, “#ListElement#”) is 0 >
 <cflock scope=”Session” type=”Exclusive” timeout=”20?>
 <cfset StructDelete(Session, “#ListElement#”)>
 </cflock>
 </cfif>
 </cfloop>
 <cflocation url=”login.cfm” addtoken=”false”>
</cfsilent>

Display JavaScript object value


As you probably already know, JavaScript can be difficult to debug. One thing that has helped us out many times is this function to show all the properties of an object. This function recursively takes properties that are objects themselves and shows their properties. To see how it works, put a function call of “dumpProps(document)” in the “onclick” event of a button and you’ll see everything about the document.

This function provides a couple of advantages for debugging. First, it allows you to verify what object you are working with during your script. It also allows you to verify the properties of that object (maybe you can’t remember the property name or don’t know how to spell it). It is also good if you are working with a heirarchy of properties. For example, if you think it might be document.body.referer for the property you want, but aren’t sure, you can show all the document properties, recursively, to find out which one it is. (it’s actually document.referer).

This code uses confirm prompts so you don’t have to go all the way through all the properties once you find the one you want. Clicking cancel will stop the processing. (Note that if you click cancel while the function has been recursing, it will stop that level of recursion and you can continue on or click cancel on the parent level).

Here is the function:

    <script type="text/javascript">
        function dumpProps(obj, parent) {
            // Go through all the properties of the passed-in object
            for (var i in obj) {
                // if a parent (2nd parameter) was passed in, then use that to
                // build the message. Message includes i (the object's property name)
                // then the object's property value on a new line
                if (parent) {
                    var msg = parent + "." + i + "\n" + obj[i];
                } else {
                    var msg = i + "\n" + obj[i];
                }
                // Display the message. If the user clicks "OK", then continue. If they
                // click "CANCEL" then quit this level of recursion
                if (!confirm(msg)) {
                    return;
                }
                // If this property (i) is an object, then recursively process the object
                if (typeof obj[i] == "object") {
                    if (parent) {
                        dumpProps(obj[i], parent + "." + i);
                    } else {
                        dumpProps(obj[i], i);
                    }
                }
            }
        }
    </script>

This code should be placed in the section of your page so it can be used anywhere you need it. Note that the “parent” variable is optional and not needed for the initial call to the function. It is only used during the recursion.

Cascading dropdown in coldfusion


Include latest version of jQuery in your page with following javascript code:

    <script type="text/javascript">
        function fun_changeCustomer(customerId) {
            var url = '';
            url = "/cfc/customerBillingAddressGateway.cfc?";
            url = url + 'method=getAddressInfoByCustomerIdQuery&returnFormat=json&argumentCollection={"customerId": ' + customerId + '}';
            jQuery.getJSON(url, function (data) {
                $("#billingAddress").empty();
                $("#billingAddress").append("--Select--");
                $.each(data.DATA, function (index, optionData) {
                    if ('#form.billingAddress#' == optionData[0]) {
                        $("#billingAddress").append("" + optionData[1] + "");
                    }
                    else {
                        $("#billingAddress").append("" + optionData[1] + "");
                    };
                });
            });
        }
    </script>

Your cfc class (here: customerbillingAddressGateway.cfc) should have following method with remote access:
e.g.
cffunction name=”getAddressInfoByCustomerIdQuery” access=”remote” output=”false” returntype=”query”

It should contain a normal select query that returns the addressId and addressInfo.