How can I properly supply a php Json encoded object to a javascript method.

Question

I'm trying to pass a PHP json_encoded object to a function which accepts 2 parameters. But when it's rendered on the browser it kept saying that there's

On Firefox's Inspector:

SyntaxError: missing ) after argument list

On Chrome's Inspector:

Uncaught SyntaxError: Unexpected end of input

Code:

<td>
<a href="#" onclick="showEditModal(<?php echo json_encode($value, JSON_HEX_APOS) ?>)">Edit</a>
</td>

Source Code On Browser:

<td>
<a href="#" onclick="showEditModal({"id":2,"title":"Announcement 1","content":"Announcement 1 Content","dateAdded":"2018-04-24 14:44:27"})">Edit</a>
</td>

I tried adding \'' but didn't help. Maybe I'm doing it wrong. I've been on this since last night so I think I need to ask now.

I clear the browser's cache everytime I test but I get the same result. There are similar questions but I tried them but won't fix my problem.

I'd appreciate any help.

All you gotta do is change the quote. from " to ' for the onclick function. — user1496463
– user1496463, Commented Apr 26, 2018 at 5:01
@user1496463 Thanks. This solved it. I didn't think it's that easy because I just recently started to continue learning web dev again. Coming from Java. Thanks. — heisenberg
– heisenberg, Commented Apr 26, 2018 at 5:30

user1496463 · Accepted Answer · 2018-04-26 05:40:41Z

1

All you gotta do is change the quote. from " to ' for the onclick function.

browser read your HTML as

<a href="#" onclick="showEditModal({"id":2,"title":"Announcement 1","content":"Announcement 1 Content","dateAdded":"2018-04-24 14:44:27"})">Edit</a>

when you want to read it as

<a href="#" onclick='showEditModal({"id":2,"title":"Announcement 1","content":"Announcement 1 Content","dateAdded":"2018-04-24 14:44:27"})'>Edit</a>

Check the difference in syntax highlight.

Hence why you got the

SyntaxError: missing ) after argument list

But like @CertainPerformance mentioned. It is better to not write it as inline functions. set the value as a JS object and use it while executing the function. Avoid inline-functions as much as possible.

edited Apr 26, 2018 at 5:40

answered Apr 26, 2018 at 5:37

user1496463

4103 silver badges14 bronze badges

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

2 Comments

heisenberg Over a year ago

Thanks. I appreciate it. It's a simple solution but definitely solved it. Been up trying to fix it since last night and now it's working. I found another approach though. Someone suggested to use htmlentities() in php which works as well.

heisenberg Over a year ago

Yeah, I agree. @Certain Performance is a good style of coding it. I usually try to separate code blocks on separate files when necessary.

CertainPerformance · Accepted Answer · 2018-04-26 05:33:03Z

1

Inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code, especially if you're trying to write into them on the fly with PHP like that. Seriously consider attaching your events with JavaScript, instead, eg: https://developer.mozilla.org/en/DOM/element.addEventListener

To send data from the server to the client, you should either use data- attributes, application/json, or a network request. For example, taking the application/json route, you would do something like the following:

<td>
<a href="#">Edit</a>
<script type="application/json">
<?= json_encode($value, JSON_HEX_APOS) ?>
</script>
</td>

Javascript:

// (select the `a` referenced above)
a.addEventListener('click', () => {
  const parsedObj = JSON.parse(a.nextElementSibling.textContent);
  showEditModal(parsedObj);
});

edited Apr 26, 2018 at 5:33

answered Apr 26, 2018 at 5:07

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

heisenberg Over a year ago

Thanks for your answer. It's gonna be very useful for me in the future. Code is neat. Still trying to get myself familiar with how it works on the web. I'll surely apply this style in my coding. I appreciate it.

Collectives™ on Stack Overflow

How can I properly supply a php Json encoded object to a javascript method.

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related