My website features a Telerik grid, which essentially represents a table on a page.
Within this Telerik grid, there is a column dedicated to deleting records. Initially, when a user clicked on the delete link, a javascript confirm dialog would pop up. If the user confirmed deletion by pressing "OK", the code would proceed to delete the record; if not, the process would be cancelled without refreshing the page. The original code for this functionality is provided 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" });
The current requirements necessitate a check to determine if a record is eligible for deletion before prompting the confirmation message. As a result, my updated code now 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('Deletion not allowed, the record is in use!');
}
return deleteRecord;
}
});
return false;
}
</script>
Although I attempted to handle this validation process using an AJAX call before triggering the confirmation dialog, the issue remains that the link still activates regardless of whether "true" or "false" is returned. My understanding was that returning "false" using the anchor tag's onclick method should prevent any action, but it seems different with AJAX. What could I possibly doing wrong here? Has anyone encountered and resolved this situation before? Is it feasible to achieve this scenario?