Echo template improvement

Ian's Avatar


27 Feb, 2015 05:13 PM

Hi Tender folks,

This is a followup to this question about echo templates.

I fiddled with this some. The canned responses being in the html made it pretty easy! Here's the custom javascript I used to create the select box we wanted:

// improved echo template interface
if ($$('comment_body') && Tender.is_supporter) {
        function insertResponse() {
            jQuery("#comment_body").val( function( index, val ) {
                return val + jQuery("#canned-responses").val();

        // create responses list
        var responses = jQuery('<select></select>');
        responses.attr("id", "canned-responses");
        responses.attr("onchange", "insertResponse()");

        // create options and optgroups
        // assumes echo template titles are in the format group:title
        // puts anything with just a title into a Misc group
        replies = TenderKO.discussion.cannedReplies;
        groups = {"Misc": jQuery('<optGroup label="Misc"></optGroup>'),};
        for (r in replies)
            if (replies[r].title) {
                var arr = replies[r].title.split(':');
                o = jQuery('<option></option>');
                if (arr.length === 1) {
                } else {
                    try {
                    } catch (TypeError) {
                        g = jQuery('<optGroup></optGroup>')
                        g.attr("label", arr[0]);
                        groups[arr[0]] = g
        // sort the optgroups and add to selectbox
        var keys = new Array();
        for (g in groups) {
        for (k in keys) {

        // insert select box into page and activate it
        var commentBox = jQuery('#comment_body');
        responses.chosen().change(function() {
        // ctrl+alt+M to focus search box
        commentBox.keydown(function(e) {
            if (e.altKey && e.ctrlKey && e.which === 77) {
                if (!jQuery('#canned_responses_chosen').hasClass('chosen-container-active')) {

You also need to add this to the custom HTML headers (I used Chosen to style the selectbox):

<link type="text/css" rel="stylesheet" href="">
<script type="text/javascript" src=""></script>

This gives you a searchable list that pops up when you press ctrl+alt+M from the comment box and returns focus to the comment box after selecting an option so you can continue typing. This makes using echo templates so much easier for us. Hopefully others will find it useful, or maybe you can integrate something like this into Tender directly.

  1. 1 Posted by Julien on 27 Feb, 2015 05:39 PM

    Julien's Avatar

    Hey Ian,

    Sorry I should have gotten back to you earlier :/ I actually coded something similar yesterday. It's going through QA, so it should be deployed in the next few days. I'll let you know when that happens.


  2. 2 Posted by Nicole on 06 Mar, 2015 04:19 PM

    Nicole's Avatar

    Ian -

    We deployed the changes to echos last week - Let us know if you have any questions.


  3. Nicole closed this discussion on 06 Mar, 2015 04:19 PM.

Discussions are closed to public comments.
If you need help with Tender please start a new discussion.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac