While adding the required-tag and moderator-only-tag in the favorite tag section, initially those tags doesn't add with its respective CSS classes required-tag and moderator-tag. But after refreshing the page those CSS classes are adding properly.

For example I'm adding one required tag bug, one standard tag api and one moderator-only-tag status-completed. The proper CSS classes are adding after the refresh the page only.

The GIF file below contains the details:

GIF file explaining the favorite tag addition process


Looking at the source, it seems the cause is because the class post-tag is hardcoded into the function that adds those links:

var saveTags = function (tagName, spanName, preferenceId, tagClass, focus, clientOnly) {
    var tags = $(tagName).val();
    var tagsSplit = sanitizeAndSplitTags(tags, /* allowWildcards = */true);
    var duplicate = false;
    var tagQuery = tagClass.split(' ').map(function (val) { return val.trim() ? '.' + val.trim() : ''; }).join(''); // ' foo  bar' -> '.foo.bar'

    for (var i = 0; i < tagsSplit.length; i++) {
        if ($.trim(tagsSplit[i]).length != 0) {
            var existing = $(spanName).find(tagQuery);
            existing.each(function () {
                if ($(this).text() == tagsSplit[i]) {
                    $(this).fadeTo(500, 0.1).fadeTo(500, 1);
                    duplicate = true;

            if (!duplicate) {
                var encodedTag = encodeURIComponent(tagsSplit[i]);
                var link = $('<a>')
                        id: tagsSplit[i],
                        href: '/questions/tagged/' + encodedTag,
                        'class': tagClass,
                        title: (function(n){return"show questions tagged '"+n.tag+"'"})({tag:tagsSplit[i]}),
                $(spanName).append(' ');//savePreference wants the tags space delimited.

            duplicate = false;

    if (focus) $(tagName).focus();

    if (!clientOnly)
        savePreference(preferenceId, $(spanName).text());

The tagClass parameter is sent from:

saveTags("#interestingTag", "#interestingTags", 20, "post-tag user-tag", true);

post-tag user-tag is what seems to set the class. So this might not be as simple as saying required-tag or moderator-tag, because some check will need to be made to check what type of tag it is...

In a deeper look, I found:

function initTagRenderer(required, moderator_only) {
    if (window.tagRenderer)

    // if link_root is given, the resulting URL is absolute, and required/moderator_only are ignored (because those are about *this* site)
    window.tagRendererRaw = function (tag, link_root, tagName) {
        link_root = link_root || "";
        tagName = tagName || "a";
        var extra_class = "";
        if (!link_root) {
            if (required && $.inArray(tag, required) > -1)
                extra_class = "required-tag";
            else if (moderator_only && $.inArray(tag, moderator_only) > -1)
                extra_class = "moderator-tag";

        var result = $("<" + tagName + ">")
        if (tagName.toLowerCase() === "a") {
                rel: 'tag',
                href: link_root + "/questions/tagged/" + encodeURIComponent(tag),
                title: (function(n){return"show questions tagged '"+n.tag+"'"})({tag:tag}),
        return result.outerHTML();
    window.tagRenderer = function (tag, link_root, tagName) {
        return $(tagRendererRaw(tag, link_root, tagName));

so it seems there already is a moderator_only array used to check tag types...

| improve this answer | |
  • 1
    I'm just posting this because it was interesting and I think other could find it interesting as well! :) – ᔕᖺᘎᕊ Feb 16 '16 at 19:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .