Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    NW Iowa
    Posts
    185
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Ajax - Dynamically Update Table after Delete Record?

    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:


    Thanks in advance,
    Matt
    Last edited by mattboy_slim; 10-03-2008 at 03:32 PM. Reason: Make title more descriptive

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    NW Iowa
    Posts
    185
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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'
    Code:
    <%@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:
    Code:
    // 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:
    Code:
    // 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:
    Code:
    <%@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

  • #3
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts
    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.
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •