Pass variables through Quoted Javascript String

Question

I have a function which returns a string which contains a javascript call. Since it is quoted I cannot pass variables through it.

How can I change the return string which would enable me to pass javascript object values.

Ex: How can I pass var i through the return statement.

var i = 'iaa';

return '<a href="javascript:abccd(\'i\');" ><img src="../images/btnsave2.png" style="margin:6px 0 0 6px;" height="13" width="13" /></a> ';

Eugh. Refactor. Use standard DOM instead of passing chunks of HTML around. Then you can use standard event handler binding techniques. — Quentin, Jan 10 '12 at 14:02
@Quentin :- I'm using this inside a custom formatter in JQGrid. I don't think there's anyway I can pass standard DOM around — Nipuna, Jan 10 '12 at 16:05

score 2 · Answer 1 · answered Jan 10 '12 at 14:33

2

Try this, but please reconsider your actions before putting into practice.

var i = "halo";
return '<a href="javascript:abccd(\''+i+'\');" ><img src="../images/btnsave2.png" style="margin:6px 0 0 6px;" height="13" width="13" /></a> ';

answered Jan 10 '12 at 14:33

khael

2,600
1
15
36

What's the bad practice in this? – Nipuna Jan 10 '12 at 16:07
This will break if `i` contains a double quote, backslash, new line (and possibly some other characters). – Quentin Jan 10 '12 at 16:09
1

The first bad experiance doing this is like Quentin said the special characters in the passed variable. The second thing is that you could do some more reliable reusable sustainable code not just a "it works so it's ok" code. One of the ways to accomplish what you want in a more suitable way is katspaugh solution. – khael Jan 10 '12 at 16:54

katspaugh · Accepted Answer · 2012-01-11T14:13:59.167

If you need to manipulate raw HTML, at least add the event handler separately, in JavaScript. And styles in a CSS file.

Your image tag code should contain a data- attribute:

i = i.replace(/"/g, '\\"')
return '<img data-input="' + i + '" src="../images/btnsave2.png" />'

Then adding a listener is as simple as that:

var onClick = function (e) {
    var data = e.target.getAttribute('data-input')
    if (data) {
        abccd(data)
    }
}

/* Firefox, Chrome &c */
if (document.addEventListener) {
    document.addEventListener('click', onClick, false)
/* IE <9 */
} else if (document.attachEvent) {
    document.attachEvent('onclick', function () {
        return onClick({ target: event.srcElement })
    })
}

Of course, XSS problems, mentioned by @Quentin, are still a concern. But at least you won't have to escape nested quotes in the inline handler as in your original example.

document.body.addEventListener is not working in IE. I tried using this http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript also but it's only working when I have e.target.getAttribute('data-input') — Nipuna, Jan 11 '12 at 05:01
@Nipuna Silva, I'm not sure what exactly your problem with `attachEvent` is, but see the updated answer. — katspaugh, Jan 11 '12 at 14:14

Pass variables through Quoted Javascript String

2 Answers2