javascript; Auto-highlight on focus

Sometimes I look online for code and when I find it I realize that I should have known how to do it. Then I feel silly. This is a time when that happened.

I needed to auto-highlight the contents of a read-only textbox or textarea when the user clicked on the input.  Easiest javascript I’ve implemented today!

StackOverflow answer…..

<input type="text" name="textbox" value="Test" onclick="this.select()" />

jQuery tablesorter with Font Awesome arrows

I needed to add font awesome arrows to a jQuery.tablesorter table.  The css was a bit tricky and I don’t want to lose it.

    table.tablesorter thead tr th.headerSortUp:after,
    table.tablesorter thead tr th.headerSortDown:after,
    table.tablesorter thead tr th.header:after {
      font-family: FontAwesome;
    }
    table.tablesorter thead tr th.header:after {
      content: "\f0dc";
    }
    table.tablesorter thead tr th.headerSortUp:after {
      content: "\f0de";
    }
    table.tablesorter thead tr th.headerSortDown:after {
      content: "\f0dd";
    }
<table id="table" class="table tablesorter">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
        </tr>
        <tr>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
        </tr>
    </tbody>
</table>

MVC: Disabling buttons on submit

Don’t want to lose this one.  Its some simple javascript that disables the submit buttons on form submission, from here.

$(document).on('invalid-form.validate', 'form', function () {
    var buttons = $('input[type="submit"]');
    setTimeout(function () {
        buttons.removeAttr('disabled');
    }, 1);
});
$(document).on('submit', 'form', function () {
    var buttons = $('input[type="submit"]');
    setTimeout(function () {
        buttons.attr('disabled', 'disabled');
    }, 0);
});

TinyMCE Plugin: DDL with Popup

Recently I had a story asking for some advanced functionality for a new TinyMCE button. I broke down the requirements to the following.  I created a JSFiddle to show it working.

  • Custom TinyMCE drop down menu
  • When a menu item is selected it should insert the menu value into the editor at the cursor
  • Last item on the menu will show a popup
  • On the popup have a text box for entering custom text
  • When Insert is clicked insert the text into the editor at the cursor
Core plugin code – Javascript
$('#Insert').click(function () {
    var text = $('#added-token').val();
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, "{Added Text:" + text + "}");
    $('#token-modal').modal('hide');
    return false;
});
tinymce.PluginManager.add('tokens', function (editor, url) {
    editor.addButton('inserttoken', {
        title: "Insert Token",
        type: 'menubutton',
        text: 'Tokens',
        icon: false,
        onselect: function (e) {
          if (e.control.settings.value != '{MenuItemPopup}') {
            editor.insertContent(e.control.settings.value);
          } else {
            $('#token-modal').modal({ show: true });
          }
        },
        menu: [
            { text: 'Menu Item 1', value: '{MenuItem1}' },
            { text: 'Menu Item 2', value: '{MenuItem2}' },
            { text: 'Menu Item 3', value: '{MenuItem3}' },
            { text: 'Menu Item 4', value: '{MenuItem4}' },                     
            { text: 'Menu Item with Popup', value: '{MenuItemPopup}' }                        
        ],
        onPostRender: function () {
            this.value('{MenuItem1}');
        }
    });    
});
tinymce.init({
    selector: "textarea",
	width:      '100%',
	height:     270,
    plugins:    [ "anchor link tokens" ],
    statusbar:  false,
	menubar:    false,
    toolbar:    "inserttoken anchor | alignleft aligncenter alignright alignjustify",
	rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
});
Core plugin code – HTML
<div id="token-modal" class="modal hide fade" >
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <input type="text" name="group" id="added-token"  />
    </div>
    <div class="modal-footer">
        <button data-dismiss="modal">Close</button>
        <button id="Insert">Insert</button>
    </div>

JIRA: Show @Mentions Feed

During the regular process of working on tickets people will use @mention to alert me when there is a question or something I need to know.  I get emails with this in it but was looking for a way to use JIRA to find them.  I found the following two articles that when combined together gave me the basics of what I need.

First JIRA Advanced Search capabilities are very strong.  I used this article to set up a new filter for the mentions.

Then in this article I got the following query that works fairly good to get a list of the mentions.  It shows me all tickets updated in the last 7 days that I have ever been mentioned in.

(text ~ currentUser()) AND updatedDate >= -7d ORDER BY updated DESC

So I tweaked it to only show tickets with new comments added in the last 7 days instead. This article got me this query.

text ~ currentUser() AND issueFunction in commented("after -7d") ORDER BY updated DESC

It still isn’t exactly what I want but is closer to what I need. It will do for now.

 

 

#TinyMCE: Disable/Enable Brute Force Solution

tinymceI spent a good chunk of yesterday trying to figure out how to change the state of the TinyMCE textbox from readonly to edit mode.  Or to set the values to enable and disable the box properly.  After much trial, error, and research I found this post which links to this post that explains that it is just not possible to do it cleanly.  These posts are a few years old but in the rest of my research I couldn’t find anything that contradicted them.  I tried many different workarounds suggested by other people and each one had something that just didn’t work quite right.  Here is the brute force solution that I came up with:

I created two TinyMCE editors one that is readonly and one that is not.  Then I show and hide them via a button click.

Another problem that I came across is properly showing and hiding the editors.  When I tried to use the built in options they would not show properly when toggling. I had problems with the textareas being set to visible.   To solve this problem I wrapped the original textarea inside a div and I show and hide the divs instead of the actual text area.

I like so many things about the TinyMCE editor but these problems were very frustrating and took up far too much of my time.