JQuery to execute on change of taxonomy field

Question

I am trying to find a way to auto populate some values whenever I detect a change in taxonomy selection (ClientPeoplePicker control), how can I achieve this using jquery?

This is what I currently have:

 $("[id*='taxDepartment']").change( function() {
    alert('test');
});

Answer 1

When the value in Taxonomy picker control (ScriptForWebTaggingUI) is changed, the event Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onTextChanged is triggered by default.

This custom event could be registered for Taxonomy picker control as demonstrated below:

function initTaggingControl() {
    RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, onCustomTextChanged));
}

function onCustomTextChanged(sender, args) {
   if(args.editableRegion.innerText.length > 0){  //if value is specified?
       console.log(args.editableRegion.innerText);  //print term label
   }    
}
ExecuteOrDelayUntilScriptLoaded(initTaggingControl, 'ScriptForWebTaggingUI.js');

In the specified example term label will be printed every time once the term is selected.

You also might be interested to find more details about ScriptForWebTaggingUI control in this post.

Answer 2

Another solution could be override onblur function, this way the code not trigger every keydown. Still, the inserted value is not validated yet.

function initTaggingControl() {
   RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionBlurEvent, Function.createDelegate(null, onCustomBlur));
}

function onCustomBlur(sender, args) {
   if (args.oldEditableRegion.parentNode.parentNode.parentNode.FieldName == "FieldName") {
      if (args.oldEditableRegion.innerText.length > 0) {
         console.log(args.oldEditableRegion.innerText);
      }
   }
}

Answer 3

As textboxes don´t fire the onchange Event when the values are inserted by script but only by user manually this won´t work.

You will have to attach/overwrite some builtin-Taxonomy scripts to execute your code.

Answer 4

I noticed that none of the answers here were accepted, and thought that maybe the reason why is in OP's comment to Vadim Gremyachev's answer, which is that OP wants a way to detect when the term is resolved, not detect a "change" on every keypress.

I was looking for similar functionality, tried Vadim's (and group's) answers, and was dissatisfied with both. After playing around some more, I discovered that when the term "resolves", SharePoint puts the text into a span with the class valid-text (presumably to draw the underline).

Based on that, this is what I have come up with to detect when a term changes and is resolved in the taxonomy field.

Keep in mind - this is for SP 2013 and a single select taxonomy field only. I am not sure at all if this will work for multi-select fields or on any other version of SharePoint.

(Also, I'm using jQuery, but you could adapt this to vanilla JS by using some other DOM ready event.)

function handleTaxonomyFieldChange (mutations) {
    var added = false;
    var removed = false;
    mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(addedNode) {
            if (addedNode.className === 'valid-text') {
                added = true;
            }
        });
        mutation.removedNodes.forEach(function(removedNode) {
            if (removedNode.className === 'valid-text') {
                removed = true;
            }
        });
    });
    if (added) {
        console.log('valid text added');
        // call some other function to do what
        // you want to do when a term is resolved
    }

    if (removed) {
        console.log('valid text removed');
        // call some other function if you have to
        // do any clean up if no term is resolved
    }
}

$(document).ready(function () {
    var taxObserver = new MutationObserver(handleTaxonomyFieldChange);
    // obviously change the selector to suit your environment / field name
    taxObserver.observe($('div[id^="MyTaxField_"].ms-taxonomy-writeableregion')[0], { childList: true });
});