Do AJAX check before confirming delete

Question

I have a Telerik grid. For the uninitiated, it just means I've got a table on a page.

On this Telerik grid, I've got a column for deleting a record. I originally had it so that a user could click, and then it would fire a javascript confirm dialog. If the user hit ok, it would call go the Delete link; if not then it would cancel without refreshing the page. That original code is below.

    columns.Template(
                @<text><a href='@Url.Content("~/HazardControl/Delete/" + @item.Id)' 
style="cursor:pointer;" onclick = "return confirm('Are you sure you want to delete this record?');">
                    <img src="~/Content/Images/DeleteItem.gif" alt="Delete" />
                </a></text>
            ).Width(50).HtmlAttributes(new { style = "text-align:center" });

Now, the requirements I have now is that they want to check if a record is eligible for deletion before doing that confirm delete, so now my code looks like this:

    columns.Template(
                    @<text><a href='@Url.Content("~/Training/Delete/" + @item.Id)' 
style="cursor:pointer;" onclick="deleteConfirmation(@item.Id)">
                        <img src="~/Content/Images/DeleteItem.gif" alt="Delete" />
                    </a></text>
                ).Width(50).HtmlAttributes(new { style = "text-align:center" });    

    <script type="text/javascript" >
            function deleteConfirmation(recordId) {
                $.ajax({
                    url: '@Url.Action("ValidateDelete", "Training")',
                    type: 'POST',
                    data: { id: recordId },
                    success: function (result) {
                        var deleteRecord = false;
                        if (result) {
                            var userConfirm = confirm('Are you sure you want to delete this record?')
                            if (userConfirm) {
                                deleteRecord = true;
                            }
                        }
                        else {
                            alert('Delete no allowed, the record is in use!');
                        }
                        return deleteRecord;
                    }
                });
                return false;
            }
        </script>

I thought I'd be able to accomplish this by using an AJAX call before doing the confirm, BUT what actually happens is that the validation part occurs correctly, then the link activates anyway despite returning false or true. I though that when you used the anchor tag and used the onclick method and returned false, then the nothing would happen, but that does not seem to be the case when using AJAX. What am I doing wrong here? Has this been done before? Is it possible here?

Answer 1

Here's how I did it: Removed the link and gave the OnClick event to the image. Javascript to do the checks and calls to Delete link.

columns.Template(
            @<text>
                <img src="~/Content/Images/DeleteItem.gif" alt="Delete" style="cursor:pointer;" onclick="deleteConfirmation(@item.Id)" />
            </text>
        ).Width(50).HtmlAttributes(new { style = "text-align:center" });
<script type="text/javascript">
    function deleteConfirmation(recordId) {
        $.ajax({
            url: '@Url.Action("ValidateDelete")',
            type: 'GET',
            data: { id: recordId },
            success: function (result) {
                if (result) {
                    var userConfirm = confirm('Are you sure you want to delete this record?')
                    if (userConfirm) {
                        window.location.href = '@HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()/Delete/' + recordId;
                    }
                }
                else {
                    alert('Delete not allowed, the record is in use!');
                }
            }
        });
    }
</script>

Answer 2

The AJAX call occurs asynchronously so returning true or false will have no effect on the event bubbling.

In my example below if it returns true it will trigger a click of the original element that will this time return true and allow the link click to go through. The variable deleteRecord might have to be renamed if you have multiple links and the #linkid should be for the element that was originally clicked. If you assigned an id to the link of deleteItem-@item.Id you could pick this up in the JavaScript.

var deleteRecord = false;

function deleteConfirmation(recordId) {
    if(!deleteRecord)
    {
        $.ajax({
            url: '@Url.Action("ValidateDelete", "Training")',
            type: 'POST',
            data: { id: recordId },
            success: function (result) {
                if (result) {
                    var userConfirm = confirm('Are you sure you want to delete this record?')
                    if (userConfirm) {
                        deleteRecord = true;
                        $("#linkid").click();
                    }
                }
                else {
                    alert('Delete not allowed, the record is in use!');
                }
            }
        });
    }
    return deleteRecord;
}