Question

In another question, it was pointed out that using semantic markup can be a really clean way to pass data to an onclick function, along the lines of the code below.

I have a second question relating to passing JSON and having the receiving function recognize it as such. I have a PHP generated JSON value of [{"authed":"2012-03-04 17:24:24"},{"authed":"2012-03-04 11:44:38"}] that I need to pass to a function. echoing that straight into the <a> tag won’t work, so I am using urlencode() to get:

<a href="javascript:void(0)" data-auth="%5B%7B%22authed%22%3A%222012-03-04+17%3A24%3A24%22%7D%2C%7B%22authed%22%3A%222012-03-04+11%3A44%3A38%22%7D%5D" onclick="popup(this)">click</a>

Unfortunately, when I alert this out from popup(), I via the following code:

function popup(t) {
  var auth = t.getAttribute('data-auth');

  alert(decodeURI(auth));
}

I get

[{"authed"%3A"2012-03-04+17%3A24%3A24"}%2C{"authed"%3A"2012-03-04+11%3A44%3A38%22"}]

which JSON.parse() is unable to handle. Any suggestions on decoding/passing JSON using this pattern?

Answer 1

You need to use htmlspecialchars() to escape for html–like you should be doing for everything you echo out in html. (You are doing that right? To prevent generating invalid html?) Don’t use urlencode(), which is for encoding parts of a url path or query parameter.

<?php
$data = array(array('authed'=>'2012-03-04 17:24:24'), array('authed'=>'2012-03-04 11:44:38'));
$jsondata = json_encode($data);
?>
<a data-auth="<?php echo htmlspecialchars($jsondata, ENT_COMPAT, 'UTF-8')?>" onclick="popup(this)">click</a>