ColdFusion - approach for table of query data and CRUD actions

Question

My question is more geared towards approach than it is programming or errors.

I have a query that runs and gathers a set of data. I then want to use that query's return values to build a table on a page listing all the values. Along with that I need to have some actions with each value for example:

my_val (edit) (delete)
my_cal (edit) (delete)

Where edit and delete are buttons. So the edit button I have working with onClick javascript, where i'm redirected to another page, but the delete button i need that to do three things:

1. prompt user, okay to delete? msg (using javascript for that (return confirmation...).
2. execute query to delete
3. refresh page (self)

Is there a best approach model for this? Is it easier to call two inline javascript commands? Use javascript functions? Maybe a ColdFusion function?

any pointers would be helpful! thanks.

Answer 1

I think you close to what you are looking for.

The way I would do the delete is to confirm in JS, then just send the request to another page that does the delete process, and then sends your user back to your original page (giving you your refresh).

That would be the simple route, you could do also do it using AJAX to call your process page and do the changes in the background. Then you either have to do a JS refresh or manually handle the changes on the page.

Answer 2

I think the easiest way for the delete is something like this. I do assume you use jQuery or some other library or get the JavaScript stuff.

YourPage.cfm
<cfif structKeyExists(URL, "Action") and URL.Action eq "delete">
    <cfququery>
       // delete the item using the id provided
    </cfquery>
</cfif>

<cfquery name="GetFresh">
    // get fresh info
</cfquery>

<cfloop query="GetFresh">
    Something <span class='DeleteLink' data-someid='#SomeID#'>delete</span> <br>
</cfloop>

<script type='text/javascript'>

    $DeleteLinks = $("span.DeleteLink");

    $DeleteLink.click(function() {
        var Confirm = confirm('Are you sure you want to delete?');
        if (Confirm == true) {
           var SomeID = $(this).data("someid");
           var URL = "YourPage.cfm?Action=delete&SomeID=" + SomeID;
           window.location = URL;
        }
    });
</script>

Answer 3

The simplest quickest way is to just have an onclick handler that returns true/false based on the user's selection

    <a href="delete.cfm?id=1" onclick="return confirm('Are you sure you want to delete his?')">Delete</a> 

There are of course much more elegant ways to do it, but the above is basic and works.

Answer 4

This is what I use:

!function($, window, undefined) {
    var document = window.document;
    $(document).delegate('input:submit[name="Delete"][value="Delete"]','click',function() {
        return window.confirm(this.title || 'Delete this record?');
    });
}(jQuery, window);