CODEWITHSUNDEEP
ajaxdatabasecoldfusion
Idowu Rose Awosanya
Idowu Rose Awosanya

Reputation: 21

How can i delete a row from the database with coldfusion and ajax

I'm having problems with deleting a database row in real time. I mean deleting a outputted row from the database without loading the page. I use coldfusion. And i know the best way is to use Ajax but i'm not good with ajax.

This is how the page look like..

<cfquery datasource="xyz" name="get_it">
    SELECT *
    FROM teachers
</cfquery>

<table>
   <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Manage</td>
  </tr>

      <Cfoutput query="get_it">
   <tr>
      <td>#name#</td>
      <td>#age#</td>
      <td><a href="delete_teacher.cfm?id=#teacherid#" name="del">Delete</a></td>
   </tr>
      </cfoutput>

</table>

=============THE DELETING PAGE==============

  <Cfquery datasource="xyz" name="delete_teacher">
       DELETE 
       FROM teachers
       WHERE teacherid = #id#
  </cfqquery>

I want when the delete link is clicked it should delete the data(both in the database and in the outputed table) without leaving the page.

Thanks.

Upvotes: 0

Views: 1494

Answers (1)

Jules
Jules

Reputation: 2019

You can have your ajax function return the new rows. Then you just replace the table rows on the page with the result (html) of the ajax function.

In your page:

<cfquery datasource="xyz" name="get_it">
SELECT *
FROM teachers
</cfquery>

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Manage</td>
    </tr>
    <tbody id="teachers">
        <Cfoutput query="get_it">
            <tr>
                <td>#name#</td>
                <td>#age#</td>
                <td><a href="delete_teacher.cfm?id=#teacherid#" onclick="doAjax(this.href);">Delete</a></td>
            </tr>
        </cfoutput>
    </tbody>
</table>

The ajax caller, assuming jquery:

<script>
function doAjax(thisUrl)
$.get( thisUrl, function( data ) {
    // REPLACE THE TBODY WITH NEW ROWS
    $( "#teachers" ).html( data );
});
return false;
</script>

In your ajax handler:

<!--- NO WHITESPACE --->
<cfsetting enableCFoutputOnly="Yes">

<!--- DELETE --->
<Cfquery datasource="xyz" name="delete_teacher">
    DELETE 
    FROM teachers
    WHERE teacherid = <cfqueryparam CFSQLType="CF_SQL_INTEGER" value="#url.id#">
</cfqquery>

<!--- REGENERATE --->
<cfquery datasource="xyz" name="get_it">
SELECT *
FROM teachers
</cfquery>
<Cfoutput query="get_it">
    <tr>
        <td>#name#</td>
        <td>#age#</td>
        <td><a href="delete_teacher.cfm?id=#teacherid#" onclick="doAjax(this.href);">Delete</a></td>
    </tr>
</cfoutput>

Upvotes: 1

Related Questions