Thursday, January 29, 2009

Changing combo box options dynamically with javascript

Most of you guys might already have known about this. I have a requirement where I have to change the options of a combo box when i choose either “Hourly” or “salaried” in another combo box.

A new Option can be created using

var newOption = new Option(“text”, “value”);

Options can be accessed using the select that created the combo box

document.getElementById('ExcludeHoliday').options[0]
Where this code will select “ExcludeHoliday” combo box and the first option. When we try to remove an option from the middle it is essential to reorganize the list starting for the removed option. To mention, removing an option is to set the value of that option to “null” :)
 

Monday, January 19, 2009

Widely used ColdFusion Tags

Like HTML ColdFusion also works on a set of predefined tags. Some of the more important and widely used tags are placed below.

1) CFINCLUDE – This tag is used to reference a ColdFusion file or other documents. Including files allows us to use repetitive code without having to write them over and over again.

It takes up one attribute TEMPLATE and the syntax is

<CFINCLUDE TEMPLATE = “file_name>

2) CFIF - As the name specifies it the same as any of the “IF” in all the other languages.

 <CFIF condition >
         expression 1
<CFELSE>
         expression 2
</CFIF>

There is also an IIF tag which is similar to the ternary operator in java,

IIF( condition, expression 1 ,expression 2)

Where the expression 1 is evaluated when the condition is true and the expression 2 is evaluated when the condition is false.

3) CFLOOP - CFLOOP is a looping tag of ColdFusion.

 <CFLOOP INDEX = “index_name”"
         FROM = “start_numberTO = “end_numberSTEP = “increment>

4) CFSET - This tag is used to set the value of a ColdFusion variable

 <CFSET variable_name = “value>

5) FORM - Builds a form with CFML custom control tags, thus provide more functionality than standard HTML form input elements.

<CFFORM ACTION = “Form_submit>      ...    </CFFORM>

The input elements are place in between the closing and ending form tags. These can be anything varying from textbox, radio button, checkboxes etc.

6) CFQUERY – This tag is used to retrieve the data from the database. You can either pass a sql statement or call a stored procedure into it.

<CFQUERY NAME = “query_nameDATASOURCE = “database_name>   ...   </CFQUERY>

7) CFOUTPUT - This tag is one of the most widely used tags in ColdFusion. This is usually used in conjunction with the CFQUERY tag to display the output from the query.

 <CFOUTPUT QUERY = “query_name>    ...   </CFOUTPUT>

The query attribute in the CFOUTPUT is used to relate the output to the query, specifying that the output is of a particular query. The display formatting of data can be done in this tag using HTML tables, etc.

All the start tags in ColdFusion should have a matching end tag, which is mandatory.

The pound (“#”) is an important sign in ColdFusion and is used with variables whose name are used as strings, but can be eliminated in most cases.

#variable_name#

Reference :  Programming ColdFusion

Friday, January 16, 2009

JavaScript Timer

Well i am a novice in JavaScript, and so i started writing a simple Ad time out script. The most tricky part was to display the time along with the other text, and do transfer to the next page after time out. I learnt that we can place the html at any place

<SCRIPT type="text/javascript" LANGUAGE = "JavaScript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000

function InitializeTimer()
{
    // Set the length of the timer, in seconds
    secs = 10
    StopTheClock();
    StartTheTimer();
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false;
   
}

function StartTheTimer()
{
    if (secs < 0)
    {
        window.location = "next.html"
    }
    else
    {
        document.getElementById('timer').innerHTML=secs;
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}

//-->
</SCRIPT>

Then i learned that we can use document.getElementById(<a or span or div Id) in line 32 to set the value to the current time in the html.

The way i was accessing it in the body of html is

<p class="style3">click to skip or wait for <span id="timer"></span> &nbsp;seconds&nbsp;

A Div element can be used but i get it as

click to skip or wait for
5
seconds 

So i changed it to span to get all in a single line. I read that anchor tag also works but haven’t tried it.

Another interesting thing that i learned is that we can move to the next page after time out using

window.location("next.html");

JavaScript timer code : http://www.mcfedries.com/JavaScript/timer.asp

Introducing ColdFusion

ColdFusion is an application server which provides better capabilities and better experience with most of the work done with basic html-like tags. It is available for all the popular platforms.

ColdFusion supports 3 types of database connections .

1) ODBC – one of the most popular and most widely used connection and is available for all databases.

2) OLE – DB – A connection type that is supported by Microsoft for connecting into databases such as MS-Access and sql server. This is available only in windows version of ColdFusion and needs a special set of drivers to access it in ColdFusion.

3) Native driver – The enterprise version of ColdFusion comes with this type of connection included, with a support to a few of databases. This driver provides much more feature access than ODBC.

ColdFusion Markup Language (CFML) can be used in conjuction with HTML and other client side languages to generate a template to display.

The flow of a ColdFusion server processing requests :

1) The web browser requests data from the web server using files with .cfm extension.

2) The web server in turn sends the request to the ColdFusion application server.

3) All the data retrieval is done ColdFusion combines the output with the html in the page template and then the data is sent back to the web server which is in turn sent to the web browser for presentation.

Reference: Programming ColdFusion

Thursday, January 15, 2009

frameset and div element

I just started working on java script to provide some enhancements to the basic PeopleNet application. The requirement is to design a light box to display information about the new features in the application. Application’s main page consists of frames and wanted to add light box over it to mask the entire screen and have the popup with the data. Most of the light boxes are developed such that they add a div element (light box actually) on a body tag, which works fine, but when i was trying to add div element to frameset it does not display the light box.

I was searching around but could not find any information regarding adding a div to the frameset.