Use Ajax with Classic ASP to update table rows inline seamlessly without page refresh
 

Classic ASP Active Server Pages Examples, code, tutorials, scriptsCODE PAGE: Ajax with Classic ASP for EASY SIMPLE Inline Datagrid Database Table Updates Without Page Refresh

DEMO

This is the code for default.asp

Rated:
By Aspin.com Users
What do you think?


<head>

<!--http://classicaspreference.com/aspexamples/-->

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(key){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
var curage = key;
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('formarea'+curage);

ajaxDisplay.innerHTML = ajaxRequest.responseText;


}
}

var age = document.getElementById('age'+curage).value;
var wpm = document.getElementById('wpm'+curage).value;
var sex = document.getElementById('sex'+curage).value;
var name = document.getElementById('name'+curage).value;
var queryString = "?key=" + key + "&age=" + age + "&name=" + name + "&wpm=" + wpm + "&sex=" + sex;
//alert(queryString);
ajaxRequest.open("GET", "ajax_example.asp" + queryString, true);
ajaxRequest.send(null);
}


//-->
</script>

</head>

<table border="0" width="100%" bgcolor="#FFFFFF" style="padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px">
<tr><td><i><b>Blue toons, their ages, their typing skilz, and their names</b></i></td></tr><tr>

<% xDb_Conn_Str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath("DB/ajax_example.mdb")

' Setting variables
Dim rs, data_source
data_source = myDSN
set conn = Server.CreateObject("ADODB.Connection")
conn.Open xDb_Conn_Str
'now the database connection to display records


Set cnnSimple = Server.CreateObject("ADODB.Connection")

' This line is for Access database. Edit for your database path:
'cnnSimple.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath("DB/ajax_example.mdb")


Set rstSimple = conn.Execute("SELECT * FROM ajax_example")


' Display a table of the data in the recordset.
%>

<%
Do While Not rstSimple.EOF
%>
<tr>
<td>

<a href="javascript:ajaxpage('form.asp?id=<%=rstSimple("id")%>', 'formarea<%= rstSimple.Fields("id").Value %>');">Edit</a>
<div id="formarea<%= rstSimple.Fields("id").Value %>">
ID#: <%= rstSimple.Fields("id").Value %><br>
Sex: <%= rstSimple.Fields("ae_sex").Value %><br>
Age: <%= rstSimple.Fields("ae_age").Value %><br>
wpm: <%= rstSimple.Fields("ae_wpm").Value %><br>
Name: <%= rstSimple.Fields("ae_name").Value %><br>
</div>
<hr>


</td>
</tr>
<%
rstSimple.MoveNext
Loop
%>

<%
' Close our recordset and connection and dispose of the objects
rstSimple.Close
Set rstSimple = Nothing


conn.Close
Set conn = Nothing

%>

</table>

 

This is the code for form.asp

<% strID = request.querystring("id")%>
<% strID = cint(strID)%>


<%
'now the database connection to display records
Dim cnnSimple ' ADO connection
Dim rstSimple ' ADO recordset
Dim strDBPath ' path to our Access database (*.mdb) file

Set cnnSimple = Server.CreateObject("ADODB.Connection")

' This line is for Access database. Edit for your database path:
cnnSimple.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath("DB/ajax_example.mdb")


Set rstSimple = cnnSimple.Execute("SELECT * FROM ajax_example WHERE id="&strID&"")


' Display a table of the data in the recordset.
%>

<%
Do While Not rstSimple.EOF
%>



<form name='myForm' method="GET">Edit Record #<%= strID%><br><input type='hidden' id='key' value='<%= strID%>'>
Sex:
<select id='sex<%= strID %>'>
<option value='M'<% if rstSimple("ae_sex")="M" then%> SELECTED<%end if%>>m</option>
<option value='F'<% if rstSimple("ae_sex")="F" then%> SELECTED<%end if%>>f</option>
</select>

Age: <input type='text' id='age<%= strID%>' value="<%= rstSimple.Fields("ae_age").Value %>"> <br />
WPM: <input type='text' id='wpm<%= strID %>' value="<%= rstSimple.Fields("ae_wpm").Value %>">
Name: <input type='text' id='name<%= strID %>' value="<%= rstSimple.Fields("ae_name").Value %>">



<input type='button' onclick='ajaxFunction(<%= strID %>)' value='Query MySQL' />
</form>
<a href="javascript:ajaxpage('close.asp?id=<%= strID%>', 'formarea<%= strID %>');">X Close</a>

<%
rstSimple.MoveNext
Loop
%><%
' Close our recordset and connection and dispose of the objects
rstSimple.Close
Set rstSimple = Nothing
cnnSimple.Close
Set cnnSimple = Nothing
%>

This is the code for close.asp

<% strID = request.querystring("id")%>
<% strID = cint(strID)%>

<%'now the database connection to display records
Dim cnnSimple ' ADO connection
Dim rstSimple ' ADO recordset
Dim strDBPath ' path to our Access database (*.mdb) file

