...

View Full Version : Ajax - Dynamically Update Table after Delete Record?



mattboy_slim
10-03-2008, 03:26 PM
My ajax requests work fine, and I am calling them onLoad in the body tag, however, if I click a button to delete a record from the list of items, I don't know how to update the list of records again without manually refreshing the page.

Any input or advice?

Here is a quick layout of the code:
http://www.regionalwarming.com/scrn_pageformat.gif

Thanks in advance,
Matt

mattboy_slim
10-06-2008, 08:12 PM
Okay, the weekend is over, and I'm back on task, but I still cannot get it to work. If I click the "Delete" button twice, or refresh the page, then it actually removes the item from the list.

Here is the code of 'default.asp'

<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="../Connections/conn_presenter.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="_js/ajax_control-delete.js"></script>
<script src="_js/ajax_query-presenters.js"></script>
<script src="_js/showhide.js"></script>
</head>

<body onload="GetPresenters();" style="background-image:url(_images/bg_full.png);background-repeat:repeat;min-height:420px;">

<div id="PresenterDetails" style="display:block;width:320px;padding-top:7px;" >

</div>
</body>
</html>


The code for 'ajax_control-delete.js' is:

// JavaScript Document
var xmlHttp

function removepresenter(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="_include/ajax_query-presenters.asp";
url=url+"?delete="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("PresenterDetails").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


The code for 'ajax_query-presenters.js' is:

// JavaScript Document
var xmlHttp

function GetPresenters()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="_include/ajax_query-presenters.asp";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("PresenterDetails").innerHTML=xmlHttp.responseText;
}
}


function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


The code for 'ajax_query-presenters.asp' is:

<%@LANGUAGE="VBSCRIPT"%>

<% response.expires=-1 %>
<!--#include file="../../Connections/conn_presenter.asp" -->

<%'====================================================%>
<%'= If querystring is 'delete', then do this section =%>
<%'====================================================%>

<% if request.querystring("delete") <> "" then %>
<%'=======================================%>
<%'= Delete the record from the database =%>
<%'=======================================%>
<%
Dim rs_presenterID
Dim rs_presenterID_cmd
Dim rs_presenterID_numRows

Set rs_presenterID_cmd = Server.CreateObject ("ADODB.Command")
rs_presenterID_cmd.ActiveConnection = MM_conn_presenter_STRING
rs_presenterID_cmd.CommandText = "DELETE * FROM tb_guestregistration WHERE f_guestID = " & Request.QueryString("delete") & ""
rs_presenterID_cmd.Prepared = true

Set rs_presenterID = rs_presenterID_cmd.Execute
rs_presenterID_numRows = 0
%>
<%
'rs_presenterID.Close()
Set rs_presenterID = Nothing
%>

<%'============================%>
<%'= Query for the DB records =%>
<%'============================%>
<%
Dim rs_presentersondelete
Dim rs_presentersondelete_cmd
Dim rs_presentersondelete_numRows

Set rs_presentersondelete_cmd = Server.CreateObject ("ADODB.Command")
rs_presentersondelete_cmd.ActiveConnection = MM_conn_presenter_STRING
rs_presentersondelete_cmd.CommandText = "SELECT * FROM tb_guestregistration ORDER BY f_guestname ASC"
rs_presentersondelete_cmd.Prepared = true
Set rs_presentersondelete = rs_presentersondelete_cmd.Execute
rs_presentersondelete_numRows = 0
%>

<%
Dim Repeat2__numRows
Dim Repeat2__index

Repeat2__numRows = -1
Repeat2__index = 0
rs_presentersondelete_numRows = rs_presentersondelete_numRows + Repeat2__numRows
%>
<%'==============================================%>
<%'= Display the actual information from the DB =%>
<%'==============================================%>
<%
While ((Repeat2__numRows <> 0) AND (NOT rs_presentersondelete.EOF))
%>

