Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by shaffi on Feb 02, 2009 06:30
open dhtmlx forum
Pagination appearing as many number of times as many times i'm loading xml file

here i'm loading a xml file which is updated from the database each time when add,edit and delete operation is performed.everything is coming properly but the paging is appearing more number of times.here is the code."doInitGrid() is method of grid creation i'm using please give some suggestions ......


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="dhtml/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="dhtml/dhtmlxtoolbar.css">

<script src="dhtml/dhtmlxcommon.js"></script>
<script src="dhtml/dhtmlxgrid.js"></script>
<script src="dhtml/dhtmlxgridcell.js"></script>
<script src="dhtml/dhtmlxprotobar.js"></script>
<script src="dhtml/dhtmlxtoolbar.js"></script>
<script src="dhtml/dhtmlxgrid_pgn.js"></script>
<style type="text/css">

.mouseOut {
background: #7A8AFF;
color: #FFFAFA;
}

.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript">
var isIE;
var req;
var names;
var target;


function getElementY(element){
    var targetTop = 0;
    if (element.offsetParent) {
        while (element.offsetParent) {
            targetTop += element.offsetTop;
element = element.offsetParent;
        }
    } else if (element.y) {
        targetTop += element.y;
}
    return targetTop;
}

function init() {
target = document.getElementById("complete-field");
var menu = document.getElementById("auto-row");
var autorow = document.getElementById("menu-popup");
autorow.style.top = getElementY(menu) + "px";

}

function initRequest(url) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function doCompletion() {
var url = "autocomplete?action=complete&anothername=shaffi&id="+ escape(target.value);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);
}

function doCompletion1(rowid,newvalue,cInd) {
    alert("rowid doCompletion1 ::: "+rowid+" value :::"+newvalue+" column idex "+cInd);
var url = "autocomplete?action=complete&index="+cInd+"&rowid="+rowid+"&value="+newvalue+"&id="+ escape(target.value);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("POST", url, true);
req.send(null);
}

function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
parseMessages();
} else if (req.status == 204){
// alert("clearing table");
clearTable();
}
}
}

function parseMessages() {
if (!names) names = document.getElementById("names");
clearTable();
    var employees = req.responseXML.getElementsByTagName("rows")[0];
    alert("parse");
     doInitGrid();
for (loop = 0; loop < employees.childNodes.length; loop++) {
     var employee = employees.childNodes[loop];
var firstName = employee.getElementsByTagName("cell")[0];
var lastName = employee.getElementsByTagName("cell")[0];
var employeeId = employee.getElementsByTagName("row")[0];
appendEmployee(firstName.childNodes[0].nodeValue,lastName.childNodes[0].nodeValue, employeeId.childNodes[0].nodeValue);
}
}

function clearTable() {
if (names) {
for (loop = names.childNodes.length -1; loop >= 0 ; loop--) {
names.removeChild(names.childNodes[loop]);
}
}
}

function appendEmployee(firstName,lastName,employeeId) {
var firstNameCell;
var lastNameCell;
if (isIE) {
row = names.insertRow(names.rows.length);
nameCell = row.insertCell(0);
} else {
row = document.createElement("tr");
nameCell = document.createElement("td");
row.appendChild(nameCell);
names.appendChild(row);
}
row.setAttribute("border", "0");
nameCell.setAttribute("onmouseout", "this.className='mouseOver';");
nameCell.setAttribute("onmouseover", "this.className='mouseOut';");
nameCell.setAttribute("bgcolor", "#FFFAFA");
nameCell.setAttribute("border", "0");
var linkElement = document.createElement("a");
linkElement.setAttribute("style", "text-decoration: none ");
linkElement.setAttribute("href", "autocomplete?action=lookup&id=" + employeeId);
var nameFontElement = document.createElement("font");
nameFontElement.setAttribute("size", "+1");
nameFontElement.setAttribute("color", "black");
nameFontElement.appendChild(document.createTextNode(firstName + " " + lastName));
linkElement.appendChild(nameFontElement);
nameCell.appendChild(linkElement);
}


    var mygrid;
    function doOnCellEdit(stage,rowId,cellInd,newvalue){
        if(stage==0){
            alert("0");
            return true;
        }else if(stage==1){
            alert("1");
        }else if(stage==2){
            alert("value of the :::::::::::: "+newvalue);
        }
    }
