ColdFusiontimes :: JavaScript/AJAX

JavaScript/AJAX

JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications.

JavaScript is a scripting language compatible with most browsers. It allows web developers to write interactive web pages that can respond to user input (e.g. validating information entered in a form, highlighting links when the mouse is over them etc.)

Pop-up window

function newPopup(url) {
	popupWindow = window.open('www.coldfusiontimes.com','popUpWindow',
	'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,
	toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

Modal window

function modWindow(url,w,h) {
	if (window.showModalDialog)
		window.showModalDialog('www.coldfusiontimes.com', window, 'dialogHeight:500px;dialogWidth:500px;center:yes','resizable: yes; help: no; status: no; scroll: no;');
	else
		alert('You need Internet Explorer 5 or higher.');
}

Print dialog box

	window.print();

Confirm Box

function deleteConfirm()
{
	var deleteme = confirm("Are you sure want to delete this record?");
	if (deleteme==true)
	 	{
	  	alert("Record has been deleted!");
	 	}
	else
	 	{
	 		alert("Record not deleted yet!");
	 	}
}

Get argument detail with 'arguments' variable. 'arguments' is a special variable.

function unlimited_args(){
 
    for( var i = 0; i < arguments.length; i++ ) {
        alert(arguments[i]);
    }
}
 
unlimited_args(1,2,3);

Trim a string

function trim(stringToTrim) {
	return stringToTrim.replace(/^\s+|\s+$/g,"");
}

Simple AJAX function

function ajaxFunction(str)
{
	if (window.XMLHttpRequest)
  	{// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange=function()
  	{
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
    		alert(xmlhttp.responseText);
    	}
  	}
	xmlhttp.open("GET","myPage.cfm?myarg="+str,true);
	xmlhttp.send();
}

Dynamically Add/Remove rows in HTML table using JavaScript

<html>
<head>
    <title> Add/Remove dynamic rows in HTML table </title>
    <script language="javascript" type="text/javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = " ";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "radio":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "textarea":
                            newcell.childNodes[0].value = " ";
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
 
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
             for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
            }catch(e) {
                alert(e);
            }
        }
    </script>
</head>
<body>
    
    <!--- Check submitted values --->
    <cfif isDefined("form.save")>
        <cfdump var="#form#">
    </cfif>

     <form name="frmDyTbl" method="post" action="">
 
    <table id="dataTable" width="350px" border="1">
        <tr>
            <td><input type="checkbox" name="chk[]" value="1"/></td>
            <td><input type="text" name="txt" value=" "/></td>
            <td>
                <select name="country[]">
                    <option value="in">India</option>
                    <option value="de">Germany</option>
                    <option value="fr">France</option>
                    <option value="us">United States</option>
                    <option value="ch">Switzerland</option>
                </select>
            </td>
            <td><input type="radio" name="rdo[]" value="1"/></td>
            <td><textarea name="desc[]" rows="3" cols="30"></textarea></td>
        </tr>
    </table>
    
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
     <input type="submit" value="save" name="save" />

    </form>
</body>
</html>

Small fish in the sea

A ColdFusion programer since 2006 which have developed various web based applications using Adobe ColdFusion (from version 4.5 to 9).

manoj_kothari9@yahoo.com
+91 9711601778

Join me on: facebook twitter

more about me

Usefull tips