<div class="buttondivwide">
<div style="background-image:url(_images/bg_presenter-left.png);background-repeat:no-repeat;width:262px;height:60px;padding-top:15px;font-size:24px;color:white;float:left;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"><span style="padding-left:10px;"><%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%></span></div>
<a onclick="showhide('<%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%>'); showhide('<%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%> Up'); showhide('<%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%> Down'); return(false);" href="" style="text-decoration:none;color:#CCCCCC;"><img id="<%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%> Down" src="_images/bg_presenter-right-down.png" style="border:none;display:" alt="Options"/><img id="<%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%> Up" src="_images/bg_presenter-right-up.png" style="border:none;display:none" alt="Options"/></a>
</div>
<div id="<%=(rs_presentersondelete.Fields.Item("f_guestname").Value)%>" style="display:none;" class="buttondivwideunder">
<div style="padding-top:2px;">
<a onclick="showCustomer('PRES START')" href="" style="text-decoration:none;color:#CCCCCC;"><img style="border:none;" src="_images/button_activatepresenter.png" alt="Activate Presenter" /></a>
<a onclick="showCustomer('PRES STOP')" href="" style="text-decoration:none;color:#CCCCCC;"><img style="border:none;" src="_images/button_removepresenter.png" alt="Deactivate Presenter" /></a>
<a onclick="removepresenter('<%=(rs_presentersondelete.Fields.Item("f_guestID").Value)%>');" href="#" style="text-decoration:none;color:#CCCCCC;"><img style="border:none;" src="_images/button_presenterdelete.png" alt="Delete Presenter" /></a>
</div>
</div>
<%
Repeat2__index=Repeat2__index+1
Repeat2__numRows=Repeat2__numRows-1
rs_presentersondelete.MoveNext()
Wend
%>
<%
rs_presentersondelete.Close()
Set rs_presentersondelete = Nothing
%>

<% else %>

<%'========================================================%>
<%'= If querystring is not 'delete', then do this section =%>
<%'========================================================%>
<%'============================%>
<%'= Query for the DB records =%>
<%'============================%>
<%
Dim rs_presenters
Dim rs_presenters_cmd
Dim rs_presenters_numRows

Set rs_presenters_cmd = Server.CreateObject ("ADODB.Command")
rs_presenters_cmd.ActiveConnection = MM_conn_presenter_STRING
rs_presenters_cmd.CommandText = "SELECT * FROM tb_guestregistration ORDER BY f_guestname ASC"
rs_presenters_cmd.Prepared = true
Set rs_presenters = rs_presenters_cmd.Execute
rs_presenters_numRows = 0

%>

<%
Dim Repeat1__numRows
Dim Repeat1__index

Repeat1__numRows = -1
Repeat1__index = 0
rs_presenters_numRows = rs_presenters_numRows + Repeat1__numRows
%>
<%'==============================================%>
<%'= Display the actual information from the DB =%>
<%'==============================================%>
<%
While ((Repeat1__numRows <> 0) AND (NOT rs_presenters.EOF))
%>
<div class="buttondivwide">
<div style="background-image:url(_images/bg_presenter-left.png);background-repeat:no-repeat;width:262px;height:60px;padding-top:15px;font-size:24px;color:white;float:left;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"><span style="padding-left:10px;"><%=(rs_presenters.Fields.Item("f_guestname").Value)%></span></div>
<a onclick="showhide('<%=(rs_presenters.Fields.Item("f_guestname").Value)%>'); showhide('<%=(rs_presenters.Fields.Item("f_guestname").Value)%> Up'); showhide('<%=(rs_presenters.Fields.Item("f_guestname").Value)%> Down'); return(false);" href="" style="text-decoration:none;color:#CCCCCC;"><img id="<%=(rs_presenters.Fields.Item("f_guestname").Value)%> Down" src="_images/bg_presenter-right-down.png" style="border:none;display:" alt="Options"/><img id="<%=(rs_presenters.Fields.Item("f_guestname").Value)%> Up" src="_images/bg_presenter-right-up.png" style="border:none;display:none" alt="Options"/></a>
</div>
<div id="<%=(rs_presenters.Fields.Item("f_guestname").Value)%>" style="display:none;" class="buttondivwideunder">
<div style="padding-top:2px;">
<a onclick="showCustomer('PRES START')" href="" style="text-decoration:none;color:#CCCCCC;"><img style="border:none;" src="_images/button_activatepresenter.png" alt="Activate Presenter" /></a>
<a onclick="showCustomer('PRES STOP')" href="" style="text-decoration:none;color:#CCCCCC;"><img style="border:none;" src="_images/button_removepresenter.png" alt="Deactivate Presenter" /></a>
<a onclick="removepresenter('<%=(rs_presenters.Fields.Item("f_guestID").Value)%>');" href="#" style="text-decoration:none;color:#CCCCCC;"><img style="border:none;" src="_images/button_presenterdelete.png" alt="Delete Presenter" /></a>
</div>
</div>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
rs_presenters.MoveNext()
Wend
%>
<%
rs_presenters.Close()
Set rs_presenters = Nothing
%>
<% end if %>


Thanks for help,
Matt

hinch
10-10-2008, 03:04 PM
in the removepresenter() function have its success: method call your intial reload script again so on success of removepresenter() call GetPresenters() that will reload your table in theory seemlessley.

you'd be easier using an ajax framework such as prototype for it though rather than making the msxml requests all yourself.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum