2
greetings people
I am new to Ajax and javascript, yet i have little time to learn it all. Question is:
i am using javascript to create my DOM Table and AJAX that returns a DataSet to my Javascript to fill information in the table. Code looks like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language = javascript>
function DoWork()
{
var val = "1";
_Default.GridData(val,Result);
}
function Result(response)
{
var tblHead = tbl.createTHead();
var headrow = tbl.insertRow();
var headcell = headrow.insertCell(0);
var selchk = document.createElement("input");
selchk.setAttribute("type","checkbox");
selchk.setAttribute("id","slctAll");
selchk.setAttribute("onclick","javascript:SelectAl lCheckboxes(this);");
headcell.innerHTML = "Select All";
headcell.appendChild(selchk);
var headcell2 = headrow.insertCell(1);
headcell2.innerHTML = "Company ID";
var headcell3 = headrow.insertCell(2);
headcell3.innerHTML = "Company Name";
var headcell4 = headrow.insertCell(3);
headcell4.innerHTML = "Type Of Company";
tblHead.appendChild(headrow);
// Continue from here
var rows = response.value.Tables[0].Rows.length;
for (var i = 0; i < rows - 1; i++)
{
var row = tbl.insertRow();
var cell0 = row.insertCell(0);
var chk = document.createElement("input");
chk.setAttribute("type","checkbox");
chk.setAttribute("id", "chk" + i);
cell0.appendChild(chk);
var cell = row.insertCell(1);
var lnk = document.createElement("a");
lnk.setAttribute("href","Companies.aspx?" + response.value.Tables[0].Rows[i].CompanyID);
lnk.setAttribute("target","_blank");
lnk.innerHTML = response.value.Tables[0].Rows[i].CompanyID;
cell.appendChild(lnk);
var cell2 = row.insertCell(2);
cell2.innerHTML = response.value.Tables[0].Rows[i].Name;
var cell3 = row.insertCell(3);
cell3.innerHTML = response.value.Tables[0].Rows[i].TypeOfCompany;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn" onclick="javascript:DoWork();"/>
<table id="tbl">
</table>
</div>
</form>
</body>
</html>
............
When i click the button the table shows perfectly with all the information. The problem is i cannot see the update in the HTML Source i.e. the DOM table is empty. Therefore how can i manipulate certain rows or cells in the table that the user checked. or how can i check all the rows if the user wanted to select all rows. i guess the elements of type checkbox dont exist. An example of the selectallcheckboxes function is like this:
function SelectAllCheckboxes(spanChk){
var theBox = spanChk;
var elm = theBox.form.elements;
for (i=0;i<elm.length;i++)
{
if (elm[i].type == "checkbox" && elm[i].id != "filterChk" && elm[i].id != "slctAll")
{
if (elm[i].checked != theBox.checked)
{
elm[i].click();
}
}
}
}
Thanking u guys in advance
kind regards
