How to parse string correctly into onclick method

Question

I have a dynamic table which is being created with jquery. The problem I face is, jquery interferes my string so it's not being parsed correctly to onclick method.

for (var i = 0; i < data.result.list.length; i++) 
{
    var tr = $("<tr></tr>");                       
    tr.append("<td>" + "<a onclick='" + data.result.list[i].cfunction + "'>" + data.result.list[i].cvalue + "</a>" + "</td>");
    tr.append("<td>" + + "</td>");
    table.append(tr);
}

data.result.list[i].cfunction has a string value like "getMyMethod('My parameter')" which is basically calling a method with parameter in quotes. But after jQuery parses this to onclick function it's value changes as onclick="getMyMethod(" my="" parameter')'=""

here is the generated html:

<a onclick="getMyMethod(" my="" parameter')'="" >My Value</a>

Can anyone put me in the right direction?

Please post code regarding how you get your data. via Ajax call?? — Guruprasad J Rao
– Guruprasad J Rao, Commented Mar 23, 2018 at 7:02

Smit Raval · Accepted Answer · 2018-03-23 07:04:07Z

1

Change this line

  "<a onclick='" + data.result.list[i].cfunction + "'>"

to this

  '<a onclick="' + data.result.list[i].cfunction + '">'

answered Mar 23, 2018 at 7:04

Smit Raval

3,5161 gold badge12 silver badges24 bronze badges

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

Comments

gurvinder372 · Accepted Answer · 2018-03-23 07:03:07Z

1

You internal double quotes " needs to be escaped

var func = data.result.list[i].cfunction.replace( /"/g, "\\\"" );
tr.append("<td>" + "<a onclick='" + func + "'>" + data.result.list[i].cvalue + "</a>" + "</td>");

answered Mar 23, 2018 at 7:03

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

klevendoglu Over a year ago

Hello, internal double quotes are being generated as I'm parsing it to onclick function. There's no internal double quotes in the first place.

Cuong Do · Accepted Answer · 2018-03-23 07:04:00Z

1

you should modify code with:

tr.append(
    $("<td></<td>").append(
        $("<a></a>")
            .attr({
                "href" : "#"
            })
            .text(data.result.list[i].cvalue)
            .attr({
                "onclick" : data.result.list[i].cfunction
            })
    )
);

answered Mar 23, 2018 at 7:04

Cuong Do

293 bronze badges

1 Comment

klevendoglu Over a year ago

although I've marked another answer as accepted, I find this approach more readable and better, thanks a lot for providing this.

ReGdYN · Accepted Answer · 2018-03-23 07:08:46Z

You can modify your cfunction items in the data like this (encode):

cfunction: "getMyMethod(\"My parameter\")",

This worked in the console (make sure the table ID exists):

var data = {
    result: {
        list: [
            {
                cfunction: "getMyMethod(\"My parameter 1\")",
                cvalue: "1"
            },
            {
                cfunction: "getMyMethod(\"My parameter 2\")",
                cvalue: "2"
            }
        ]
    }
}

var table = $("#testTable");

for (var i = 0; i < data.result.list.length; i++) {
    var tr = $("<tr></tr>");                       
    tr.append("<td>" + "<a onclick='" + data.result.list[i].cfunction + "'>" + data.result.list[i].cvalue + "</a>" + "</td>");
    tr.append("<td>" + + "</td>");
    table.append(tr);
}

var getMyMethod = function (funcParam) {
    console.log(funcParam);
};

BMErEr · Accepted Answer · 2018-03-23 07:11:53Z

1

Can you try this. And be sure your data.result.list[i].cfunction value is "getMyMethod('My parameter')"

for (var i = 0; i < data.result.list.length; i++) 
{
    var tr = $("<tr></tr>");                       
    tr.append("<td>" + "<a onclick=\" " + data.result.list[i].cfunction + 
"\" >" + data.result.list[i].cvalue + "</a>" + "</td>");
    tr.append("<td>" + + "</td>");
    table.append(tr);
}

answered Mar 23, 2018 at 7:11

BMErEr

15114 bronze badges

Collectives™ on Stack Overflow

How to parse string correctly into onclick method

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related