How to pass an object into javascript as method parameter without getting Unexpected identifier error

Question

In JQGrid table, one of the cells has a link in it, when clicked, it should execute a javascript.

{name : 'localAccountNo' , jsonmap : 'localAccountNo', label : 'Customer <br>Number', width:50, frozen:true, formatter : localAccountNumberCellFormatter}

JQGrid localAccountNumber cell formatter code

function localAccountNumberCellFormatter(cellvalue, options, rowObject)
{
    return '<a onclick="selectCustomer('+ rowObject +')">'+ cellvalue +'</a>';
}

Select customer javascript code

function selectCustomer(rowOfCustomer) {
    console.log(rowOfCustomer);
}

Clicking the link in the JQGrid cell failed with a syntax error.

Uncaught SyntaxError: Unexpected identifier

However when you pass the rowObject into selectCustomer method as string by escaping the object as depicted in the below code, it works. But it only pass the string representation of the object, not the actual object.

function localAccountNumberCellFormatter(cellvalue, options, rowObject)
{
    return '<a onclick="selectCustomer(\''+ rowObject +'\')">'+ cellvalue +'</a>';
}

The rowObject passed into selectCustomer method

Answer 1

Custom formatter should be correct HTML fragment. Thus you have to encode the rowObject as string (using JSON.stringify, for example) and escape the quotes of the string inside of the custom formatter. The method selectCustomer will have to convert the string parameter back to object (using JSON.parse) before be able to use rowObject.

There are better alternative ways, which you can to use in the most cases. onclick handle will be start with DOM of <a> as this and event initialized to the Event object of the Click event. Thus you can, for example, use just

function localAccountNumberCellFormatter(cellvalue, options, rowObject) {
    return '<a onclick="selectCustomer.call(this)">'+ cellvalue +'</a>';
}

to get rowid from the parent row and to call getRowData using the rowid to get the data from other columns. You will get exactly the same like rowObject, but almost the same in the most cases:

function selectCustomer (event) {
    var $tr = $(this).closest(".jqgrow"), rowid = $tr.attr("id"),
        $grid = $tr.closest(".ui-jqgrid-btable"),
        item = $grid.jqGrid("getRowData", rowid);
    alert("item.lastName=" + item.lastName);
}

You can use

return '<a onclick="return selectCustomer.call(this, event);">'+ cellvalue +'</a>';

and return false from selectCustomer to prevent event bubbling. Forwarding of event object allows you to use event.target inside of the selectCustomer instead of this.

By the way, if you really need to use rowObject associated with the row, then it would be better to save it as data-somevalue attribute of the row (<tr>) element. See the old answer, which shows how to use rowattr to do this. You will can use $tr.data in the above code of selectCustomer to access the object.

If you remind about the event bubbling then it will be clear, that one don't need to set onclick attribute on every <a> element in the column. Instead of that you can just place <span> with CSS classes, which makes the text looking like link, thus the users understand that one can click on the text. One can register only one click handler on the <table> element, which will be called because of event bubbling. By the way jqGrid has already click handler. You can use beforeSelectRow or onCellSelect, which will be called inside of the click handler. The second parameter (e) of the callback is the Event and you can use e.target to access to the clicked <span>. You can find more details of the approach in the answer, in this one or some other.

Answer 2

You can use JSON.stringify to pass the object

return '<a onclick="selectCustomer('+ JSON.stringify(rowObject) +')">'+ cellvalue +'</a>';

Answer 3

If you don't have to support IE, you could use template strings:

function localAccountNumberCellFormatter(cellvalue, options, rowObject) {
    return `<a onclick="selectCustomer(${rowObject})">${cellvalue}</a>`;
}