Category: JavaScript

How to hide/show an HTML form element depending on a combo box choice

This is an example of how you can show/hide an HTML form element depending on a combo box choice.

Put the following JavaScript code between your <head></head> section (or within a .js file if you prefer).

  
<script language="javascript" type="text/javascript">
  function hide() {
    var text = document.formName.textBox;
    if(document.formName.combo.value == "hide") {
      text.style.visibility = "hidden";
    }
    else {
      text.style.visibility = "visible";
    }
  }
</script>

The following snippet of code instead is the HTML code to use to call the hide function.

Read more...

Calling a function of the opener window

It is possible, using JavaScript, to call a function pertaining to the opener window, that is the window that, calling window.open, opened the current window. The code to use is the following:

  
if (window.opener) {
  window.close();
  window.opener.foo("bar");
}

First it checks if the opener window is still open. In this case, it closes the current window and call the foo function on the opener window.

Read more...

Creating a Class definition in JavaScript

There are different ways to define classes in JavaScript. However, this is the most widely used and accepted at the moment:

   
//class
function Person(sLastName, sFirstName, iAge) {
  this.lastName = sLastName;
  this.firstName = sFirstName;
  this.age = iAge;
  this.phoneNumbers = new Array();
}

//method
Person.prototype.showFullName = function() {
  alert(this.lastName + " " + this.firstName);
};

//instances
var oPerson1 = new Person("Lacava", "Alessandro", 30);
var oPerson2 = new Person("Brown", "John", 50);
oPerson1.phoneNumbers.push("1234567");
oPerson2.phoneNumbers.push("7654321");

oPerson1.showFullName(); //outputs Lacava Alessandro
alert(oPerson1.phoneNumbers); //outputs 1234567
oPerson2.showFullName(); //outputs Brown John
alert(oPerson2.phoneNumbers); //outputs 7654321
Read more...

Creating an instance of the object used to make AJAX calls

Nowadays, AJAX is a ubiquitous technology in the IT world. When you need to create the object used to send asynchronous requests to a server, you might face the browser-difference problem. Here is a JavaScript function you could use to overcome this problem:

  
// The following function creates an XMLHttpRequest object
function createHttpRequest() {
  if (typeof XMLHttpRequest != "undefined") //NOT IE {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) // IE {
    var sVersions = [ "MSXML2.XMLHttp.5.0",
    "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
    "MSXML2.XMLHttp","Microsoft.XMLHttp"
    ];

    //try to get an instance of the newer version.
    //If it is not available go down till the oldest one
    for (var i = 0; i < sVersions.length; i++) {
      try {
        var ret = new ActiveXObject(sVersions[i]);
        return ret;
      }
      catch (oException) {
        //Do nothing. Just go on trying with the older versions
      }
    }
  }
  //if it gets here then no version is available
  alert("XMLHttpRequest object could not be created.");
}

As you can see this function creates the correct instance of the XMLHttpRequest object. If the browser is not Internet Explorer then it just instantiates the XMLHttpRequest object, otherwise it tries to create the correct ActiveX object used by IE to represent XMLHttpRequest. In this case it tries to instatiates the object from the newer version going down till the oldest one.

Read more...