Read, With the Name of Your Lord Who Created

Archive for the ‘Javascript’ Category

Error “‘Sys’ is undefined” in Asp.Net Ajax

Posted by triaslama on November 29, 2008

When I try ASP.NET Ajax in my development server I get this Javascript error: “‘Sys’ is undefined“. This error occur because I place <asp:ScriptManager runat=”server” /> element in my page.

Wondering why, I search in internet and hope that I will find one of the solution. After several trial and error finally I can find the solution and it work just fine for me.

To solve the error we need to modify web.config file, add the following under <system.web />

<add  verb=”GET,HEAD” path=”ScriptResource.axd” type=”System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ />

Nothing more I can say, but if you get the same error when you work with ASP.NET Ajax try the above solution, and I hope this help.


Posted in ASP.NET, Javascript | Tagged: , , , , , , , | 14 Comments »

Four Ways Javascript Binding Event Listeners

Posted by triaslama on July 22, 2008

There is several ways in how to bind an event in Javascript. As far as I know four ways exist on behalf of binding a Javascript event. Here brief description of each way

1. Through inline HTML Code
The Javascript event declared inline in HTML code, for example:

<input type=”button” value=”Alert Message” onclick=”showAlert()” />

Then showAlert() is a Javascript function that merely show an alert message:

function showAlert()
      window.alert("Hello, World!!!");

This inline event binding works for all browsers.

2. Traditional Binding
I think this way is more elegance than the first one, but before we can do this we must get the desired element. We can use two useful methods of document object to get the element we want, there is getElementById() and getElementsByTagName(). Both method receive one string parameter which show the ID of an element (for getElementById()) or elements name (for getElementsByTagName()). Please aware that the result of getElementsByTagName() is always array of element.
Suppose that we have the following page:

Read the rest of this entry »

Posted in Javascript, Programming | Tagged: , , , , , | 18 Comments »

Javascript Event Phases: Capturing and Bubbling

Posted by triaslama on July 3, 2008

Events is something useful in programming world, because with events program can react based on user action. Javascript is no exception and I think one of Javascript strength is Events. There is many interesting things in Javascript events one of them are the Javascript event phases: Capturing and Bubbling.

Two Phases of Javascript Event: Capturing and Bubbling
Capturing phase is an event moving down the DOM tree to the element that instantiated event. Bubbling phase occuring after Capturing phase. Bubbling phase begins from the source of the event (e.g. button click) traverses up DOM tree to the root element.

Let’s see the following document structure:

<input type="button" />

When we click the button, the event captured by the document first, then <body> element, <form> element, and finally the <input type=”button” /> element (capturing phase). After that the event moves back, started from button element (button click event handler fired), <form>’s click, <body>’s click, and document click event handler fired (bubbling phase).

For the complete example try the following (evtphases.htm):
Read the rest of this entry »

Posted in Javascript, Programming | Tagged: , , , , , | 2 Comments »

Cursor Positions, Selected Text, and A Simple HTML Editor

Posted by triaslama on June 6, 2008

It would be nice if we have a HTML text editor that doing a simple task of HTML editor for us. It works just like HTML view of WordPress admin page when we write a post. We select the text press specific button and then the selected text will be enclosed with appropriate format. I Test the code in Mozilla Firefox and Internet Explorer, so in both browsers this code should works fine. Here the screenshoots:

Screenshoots page.

We need to prepare the prerequisites.

As prerequisites, at least we need two things. First, we need to know how to define the cursor position inside a <textarea> element, second we need to know how to retrieve a selected text inside a <textarea> element. So, for the first step, I will talk about the both things shortly.

Every browser brings the different behaviour. The browser quirk will make our code a little bit longer because we need to specify different code for different browser. Defining cursor position (current position) is trivial in Mozilla Firefox, but we need a little trick in Internet Explorer. If we want to retrieve selected text in a <textarea> element, both (Forefox and IE) has their own way too.

Defining Cursor Position Inside a <textarea> Element
In Firefox we just need the following code to determine the current position of cursor in a <textarea> element:

var currentPosition = txtArea.selectionStart;

txtArea is a <textarea> element.
Internet Explorer (I use IE 6) doesn’t have selectionStart and selectionEnd property, so we need a little more effort to determine start and end position of the cursor (this is a tricky way).

var range = document.selection.createRange();
var drange = range.duplicate();
drange.setEndPoint("EndToEnd", range);

