Question

So I’ve got this PHP that’s writing some JavaScript that looks something like this:

echo '<script type="text/javascript">

var videoArr=["'.implode('", "', $videos).'"];
var titleArr=["'.implode('", "', $titles).'"];
var explanationArr=["'.implode('", "', $explanations).'"];
var i = 0;

function appendVideo(i) {

var url ="http://www.youtube.com/embed/" + videoArr[i] + "?rel=0&amp;autohide=1&amp;showinfo=0";

$("#stage").append("<div class=\"video\">");
$("#stage").append(titleArr[i] + "<br />");
$("#stage").append("<iframe width=\"400\" height=\"225\" src=\"" + url + "\" frameborder=\"0\" allowfullscreen></iframe>");
$("#stage").append("<br /><img src=\"images/btn_play.png\" onclick=\"play(\'" + videoArr[i] + "\')\" />");
$("#stage").append("<img src=\"images/btn_show.png\" onclick=\"show(\'" + videoArr[i] + "\')\" /><br />");
$("#stage").append("</div>");
}

</script>';

But after reading this: http://littleurl.info/wdl I’ve learned that I have to do this all in one append for my DIV tags to appear correctly. However I’m finding it impossible to get my syntax correct because I’m doing this all through PHP. Can anyone help me debug the code below? Please remember it’s all contained in an echo with single inverted commas.

$("#stage").append("<div class=\"video\">"+ titleArr[i] + "<br />
<iframe width=\"400\" height=\"225\" src=\"" + url + "\" frameborder=\"0\" allowfullscreen></iframe><br />
<img src=\"images/btn_play.png\" onclick=\"play(\'" + videoArr[i] + "\')\" />
<img src=\"images/btn_show.png\" onclick=\"show(\'" + videoArr[i] + "\')\" /><br />
</div>");

Answer 1

Try saving your HTML/Javascript in variables in PHP using heredoc syntax, so you don’t need to escape everything:

<?php

$javascript_part_1 = <<<END_SCRIPT

    <script>
    ...

END_SCRIPT;

$javascript_part_2 = <<<END_SCRIPT

    ...

END_SCRIPT;

$javascript_part_3 = <<<END_SCRIPT

    ...
    </script>

END_SCRIPT;

?>

Then, simply use echo with PHP’s string concatenation:

echo $javascript_part_1 . $videos . $javascript_part_2 . $titles . $javascript_part_3;