Home arrow ASP arrow Page 2 - Real Time Data Grid Part 2/2

Real Time Data Grid Part 2/2

In this article Annette wraps up the details of the real time data grid that she started to describe in part one of this two-part article. She looks at the JavaScript code that contacts our database server and allows us to update data in a database without actually refreshing the page.

Author Info:
By: Annette Tennison
Rating: 5 stars5 stars5 stars5 stars5 stars / 21
February 08, 2002
  1. · Real Time Data Grid Part 2/2
  2. · The JavaScript code
  3. · The JavaScript code (contd.)
  4. · The doDel JavaScript function
  5. · Using our DynamicGrid class
  6. · Conclusion

print this article

Real Time Data Grid Part 2/2 - The JavaScript code
(Page 2 of 6 )

The code that handles the updating and deleting of records "behind the scenes" is written in JavaScript and is output to the browser at the beginning of the DisplayGrid routine. Let's take a look at that code now.

When the update button next to each field is clicked, the doUpdate JavaScript function is called. Its signature looks like this:

function doUpdate(recordId, fieldId)

It accepts the ID of the record to update, as well as the ID of the field to update. If you're wondering where the heck we get these values from when the update button is clicked, then take a look at the code that's uses to actually output the text box and update button to the browser:

<input id="grid_<%=intRecordCounter%>_<%=intFieldCounter%>" type="text" name="<%=objField.Name%>" value="<%=objField.Value%>" style="width:75%">

<input type="button" value="Update" onClick="doUpdate(<%=intRecordCounter%>, <%=intFieldCounter%>)">

The intRecordCounter variable is a counter that's incremented when we call the MoveNext method of the recordset. The intFieldCounter variable is updated as we display each field in each record of the result set returned. The actual values being passed to the doUpdate JavaScript function mean nothing unless we can use them to get both the name and value of the field that we want to change:

strFieldName = eval("grid_"+recordId+"_"+fieldId+".name");

strFieldValue = eval("grid_"+recordId+"_"+fieldId+".value");

strPrimaryFieldName = eval("grid_"+recordId+"_0.name");

strPrimaryFieldValue = eval("grid_"+recordId+"_0.value");

We use the eval JavaScript function to get the name and value of the field that we are updating. The eval function takes one parameter that is a JavaScript command. It evaluates that command and returns the result. In the code snippet above, we use the eval function to get the name and value of the field we're updating. We also use it to get the name and value of the first field in that particular record.

strCriteria = strFieldName + " = '" + strFieldValue + "'";

On the line above, we are using the field name and its new value to build a string variable. This variable will be used in the SQL query we're about to build:

strQuery = "UPDATE <%=m_TableName%> SET "+strCriteria+" WHERE "+strPrimaryFieldName+" = '"+ReplaceAllQuotes(strPrimaryFieldValue)+"'";

In the line above, we build an SQL query that will be passed to our server using XMLHTTP. It is an update query, because we're updating a record. Notice how we can use ASP code even within a JavaScript function to pass in the name of the table we are working with? Here's how the strQuery variable looked when I chose to update the fname field of the employee tables in the pubs database:

UPDATE employee SET fname='Michael' WHERE emp_id='PMA42628M'

See how the where clause needs a unique field to differentiate between the records that it's updating? There's one catch to using our DynamicGrid class: the first field of the table you're working with MUST be a uniquely identified primary key. This isn't really a problem however, because most tables are already setup this way.

blnSuccess = SendRemoteRequest(strQuery);

Next, we call the SendRemoteRequest JavaScript function, which uses XMLHTTP to send our SQL query to the server. Let's look at the SendRemoteRequest function now:

function SendRemoteRequest(query)


var objXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");

var strPage = new String();

strPage = "dynamic.datagrid.asp?query="+query;

objXMLHTTP.Open("GET", strPage, 0);


return objXMLHTTP.responseText;


blog comments powered by Disqus

- Central Scoreboard with Flash and ASP
- Calorie Counter Using WAP and ASP
- Creating PGP-Encrypted E-Mails Using ASP
- Be My Guest in ASP
- Session Replacement in ASP
- Securing ASP Data Access Credentials Using t...
- The Not So Ordinary Address Book
- Adding and Displaying Data Easily via ASP an...
- Sending Email From a Form in ASP
- Adding Member Services in ASP
- Removing Unconfirmed Members
- Trapping HTTP 500.100 - Internal Server Error
- So Many Rows, So Little Time! - Case Study
- XDO: An XML Engine Class for Classic ASP
- Credit Card Fraud Prevention Using ASP and C...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials