Real Time Data Grid Part 2/2

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);

objXMLHTTP.Send();

return objXMLHTTP.responseText;

}
blog comments powered by Disqus