Question

Like this:

<script>
    setSomeStuffUp();

    <?php if ($otherStuffNeedsToBeDone === true) { ?>

         doSomeOtherStuff();

    <?php } ?>

    breakSomeStuffDown();
</script>

Came across something like this at work- done with templating (Smarty), so it looks a bit cleaner- but not by much! Also echoes some template variables used for things such as jQuery selectors, and other little unpleasant-looking bits.

What’s the proper way to do this? Load the data that needs to be used for logic in the JS as JSON via AJAX? HTML data attributes?

Something about it just smells bad, bad, bad.

Thanks everyone.

Answer 1

It is bad practice to use language X to generate code in language Y.

Try “decoupling” the two languages, for example, like this:

<script type="text/javascript">
  var data = {
    id: "<?php echo $id ?>",
    ...
  };

  $(document).ready(function(){
     $("#" + data.id).on("click", function(){
       /*do something*/
     });
  });
</script>

This way, PHP only cares about populating the data structure and JavaScript only cares about consuming the data structure.