Set cnnSimple = Server.CreateObject("ADODB.Connection")

' This line is for Access database. Edit for your database path:
cnnSimple.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath("DB/ajax_example.mdb")


Set rstSimple = cnnSimple.Execute("SELECT * FROM ajax_example WHERE id="& strID&"")


' Display a table of the data in the recordset.
%>

<%
Do While Not rstSimple.EOF
%>
ID#: <%= rstSimple.Fields("id").Value %><br>
Sex: <%= rstSimple.Fields("ae_sex").Value %><br>
Age: <%= rstSimple.Fields("ae_age").Value %><br>
wpm: <%= rstSimple.Fields("ae_wpm").Value %><br>
Name: <%= rstSimple.Fields("ae_name").Value %><br>

<%
rstSimple.MoveNext
Loop
%><%
' Close our recordset and connection and dispose of the objects
rstSimple.Close
Set rstSimple = Nothing


cnnSimple.Close
Set cnnSimple = Nothing

%>

This is the code for ajax_example.asp / (NOTE: you must change the referer check on line 9)

<%
'This script from classicaspreference.com/aspexamples/

'First of all, let's have a referrer check to help prevent malicious use from external sites.
referer=request.servervariables("http_referer")
If NOT referer ="http://classicaspreference.com/aspexamples/inlineajaxedit/default.asp" then 'edit for your file url
response.write "oscar sierra" 'Gives instructional error message
response.end 'stops processing
end if

%>
<%
'response.write request.querystring 'this is good for debugging
strKey = request.querystring("key")
%>

<%
'the following retrieve the form input variables from the querystring

'here we remove html from the text input
strTemp = request.querystring("name")
Dim objRegExp
Set objRegExp = CreateObject("vbscript.regexp") ' now works.
objRegExp.IgnoreCase = True
objRegExp.Global = True
objRegExp.Pattern = "<(.|\n)+?>"
strOutput = objRegExp.Replace(strTemp, "")
strOutput = Replace(strOutput, "<", "&lt;")
strOutput = Replace(strOutput, ">", "&gt;")
stripHTML = strOutput 'Return the value of strOutput
Set objRegExp = Nothing
strName = stripHTML

strAge = request.querystring("age")
strSex= request.querystring("sex")
strWpm = request.querystring("wpm")

%>
<%

' Next, the script updates the form inputs retrieved from the querystring into the database table:

xDb_Conn_Str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath("DB/ajax_example.mdb")

' Setting variables
Dim rs, data_source
data_source = myDSN
set conn = Server.CreateObject("ADODB.Connection")
conn.Open xDb_Conn_Str


' Creating Recordset Object and opening the database
Set rs = Server.CreateObject("ADODB.Recordset")
' Lets open table
rs.Open "ajax_example", conn, 1, 2, adCmdTableDirect

' No rs.AddNew command needed here since we are only
' updating the records
strsql = "SELECT * FROM [ajax_example] WHERE [id]=" & cint(strKey)
'response.write strsql
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open strsql, conn,3,3

rs("ae_name")=strName
rs("ae_sex")=strSex
'the next 5 lines test for numeric input and avoid errors if string is submitted
if isNumeric(strWpm) then
rs("ae_wpm")=strWpm
else
rs("ae_wpm")=rs("ae_wpm")
end if

'the next 5 lines test for numeric input and avoid errors if string is submitted
if isNumeric(strAge) then
rs("ae_age")=strAge
else
rs("ae_age")=rs("ae_age")
end if

' Now updating records
rs.Update

' Done. Now Close the Connection
rs.Close
Set rs = Nothing
if err<>0 then
Response.Write("No update permissions!") 'ae_name field is primary key so new record not inserted if name pre-exists in table
else
Response.Write("<h3> Record " & strKey &" updated</h3>")
end if




'now the database connection to display records
'Dim cnnSimple ' ADO connection
'Dim rstSimple ' ADO recordset
'Dim strDBPath ' path to our Access database (*.mdb) file

Set cnnSimple = Server.CreateObject("ADODB.Connection")

' This line is for Access database. Edit for your database path:
'cnnSimple.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&server.mappath("DB/ajax_example.mdb")


Set rstSimple = conn.Execute("SELECT * FROM ajax_example WHERE id="&strKey&"")


' Display a table of the data in the recordset.
%>

<%
Do While Not rstSimple.EOF
%>
ID#: <%= rstSimple.Fields("id").Value %><br>
Sex: <%= rstSimple.Fields("ae_sex").Value %><br>
Age: <%= rstSimple.Fields("ae_age").Value %><br>
wpm: <%= rstSimple.Fields("ae_wpm").Value %><br>
Name: <%= rstSimple.Fields("ae_name").Value %><br>

<%
rstSimple.MoveNext
Loop
%><%
' Close our recordset and connection and dispose of the objects
rstSimple.Close
Set rstSimple = Nothing


conn.Close
Set conn = Nothing

%>

Download Database