Category Archives: Java Script

All abou Java script

Pagination in Java Script(using prototype.js)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script src=”prototype.js” type=”text/javascript”></script>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
/*
Configurations for Paging

*/
var maxRecordShow=10;    // assgin from the config files
var totalRecordInDB=53; // get the record count from the backend, and assign here

var totalRecordCount=(totalRecordInDB/maxRecordShow);
var maxTotalPage=Math.ceil(totalRecordCount);

var currentPageSet=1;
var previousPageSet=0;

var nextPointer;
var prevPointer;

//–>
</SCRIPT>
</HEAD>

<BODY>
Page<div id=”pg” style=”display:inline”> 1</div> out of <span id=”total”></span> <br><br>
Records<br><div id=”rec” style=”display:inline”></div> <br><br>

<a href=”#?” id=”prev” onClick=”prevList()”>prev</a>&nbsp;&nbsp;   <a href=”#?” id=”next” onClick=”nextList()”>next</a>
<!– Data Table –>
<table id=”recTbl” name=”recTbl” cellspacing=”4″ cellpadding=”0″ border=”1″>
<tbody><tr>
<td>Title</td>
<td>Category</td>
<td>Type</td>
<td>Location</td>
</tr></TBODY>

</tbody>
</table>
<!– End Data Table –>

<a href=”#?” id=”prev” onClick=”prevList()”>prev</a>&nbsp;&nbsp;   <a href=”#?” id=”next” onClick=”nextList()”>next</a>
</BODY>

</HTML>

<SCRIPT LANGUAGE=”JavaScript”>

$(“total”).innerHTML=maxTotalPage;

function nextList(){
if(currentPageSet <maxTotalPage){
currentPageSet=currentPageSet+1;
nextPointer=maxRecordShow*currentPageSet;
prevPointer=nextPointer-(maxRecordShow-1);
previousPageSet=currentPageSet-1;
}
$(“pg”).innerHTML=currentPageSet;
$(“total”).innerHTML=maxTotalPage;
showNextPage(prevPointer,nextPointer);
}

function prevList(){
if(previousPageSet > 0 && previousPageSet<maxTotalPage){
previousPageSet=previousPageSet-1;
currentPageSet=previousPageSet+1;
nextPointer=maxRecordShow*currentPageSet;
prevPointer=nextPointer-(maxRecordShow-1);
}
showPrevPage(prevPointer,nextPointer);
$(“pg”).innerHTML=currentPageSet;
$(“total”).innerHTML=maxTotalPage;
}

function showNextPage(start,end){
//hide the current row set
if(start>maxRecordShow){
var st=start-1;
var en=st-(maxRecordShow-1);
for(i=st;i>=en;i–){
var id=”row”+i;
if($(id)){
$(id).style.display=”none”
}
}
}
//show the next row set
for(i=start;i<=end;i++){
var id=”row”+i;
if($(id)){
$(id).style.display=””
}
}
}

function showPrevPage(start,end){
//hide the current row set
for(i=start;i<=end+maxRecordShow;i++){
var id=”row”+i;
if($(id)){
$(id).style.display=”none”
}
}
//show the previous row set
for(i=end;i>=start;i–){
var id=”row”+i;
if($(id)){
$(id).style.display=””;
}
}
}

//@DummyMethod TO PUT RECORDS IN TABLE [in JSP just load the data from the server in the table dont use this method]
function putDummyRecords(){
var obj1=document.getElementById(“recTbl”);
var obj = obj1.getElementsByTagName(‘tbody’)[0];
for(i=1;i<=totalRecordInDB;i++){
var tr=document.createElement(“tr”);
var td1=document.createElement(“td”);
td1.appendChild(document.createTextNode(“Row”+i+””));
var td2=document.createElement(“td”);
td2.appendChild(document.createTextNode(” LLLLL “));
var td3=document.createElement(“td”);
td3.appendChild(document.createTextNode(” AAAAAA “));
var td4=document.createElement(“td”);
td4.appendChild(document.createTextNode(” ZZZZZZ “));
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.setAttribute(“id”,”row”+i);
if(i > maxRecordShow){
tr.style.display=”none”;
}
obj.appendChild(tr);
}
}

// put dummy records in table
putDummyRecords();

// manage records on load
showNextPage(1,maxRecordShow);

</SCRIPT>

PS: Include proptype libs(effect.js, scriptaculous.js, prototype.js)

Assign CSS Class using Java Script

To assign class name on the fly is very simple, Create a DIV and give it an ID.
<div id=”myId”> This is test</div>

at the page end, write the below code.

<script>

document.getElementById(“myId”).className=”ANY_CSS_CLASS”;

</script>

TIP: While accessing element with their ID’s always specify the script at the bottom of the page so that valid object could be found, otheriwse null will be returned by the script.

DOM in Java Script

Introduction to the Document Object Model

The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document). It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects. It also provides methods for adding and removing such objects, allowing you to create dynamic content.

The DOM also provides an interface for dealing with events, allowing you to capture and respond to user or browser actions. This feature is briefly covered here but the details are saved for another article. For this one, the discussion will be on the DOM representation of a document and the methods it provides to access those objects.

The Document Tree

When a browser loads a page, it creates a hierarchical representation of its contents which closely resembles its HTML structure. This results in a tree-like organization of nodes, each representing an element, an attribute, content or some other object.

Nodes

Each of these different object types will have their own unique methods and properties. But each also implements the Node interface. This is a common set of methods and properties related to the document tree structure. To understand this interface better, take a look a the diagram below which represents a simple node tree.

The Node object provides several properties to reflect this structure and allow you to traverse the tree. Here are some relationships using the example above:

  • NodeA.firstChild = NodeA1
  • NodeA.lastChild = NodeA3
  • NodeA.childNodes.length = 3
  • NodeA.childNodes[0] = NodeA1
  • NodeA.childNodes[1] = NodeA2
  • NodeA.childNodes[2] = NodeA3
  • NodeA1.parentNode = NodeA
  • NodeA1.nextSibling = NodeA2
  • NodeA3.prevSibling = NodeA2
  • NodeA3.nextSibling = null
  • NodeA.lastChild.firstChild = NodeA3a
  • NodeA3b.parentNode.parentNode = NodeA

The Node interface also provides methods for dynamically adding, updating and removing nodes such as:

  • insertBefore()
  • replaceChild()
  • removeChild()
  • appendChild()
  • cloneNode()

These will be covered later. But for now let’s look how the document tree reflects the contents of a web page.

[in more details http://www.brainjar.com/dhtml/intro/%5D