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.

9
  • 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 Commented Jan 9, 2011 at 7:14
  • @jon, see [HTML: What's the effect of adding 'return false' to an onclick event ? ](stackoverflow.com/questions/128923/…). Commented Jan 9, 2011 at 7: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? Commented Jan 9, 2011 at 7:24
  • is it not allowed to have an anchor with no href attribute? is that the point? Commented Jan 9, 2011 at 7: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. Commented Jan 9, 2011 at 7:33

3 Answers 3

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/

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

3 Comments

The unescaping is already done by the browser - demo.
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.
Thanks brillyfresh, this worked for me. Thanks for Matthew as well. Much appreciated.
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.

2 Comments

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.
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.
-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)

7 Comments

return false prevents the event from propagating, thus preventing the browser from handling the click as it normally would.
what is 'normally would' in this case? it does it on every click. when does the link actually get followed?
The normal behavior is to follow the link ("#" in this case).
but EVERY click returns false. in what case does that actually happen?
@jon, the link never gets followed. It's essentially pretending to be a link, while really only triggering JavaScript.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.