Passing jQuery data table row as argument to JavaScript function

Question

I have a data table with link on some of the rows to allow users to view details of selected record. I have the following on "View" cell and associated js function:

columns: [
    {
        ....
    },{
        "render": function (data, type, row) {
            var active = row.Active;
            var today = new Date();
            var startDate = new Date(row.StartDate)
            var cellContent = "";

            if (startDate > today && active == true) {
                cellContent = "<span class=\"PageLink\"><a href='javascript:' onclick=\"setDetailFields(" + row + ")\">View</a></span>";
            }
            return cellContent;
        }
    },{
        ....
    }
],

function setDetailFields(record) {  
    clear();
    var reqID = record.RequestID;
    var reqName = record.RequesterName;
    ....
}

When I click the "View" link I get the following JS error:

// JavaScript critical error at line 19, column 1 in (unknown source location)\n\nSCRIPT1007: Expected ']'

debugger shows the following code block when error occurs:

function onclick(event)
{
setDetailFields([object Object])
}

[object Object] is not valid JS syntax; what were you intending to do? — Haroldo_OK
– Haroldo_OK, Commented Aug 20, 2019 at 18:11
This is what VS debugger shows when it throws the js error. I am trying to pass the entire row of the data table as an argument to a js function. — NoBullMan
– NoBullMan, Commented Aug 20, 2019 at 18:20
The error message itself says that there is a missing closing brace somewhere on the 19th line on your JS code. — Haroldo_OK
– Haroldo_OK, Commented Aug 20, 2019 at 18:53
I don't think I am missing a bracket; data table is displayed correctly (it would barf if I was missing a bracket in its definition) and I have no opening bracket in js function to miss a closing one. I thought maybe the data structure, or type, of "row" that I am trying to pass to js function is the problem. It seems to be an "object" and not sure if it needs to be handled differently passed as an argument. — NoBullMan
– NoBullMan, Commented Aug 20, 2019 at 19:12

Yevhen Horbunkov · Accepted Answer · 2019-08-21 08:11:32Z

3

The problem is that when you cook up <span> HTML within render function you attempt to convert object into string, so your HTML looks like

"<span class="PageLink"><a href="javascript:" onclick="setDetailFields([object Object])">View</a></span>"

In your page source.

Instead, I may suggest to put click handler into your code:

$('table').on('click', '.PageLink', function(){
   let rowData = $('table').DataTable().row($(this).closest('tr')).data();
   let reqID = rowData.RequestID;
   let reqName = rowData.RequesterName;
   ...
})

(you should change 'table' for some proper selector in your actual code)

And change cellContent inside your render function to simply:

cellContent = '<span class="PageLink">View</span>';

You may decorate that <span> to appear as link in your CSS, if you wish:

.PageLink:hover {cursor: pointer}

answered Aug 21, 2019 at 8:11

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NoBullMan Over a year ago

Thank you. I made the changes as suggested but the click function never gets hit. I changed 'table' in your example to actual id of the data table: var tblReq = $("#ReqTable").DataTable({... and then

$('#tblReq').on('click', '.PageLink', function(){debugger             let rowData = $('#tblReq').DataTable().row($(this).closest('tr')).data();             setDetailFields(rowData);         })'

Yevhen Horbunkov Over a year ago

You specified different id's in DataTables constructor ('#ReqTable') and click handler ('#tblReq') isn't that a mistake?

Yevhen Horbunkov Over a year ago

I can help you to resolve your issue much faster if you would share live snippet that reproduces your problem, so I can see wider code context. You can use codepen or jsfiddle for that purpose.

NoBullMan Over a year ago

Thanks; I will now proceed with waking up! You are right, I used var name of the table (tblReq) instead of its ID (ReqTable). Once I corrected the error, it worked just fine. Thanks a bunch.

Abhishek Sinha · Accepted Answer · 2020-05-19 16:29:48Z

0

Ran into same issue. Reason for the issue: Object is converted to string when html is rendered.

The problem can be sorted out in two ways:

Approach 1: add a click handler to the js code(as suggested in the answer above)

Approach 2: Say I want to pass a JSON object named 'row' to the onclick function. As I need a very few attributes of the 'row' object, instead of adding a new handler as in approach 1, I would rather just pass those specific parameters as below:

'<a href="javascript:" onclick="setDetailFields(\'' + row['attribute1'] + '\'\, \'' +row['attribute2'] + '\'\)">View</a>'

answered May 19, 2020 at 16:29

Abhishek Sinha

1,22914 silver badges13 bronze badges

Comments

Arpit Joshi · Accepted Answer · 2021-06-06 15:05:26Z

0

Please use JSON.stringify(row) while passing the row object to function, like this:

cellContent = "<span class=\"PageLink\">
<a href='javascript:' onclick=\"setDetailFields(" + 
JSON.stringify(row) + ")\">View</a></span>";

Instead of:

cellContent = "<span class=\"PageLink\">
<a href='javascript:' onclick=\"setDetailFields(" + row + 
")\">View</a></span>";

edited Jun 6, 2021 at 15:05

answered May 11, 2021 at 16:44

Arpit Joshi

1791 silver badge8 bronze badges

1 Comment

Graham Asher Over a year ago

Great answer, but it would be nice if you could format the code snippets so that the changed part is visible without horizontal scrolling.

Collectives™ on Stack Overflow

Passing jQuery data table row as argument to JavaScript function

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related