Make table data clickable: link to callback fn

Programming
, , ,
1

I’m trying to create a clickable link in a <td> element which calls a callback function to open a read-only details window. The link should appear as text in a specific column, and when clicked, execute the callback function.

Currently, I’m adding the following anchor to the target cell in the object’s init function:

$(td).html('<a href="#" onclick="object.myFunction.call(this)">' + cellData + '</a>');

The callback function, which is outside of the init function, looks like this:

grid.readOnlyModalCallback = function () {
    let guid = $(this).data("guid");
    if (guid) {
        grid.showDetailModal(guid);
    }
    return false;
};

This creates a link in the cell, but when clicked, it does nothing except redirect the page to “#”. I know the callback function works, as it will execute if I make the whole row clickable.

Can anyone help me resolve this issue?

2

To resolve the issue, you can modify the anchor tag in the init function to pass the event object and prevent the default behavior of the anchor tag. Additionally, you can use the data attribute to store the GUID value and retrieve it in the callback function.

Here’s the updated code:

$(td).html('<a href="#" data-guid="' + guidValue + '">' + cellData + '</a>').click(function(event) {
    event.preventDefault();
    object.myFunction.call(this);
});

Make sure to replace guidValue with the actual GUID value you want to pass.

In the callback function, you can retrieve the GUID value using $(this).data("guid") as before:

grid.readOnlyModalCallback = function() {
    let guid = $(this).data("guid");
    if (guid) {
        grid.showDetailModal(guid);
    }
    return false;
};

With these changes, clicking the link in the specific column should execute the callback function without redirecting the page.