Is echoing Javascript code condtionally based on server-side logic considered harmful?

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.

Answer 2

Echoing configuration variables and some javascript initialization code from server doesn't sound too bad in general, but if such js-injection-from-server pieces are all over the place then you're right, it's ugly, at least because such code is difficult to manage.

Just try to centralize any kinds of initialization and do the rest in statically-defined client-side JavaScript logic.

UPD. @Oscar Jara is talking about the same thing and provided a good illustration. But often even such cases can be avoided if server-side logic provides data for JavaScript processing via HTML (after all, that's what HTML is for).

Here's a trivial example that you can often encounter. Say you want to output a gallery that will be enhanced into a carousel via JavaScript.

Server generated HTML:

<ul id="myGallery">
  <li><img src="img1.jpg /></li>
  <li><img src="img2.jpg /></li>
  <li><img src="img3.jpg /></li>
  ...
</ul>

And then you have your static JavaScript code initialize the carousel when DOM is ready:

// when DOM ready...
AwesomeCarousel.init($('#myGallery'));

Here the data prepared by the server is this piece of HTML with a list of images, no need to generate JavaScript explicitly loading every image. You can pass arbitrary data via the data-* attributes.