var currentPosition = drange.text.length - range.text.length;
var endPosition = drange.text.length - currentPosition;

Read the rest of this entry »

Posted in HTML / CSS, Javascript | Tagged: , , , , , , , | 17 Comments »

Pagination in ASP.NET

Posted by triaslama on May 18, 2008

ASP.NET has DataGrid control, and datagrid control has build in support for pagination. What I do in this post is just something like datagrid pagination, but I add two buttons each of them to navigate to previous and next page respectively.

I use ListOfPage class to produce list of page number, you can see more on this class in my previous post here. For simplicity I use array of string as data source, in more common scenario maybe we use data from database, represent it in DataTable then use the DataTable as a data source.

I do the manual pagination in ASP.NET with code behind style. There is I put the code that produce list of page in a separate file (I named it ManualPagination.aspx.cs). The presentation page laid in ManualPagination.aspx which refers to our code behind file.

Let’s start with presentation page! It’s quite simple, this is the source code (ManualPagination.aspx):

    <%@ Page Language=”C#” CodeFile=”ManualPagination.aspx.cs” Inherits=”ManualPagination.CodeBehindClass” %><html>
    <title>Manual Pagination in ASP.NET</title>
    <style type=”text/css”>
    <form runat=”server”>
    <asp:Label id=”lblPresentation” runat=”server” />
    <p />
    <asp:Button id=”btnPrev” text=”Prev” onclick=”btnPrev_Click” runat=”server” />

    <asp:Label id=”lblPages” runat=”server” />

    <asp:Button id=”btnNext” text=”Next” onclick=”btnNext_Click” runat=”server” />


One of the important portion of our presentation page relies on the following code:

Read the rest of this entry »

Posted in ASP.NET, C#, Javascript | Tagged: , , , , , , | Leave a Comment »

Calling Client Script Events in ASP.NET Server Controls

Posted by triaslama on April 25, 2008

ASP.NET has its own controls (WebControls or HtmlControls) that rendered as elements in a page. ASP.NET server controls declared with ‘asp’ tag (<asp:[control_type] />) and contains runat=”server” attribute. ASP.NET server controls has its own attribute related to a specific control (such as onclick and text for click event and button text respectively).

For example: if we want a click event associated with a button of ASP.NET server control we use this script in our ASP.NET page:

<asp:Button id="btn" onclick="btn_Click" text="Test" runat="server" />

The click event received in onclick attribute and will be handled by btn_Click method. btn_Click is a method that will be called everytime a click occurs in this button control. We can write btn_Click method with any languages that supported by .NET framework.

But how if we want to call client script within ASP.NET server controls? Fortunately it can be accomplished to. Suppose that I have a button of ASP.NET server control but I want a click event of this button handled by Javascript function (in client side) rather than any of .NET languages (in server side).

In this example I use two buttons of ASP.NET server controls. The first button will have click event handled using server script and click event of second button handled via client script. I embed the javascript code inline inside the page, but we can pull it out and place it in separate *.js file then this file is referenced inside our ASP.NET page (expage.aspx):

Read the rest of this entry »

Posted in .NET, ASP.NET, Javascript | Tagged: , , , , , , | 20 Comments »

DOM & HTML Revisited

Posted by triaslama on April 18, 2008

What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn’t suck!
I don’t know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let’s check it out!

Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too!

This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page:
Initial condition, first part and second part separated by horizontal line.

Read the rest of this entry »

Posted in DOM, HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

Retrieving Query String Values in ASP.NET and Javascript

Posted by triaslama on April 12, 2008

