Delimit Smarty tpl's with outputbuffer without structural damage

Question

I want to delimlit each fetched tpl in order to recognize it with JavaScript afterwards.
Here's my code:

if( ! function_exists('ate_output')){
    function ate_output($tpl_output, &$smarty){
        $tpl = $smarty->template_resource;
        $open = "<div class='ate-div' dta-tpl='$tpl'>";
        $close = "</div>";
        $tpl_output = $open . $tpl_output . $close;
        return $tpl_output;
    }
}

...

$smarty->registerFilter('output','ate_output');

Is there a better way to delimit the tpl's without the risk of breaking the original layout?

Answer 1

Since the layout can break because div is a block element, you can try .ate-div{display:inline;} if the layout breaks.

Answer 2

The best you could do in this case is using some inline tag as someone already mentioned in comment. It shouldn't break your layout but I think you should choose tag that you don't use or almost don't use on this site. Otherwise it may take some styles from CSS and the layout would be broken.

So probably you could use some of tags: b, font, big, small, u assuming that you don't use them in your layout and style them not to affect your layout at all in CSS.

For example for b tag you could do in CSS:

b {font-weight: normal;}

or you can simple add styling to the element so as open you can set:

$open = "<b class='ate-div' dta-tpl='$tpl' style='font-weight: normal;'>";

Answer 3

You can use a tag that will document.write the tpl_output. This will provide you with the tpl name and output for use in your client-side javascript.

if( ! function_exists('ate_output')){
    function ate_output($tpl_output, &$smarty){
        $tpl = json_encode($smarty->template_resource);
        $tpl_output = json_encode($tpl_output);
        return <<<EOT
<script type="text/javascript">
var tpl = {$tpl}; // use this however you'd like
var tpl_output = {$tpl_output};
document.write(tpl_output); // gross, but it works
</script>
EOT;
    }
}