1

I am trying to define a pure JSON string as an argument in a Javascript function.

Below is the way I want to define it:

<a href="#" onclick="js_func('arg_1', 'arg_2', '{"key": "value"}'); return false">Link</a>

Firebug gives me an error alert: unterminated string literal, even when I escape the double-quotes on the JSON string.

How can I solve this?

Thanks.

ObiHill
  • 11,448
  • 20
  • 86
  • 135
  • whats with the `return false`. can you put more than one command into an event like that? and no semicolon? im not 100% here so sorry if this is acceptable – jon_darkstar Jan 09 '11 at 07:14
  • @jon, see [HTML: What's the effect of adding 'return false' to an onclick event ? ](http://stackoverflow.com/questions/128923/html-whats-the-effect-of-adding-return-false-to-an-onclick-event). – Matthew Flaschen Jan 09 '11 at 07:16
  • @Matt - come on sending me that link is kind of condescending. I know returning fales stops the behavior that would otherwise occur. what is the point here? Why not skip the hyperlink reference at all? – jon_darkstar Jan 09 '11 at 07:24
  • is it not allowed to have an anchor with no href attribute? is that the point? – jon_darkstar Jan 09 '11 at 07:26
  • @jon, if it seemed condescending, I'm sorry. It wasn't meant to be. You can have an empty `href`, or you can use "#". Without `return false` (or equivalent), the first will cause a reload, and the second will cause a jump to the top of the page. – Matthew Flaschen Jan 09 '11 at 07:33
  • link with no href causes reload? ok thats what i didnt get sorry for confusion. without understanding that the blanket `return false` seemed dumb – jon_darkstar Jan 09 '11 at 07:37
  • @jon, well, a link with an empty href. An `a` element with no href is an anchor. – Matthew Flaschen Jan 09 '11 at 07:43
  • aaah right. so the need for that `href` and `return false` instead of just dropping the `href` attribute is so the text maintains appearance of a link. correct? – jon_darkstar Jan 09 '11 at 07:51
  • Matthew is absolutely correct about the use of href attribute and return false. – ObiHill Jan 09 '11 at 11:08

3 Answers3

5

Use &quot; for your double quotes, then in js_func(), replace them with actual double quote characters (") before evaluating your JSON string. (thanks for the demo Matthew, I updated your fiddle with the example from the question:)

http://jsfiddle.net/brillyfresh/kdwRy/1/

Ryan
  • 1,372
  • 14
  • 20
  • 3
    The unescaping is already done by the browser - [demo](http://jsfiddle.net/kdwRy/). – Matthew Flaschen Jan 09 '11 at 07:21
  • 1
    brillyfresh essentially has the answer to the question here, with the correction from Matthew (that no unescape is necessary on the JS end). The reason Chuck is getting the error is because the browser sees the " before key and thinks it's the end of the onclick attribute's value. – Ken Franqueiro Jan 09 '11 at 08:20
  • Thanks brillyfresh, this worked for me. Thanks for Matthew as well. Much appreciated. – ObiHill Jan 09 '11 at 11:14
1

simply defining the link as <a href="#" onclick="js_func('arg_1', 'arg_2', {key: 'value1'}); return false;">Link</a> works fine. JSON is valid JavaScript, you don't need to enclose it in ''s.
I also suggest to use an EventListener (element.addEventListener()), this makes the html cleaner and would reduce this problem to nothing.

Samuel Herzog
  • 3,561
  • 1
  • 22
  • 21
  • Well, his code was attempting to pass a JSON string. You're passing a JavaScript object generated from a object literal. There's a difference. Usually, you would want the literal here, but not necessarily. You're right that using `addEventListener` could greatly simplify things. – Matthew Flaschen Jan 09 '11 at 07:35
  • i thought he may had the believe that every argument given in onclick has to be "stringified" - thats certainly not the case and hence my answer. – Samuel Herzog Jan 09 '11 at 07:58
-1

ryou are either trying to pass the parsed object or pass a string

Object: onclick="js_func(arg_1, arg_2, {'key': 'value'});"

String: on_click="js_func('arg_1', 'arg_2', '{\"key\": \"value\"}'); return false"

All I've got handy to test is firebug interpreter but both worked fine for me.

>>>>'{\"key\": \"value\"}'
"{"key": "value"}"
>>>> {'key': 'value'}
Object {key="value"}

(I don't mean to presume whether arg_1 and arg_2 are strings or variable names, and it doesnt matter. just did the same thing as with the JSON)

jon_darkstar
  • 16,398
  • 7
  • 29
  • 37