In World Wide Web, a query string is a part of a URL that contains data to be passed to web applications (
The query string is composed of a series of field – value pair. Below is the pattern of query string:

An URL that contains query string can be depicted as follow:
The URL and query string separated by a question mark (?). Query string consist of two parts (field and value), and each of pair separated by ampersand (&). So the example above consists of two query strings which are name and type with value of each field ‘alma’ and ‘user’ respectively.

We can retrieve the query string values programmatically and used that values. Now we will learn how to get the query string values in ASP.NET and Javascript.

Read the rest of this entry »

Posted in ASP.NET, Javascript | Tagged: , , , , | 39 Comments »

Dynamic DropDownList, Just Fill It With Array

Posted by triaslama on April 1, 2008

How to change the content of dropdownlist (combo box) dynamically? want the value of a dropdownlist changes when we change the selected item of another dropdownlist? Is there exist a simple solution for this? Get ready, because the answer is yes!

What we need to create a dynamic dropdownlist in client side is just a little knowledge of HTML and Javascript, two dropdownlist (combo box) element, and an array variable, no more! Well, because I want this will become a very simple solution eventhough the more complex and better solutions exists somewhere out there.

I will show you the HTML code, this code consist of two dropdownlist / combo box (two <select> element) with the second <select> element disabled and will be enabled if we choose something from the first <select> element. Here the HTML code (dnmddl.htm):

<title>Dynamic DropDownList, A Simple Solution</title>
<script lang=”javascript” type=”text/javascript” src=”dynamicddl.js”>
<select id=”slc_source” onchange=”srcChange(this.value)”>
<option value=””>—-</option>
<option value=”Asian”>Asian</option>
<option value=”Europe”>Europe</option>
<option value=”African”>African</option>
</select><select id=”slc_target” disabled=”true”>

Don’t be afraid, eventhough the Javascript code look a bit large but what is done by this code only initialize the array with specified value and fill it to the second dropdownlist element (slc_target). This is the Javascript code (dynamicddl.js):

var arr;
var option;

function srcChange(val)
var slc_target = document.getElementById("slc_target");

switch (val)
case "Asian":
arr = new Array("Indonesia","India","Malaysia","Japan","Pakistan","UEA");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;

case "African":
arr = new Array("Egypt","Marocco","Senegal","Tunisia","Sudan");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;

case "Europe":
arr = new Array("England","France","Germany","Italy","Spain","Swiss");
slc_target.disabled = false;
for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;

slc_target.disabled = false;
slc_target.options.length = 0;

HTML code without the Javascript code will only become a static page, so HTML file above (dnmddl.htm) refers to a Javascript file named dynamicddl.js to make a dynamic dropdownlist.Dnmddl.htm has two <select> element contained within it (slc_source & slc_target). One thing that you must aware in slc_source is onchange attribute. This attribute receives srcChange(param) function as an event handler. Change event will be executed in every selected value changes in slc_source, so srcChange(param) will be called in every changes of slc_source value.

What is done by srcChange is receives a parameter, evaluates that parameter, and fills slc_target according to that parameter. We create an option will be used to fill slc_target with the following sample of code:

for (var i=0;i<arr.length;i++) {
option = new Option(arr[i],arr[i]);
slc_target.options[i] = option;

First parameter of Option object will be the text of dropdownlist and second parameter will be the value. The rest of code should works as is, and if we run our code and select a value from first dropdownlist we should get the same result as this screenshots:

Dynamic DropDownList

Try to change the value of first dropdownlist (slc_source) and you will get the second dropdownlist (slc_target) populated with different values. See you…

Posted in Javascript | Tagged: , , , , | 22 Comments »

CRUD Operations Using DOM

Posted by triaslama on March 21, 2008

CRUD (Create, Read, Update, Delete) is common operations in data storage, but now I will try to use DOM (Document Object Model) doing CRUD operations toward document content (and I think that is one of DOM objective). DOM can be used for doing CRUD operations easily and effectively. OK that’s enough for the buzz words let’s make the job done!

1. Create an Element
To create an element use document.createElement(<elmName>) method. This method receives one parameter that is the name of element that will be created. DOM method document.createTextNode(<text>) is similar to document.createElement but will create a text node instead of an element. The parameter received by document.createTextNode is text that will be created. The other DOM method that important in creating an element is appendChild(<elem>), this method will append the element specified as parameter to an element. Below is an example of add a <li> element to a <ul> element:

var ul = document.getElementsByTagName("ul")[0];
var li = document.createElement("li");
var text = document.createTextNode("'li' element.");


2. Read Text of an Element
Please pay a special attention that a text in DOM is considered as a node, so we have to navigate to its text node first before we retrieve / read the node value. So, if ‘elm’ is a variable that point to a <li> element the following code:
var text = elm.firstChild.nodeValue;

will retrieve the text inside a <li> element and store the value to a variable named ‘text’.

3. Update an Element Content
Update operation really similar to read operation, except updating an element means we change the node value with the new one. If ‘elm’ point to a <li> element, the following code:

var newValue = "New text node value";
elm.firstChild.nodeValue = newValue;

will change the node value inside <li> element with the content of ‘newValue’ variable.

4. Delete an Element
Here, delete an element has two meanings. First delete the text node inside an element, second delete the element itself. Deleting an element can be accomplished using removeChild(<elm>) method. This method receives one parameter, that is child element that will be deleted.
This line of code:
will remove ‘elm’ element.

I have write a simple code that demonstrate how to create, read, update, and delete (CRUD) the document content using DOM. I use the Javascript events and blend it with DOM to accomplished CRUD operations, so basic understanding of Javascript events will really helpful.

The code consists of two portions, first portion is html code (crud.htm):

<title>CRUD Operations: Complete</title>
<script lang=”javascript” type=”text/javascript” src=”crud.js” >
Want to know why DOM is awesome??
One of the possible answer is: with DOM we can create, read (retrieve), update, and delete document content quickly and easily.
<b>Try the following example!</b>
1. Press ‘Add’ button to add a new <li> element.<br>
2. Move the mouse cursor over a <li> element below.<br>
3. Click desired <li> element to read the node value.<br>
4. Hold down ‘Shift’ key and click desired <li> element to update the node value.<br>
5. Hold down ‘Ctrl’ key and click desired <li> element to delete the <li> element.<br>
<form id=”frm” name=”frm” style=”background-color:yellow; border:solid 2px; border-color:goldenrod;”>
<ul><b> And here is the list of <li> element:</b>
<li>First li element.</li>
<li>Second li element.</li>
<li>Third li element.</li>
<li>Fourth li element.</li>
<li>Fifth li element.</li>
<input type=”button” id=”btnCreate” onclick=”addLiElement()” value=”Add New <li> Element” />

The other one is Javascript code (crud.js, this code is referred by html code), and this is the Javascript code:

window.onload = handleCRUD;

function addLiElement()
// ask input text for new <li> element
var txt = window.prompt("Text: ");
var text = document.createTextNode(txt);
// create <li> element
var elm = document.createElement("li");
/* retrieve the first <ul> element (and the only one). */
var ul = document.getElementsByTagName("ul")[0]; elm.appendChild(text);


function handleCRUD()
var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{ = "gainsboro";

lis[i].onmouseout = function()
{ = "yellow";

/* ‘click’ event handles read, update, or delete operation */

lis[i].onclick = function(e)
// IE handles event through window.event property
e = e||window.event;
/* again IE handles target (source) element as srcElement */
var elm =||e.srcElement;
if (e.ctrlKey) {
/* because 'ctrl' key is pressed, it will be delete operation */
var txtNode = elm.firstChild;
// first, delete the text node
// second, delete the <li> element
if (e.shiftKey) {
/* because 'shift' key is pressed, it will be update operation */
var newValue = window.prompt("Enter new value: ");
elm.firstChild.nodeValue = newValue;
else {
/* neither 'ctrl' nor 'shift' key is pressed, it will be read
operation */
/* now, here we retrieve the content (text) of an element */
var content = elm.firstChild.nodeValue;


The javascript code started with window.onload that executed after the document is loaded, and passed handleCRUD() function to it. Inside handleCRUD we install mouseover, mouseout, and click events foreach <li> element exist in document.

What is done by each event can be explained as follow:

  • ‘Add’ button onclick: adds an li element to the document.
  • onmouseover: changes the background color of a <li> element to ‘gainsboro’ when mouse cursor enters it.
  • onmouseout: restores the background color of a <li> element to ‘yellow’ when mouse cursor leaves it.
  • onclick, this event has three meanings:
    1. when we click an <li> element along with ‘Ctrl’ key pressed, then the specified <li> element will be deleted.
    2. when we click an <li> element along with ‘Shift’ key pressed, then the node value of specified <li> element will be updated.
    3. when we click an <li> element and neither ‘Ctrl’ key nor ‘Shift’ key is pressed then we simply read the specified <li> element.
  • onclick event handler receive one parameter that is event object (‘e’ in this code), but event object in Internet Explorer (IE) available through window.event property. So we need a regular checking ‘e’ will be still ‘e’ or if the browser is IE e will be filled with window.event.

    e = e||window.event;

    The target (non IE browser) / srcElement (IE) are properties of event object contains a reference to the element that fired to the event. We get target / source element with the following code:

    var elm =||e.srcElement;

    This is screenshot output produced by crud.htm & crud.js:

    CRUD using DOM

    To make the same output as screenshot above puts crud.htm & crud.js in the same directory, type the location in address bar of your browser and you should see the same result.

    Thanks for your attentions, see you next time…

    Posted in DOM, Javascript | Tagged: , , , , , , , , | Leave a Comment »