echo php variable inside innerhtml of javascript

Question

how do i echo this php variable inside innerhtml of javascript. I tried this but it isn't working. the function isn't called because if the php code

<a href="#"><img src="images/group3.png" alt="groups" border="0" title="Groups" onclick="return false" onmousedown="showGroups()"></a>
<script type="text/javascript">
function showGroups() {
        _('groupModule').innerHTML = '<div id="groupWrapper"><div id="groupList"><h2>My Groups</h2><hr /><?php echo $mgList; ?><h2>All Groups</h2><hr /><?php echo $agList; ?></div></div>';
</script>

Please how do I fix this.

Answer 1

This depends on what the php variable is, if it is scalar value, you could echo it directly (but remember to escape the special chars which will break the javascript syntax).

And if the php variable is not scalar value (eg: array), then you can't echo it directly, you have to construct the valid javascript code use the variable.

Answer 2

<script type="text/javascript">
function showGroups() {
   document.getElementById('groupModule').innerHTML = '<div id="groupWrapper"><div id="groupList"><h2>My Groups</h2><hr /><?php echo $mgList; ?><h2>All Groups</h2><hr /><?php echo $agList; ?></div></div>';
}
</script>

Answer 3

<?php
$mgList = 'Test $mgList ';
$agList = 'Test $agList ';
?>

<a href="#"><img src="sample.png" alt="groups" border="0" title="Groups" onclick="showGroups()"></a>
<div id="groupModule">-- groupModule --</div>

<script type="text/javascript">
function showGroups() {
    document.getElementById('groupModule').innerHTML = '<div id="groupWrapper"><div id="groupList"><h2>My Groups</h2><hr /><?php echo $mgList; ?><h2>All Groups</h2><hr /><?php echo $agList; ?></div></div>'; 
}
</script>

DEMO and click the image

If you are looking for something similar, let me know, i will upload the files

Answer 4

Overall, there isn't anything wrong with your code. However, it might have been caused by minor and hidden syntax error in your code.

If you use PHP script to generate JavaScript, check the output source code and make sure there isn't anything wrong with it.

Should the JavaScript not execute, debug it with your browser's console.

Uncaught ReferenceError: showGroups not defined

This means exactly what it says. showGroups is not defined. Make sure you have showGroups properly defined.

function showGroups() {
        _('groupModule').innerHTML = '<div id="groupWrapper"><div id="groupList"><h2>My Groups</h2><hr /><?php echo $mgList; ?><h2>All Groups</h2><hr /><?php echo $agList; ?></div></div>';
}
</script>

The closing curly bracket } is very important!

Uncaught SyntaxError:Unexpeted tokenError illegal

This is caused by invalid character in your code. Did you copy your code from elsewhere? Check if there's any special character found in your code. If so, remove it.

Source

According to the source code you included, there is a newline wrapped in assignment of $mglist and $aglist which caused JavaScript to act weirdly.

Put them in 1 line.

$agList .= '<a href="group.php?g='.$row["name"].'"><img src="groups/'.$row["name"].'/'.$row["logo"].'" alt="'.$row["name"].'" title="'.$row["name"].'" width="50" height="50" border="0"></a>';

$mgList .= '<a href="group.php?g='.$row["gname"].'"><img src="groups/'.$row["gname"].'/'.$row["logo"].'" alt="'.$row["gname"].'" title="'.$row["gname"].'" width="50" height="50" border="0"></a>';

Shared source code