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
– Quentin, Commented Jan 10, 2012 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
– Nipuna, Commented Jan 10, 2012 at 16:05

katspaugh · Accepted Answer · 2012-01-11 14:13:59Z

2

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.

edited Jan 11, 2012 at 14:13

answered Jan 10, 2012 at 15:24

katspaugh

18k12 gold badges69 silver badges107 bronze badges

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

2 Comments

Nipuna Over a year ago

document.body.addEventListener is not working in IE. I tried using this stackoverflow.com/questions/1695376/… also but it's only working when I have e.target.getAttribute('data-input')

katspaugh Over a year ago

@Nipuna Silva, I'm not sure what exactly your problem with attachEvent is, but see the updated answer.

khael · Accepted Answer · 2012-01-10 14:33:19Z

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, 2012 at 14:33

khael

2,6101 gold badge18 silver badges36 bronze badges

3 Comments

Nipuna Over a year ago

What's the bad practice in this?

Quentin Over a year ago

This will break if i contains a double quote, backslash, new line (and possibly some other characters).

khael Over a year ago

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.

Collectives™ on Stack Overflow

Pass variables through Quoted Javascript String

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related