Avoiding inline JavaScript with dynamic content

Question

I read here that you should avoid coding JavaScript inline (see item #1).

It sounds like a great idea; however, I'm not sure how to use js to select dynamic content without setting the id in the function call inline.

For example, I have a simple blog. The comments are hidden, but can be displayed by clicking an anchor (generated dynamically) that calls a JavaScript function to toggle the comments for that specific post:

$commentsButton = "<a name='comments" . $post->id . "' href='#comments" . $post->id . "'> comments (" . count($comments) . ")</a>";

toggleComments() function:

function toggleComments(id) {
    $('#' + id + ' .commentsContainer').toggle(500);
}

How do you keep from doing this kind of thing? Is it always appropriate to avoid inline JavaScript? Or is this a case where it's necessary?

Update:

I ended up using this:

$('.commentButton').each(function() {
    $(this).click(function() {
        $(this).parents('.post').find('.commentsContainer').toggle(500);
    });
});

with this:

$commentButton = "<a class='commentButton'> comments (" . count($comments) . ")</a>";

Answer 1

How do you keep from doing this kind of thing?

In browser based javascript, this is set to the DOM element that triggered the event in the event handler. You can take advantage of that to re-use a function for any DOM element.

function toggleComments() {
    $(this).find('.commentsContainer').toggle(500);
}

Then you don't have to emit the ID into the javascript.

Answer 2

The solution you ended up with is a good one. In truth the only place you should have Javascript be generated in a server side template like you were talking about is for exporting data from the server to the browser. So for example code like this is a pretty reasonable thing to do, but not actual logic

window.countries = <?php echo json_encode($countries); ?>;

Answer 3

Inline javascript is the devil. Never use it, there is never an excuse for breaking seperations of concerns other then "I'm a bad developer".

In this case you just want to bind a click handler to all your toggle comment anchors that hides the comment container.

var as = document.getElementsByClassName("toggleComments");
[].forEach.call(as, function (a) {
  var container = a.getElementsByClassName("commentsContainer")[0];
  a.addEventListener("click", function (ev) {
    container.classList.toggle("hidden");
  });
}); 

Rather then dynamically creating javascript inline just attach a handler to all toggle comments links.

You will have to add a class to all your toggle comments anchors though.

Legacy platform support: Yes standards compliant code doesn't run on legacy platforms. Use the DOM shim and the ES5 shim. Problem solved.