function dooo()
{



}
function doInitGrid()
{
    alert("init");
    
    mygrid = new dhtmlXGridObject('mygrid_container');

    mygrid.setImagePath("imgs/");

    mygrid.setHeader("Model,Qty,Price");

    mygrid.setInitWidths("*,150,150");

    mygrid.setColAlign("left,right,right");


    mygrid.setSkin("light");
    mygrid.attachEvent("onEditCell",mygrid.attachEvent("onEditCell",function(stage,rowId,cInd,newvalue){
if(cInd==1 && stage==1){
mygrid.editor.obj.onkeypress = function(e){
if(this.value.length>=20){
return false;
}
}
}
    if(stage==2){
alert("row id "+rowId+"new value"+newvalue);
    //doCompletion1(rowId,newvalue,cInd)
        }
    
return true;
}));
    mygrid.attachEvent("onRowSelect",doOnRowSelected);


mygrid.setColSorting("str,int,int");
mygrid.setHeader("img:[imgs/book.gif]Model,img:[imgs/books.gif]QTY,img:[imgs/book.gif]Price");
    mygrid.enablePaging(true,5,3,"pagingArea",true,"recinfoArea");
    mygrid.init();

mygrid.loadXML("/grid.xml");
    elemetn=document.getElementById("mygrid_container");
    alert("ID "+elemetn.innerHTML);
}

function addRow(){
var newId = (new Date()).valueOf()
mygrid.addRow(newId,"",mygrid.getRowsNum())
mygrid.selectRow(mygrid.getRowIndex(newId),false,false,true);
}
function removeRow(){
var selId = mygrid.getSelectedId()
mygrid.deleteRow(selId);
}

function doOnRowSelected(rowID,celInd){
// alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
}

function savemethod()
{
var id=mygrid.getSelectedId();
var v1=mygrid.cells2(mygrid.getRowIndex(mygrid.getSelectedId()),0).getValue();
var v2=mygrid.cells2(mygrid.getRowIndex(mygrid.getSelectedId()),1).getValue();
var v3=mygrid.cells2(mygrid.getRowIndex(mygrid.getSelectedId()),2).getValue();
savevalues(id,v1,v2,v3);


}


function savevalues(id,v1,v2,v3) {
    alert("rowid doCompletion1 ::: "+id+" cell1 :::"+v1+"cell2 "+v2);
var url = "autocomplete?action=save&rowid="+id+"&c1="+v1+"&c2="+v2+"&c3="+v3+"&id="+ escape(target.value);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("POST", url, true);
req.send(null);
    doInitGrid();
    
}
function deleterow()
{
var id=mygrid.getSelectedId();
mygrid.deleteRow(mygrid.getSelectedId());
var url = "autocomplete?action=del&rowid="+id;
initRequest(url);
req.onreadystatechange = processRequest;
req.open("POST", url, true);
req.send(null);
doInitGrid();

}

</script>
<title>Auto-Completion using Asynchronous JavaScript and XML (AJAX)</title>
</head>
<body onload="init()">

<form name="autofillform" action="autocomplete" method="get">
<input type="hidden" name="action" value="lookupbyname"/>
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td><b>Employee Name:</b></td>
<td>
<input type="text"
size="20"
id="complete-field"
                name="id"
onkeyup="doCompletion();">
</td>
<td align="left">
<input id="submit_btn" type="Submit" value="Lookup Employee">
</td>
</tr>
<tr><td id="auto-row" colspan="2"> <td/></tr>
</table>
</form>
<div style="position: absolute; top:170px;left:140px" id="menu-popup">
<table id="names"
bgcolor="#FFFAFA"
border="1"
bordercolor="black"
cellspacing="0"
cellpadding="0"/>
</div>
<a href="javascript:void(mygrid.addRow('x1','text 1,text 2',0))">add</a>  <a href="javascript:void(mygrid.addRow('x1','text 1,text 2',0))">add</a>

<div id="mygrid_container" style="width:600px;height:150px;"></div>
<div id="pagingArea" style="width:100%;"></div>
<div id="recinfoArea" style="width:100%;"></div>
<input type="button" value="save" onclick="savemethod()"/><input type="button" value="Delete" onclick="deleterow()"/>

</body>
</html>
Answer posted by Support on Feb 02, 2009 08:02

Instead of full grid reinitialization ( through calling doInitGrid after each operation ) you can just call

mygrid.clearAll();
mygrid.loadXML("/grid.xml"); 

In such case you will reload data only , without changing any other aspects of grid. 

If you still prefer to use existing code you can fix the issue with paging code by adding one more line which will clear paging area before usage. 

document.getElementById("pagingArea").innerHTML="";
mygrid.enablePaging(true,5,3,"pagingArea",true,"recinfoArea");