How to set Taxonomy Control using jQuery

Question

I have a list with managed metadata column. In the new and edit form, I would like to set the value of that field using javascript.

Is it possible to set the Taxonomy Control (TaxonomyWebTaggingControl) from client side using javascript/jQuery. I have tried to change the value in span tag (rendered by the control) to the desired value, but it doesn't seem to be working.

Answer 1

To manipulate term values in TaxonomyWebTaggingControl control we’ll use Client Object model for Taxonomy, in particular ControlObject capabilities (it is not documented).

In order set the Taxonomy Control (TaxonomyWebTaggingControl) value on the client side the following function could be used:

//Set Taxonomy ControlObject value
//webTaggingId - TaxonomyWebTaggingControl ID 
//termValue - represents a single value held in a TaxonomyField object using the following format: NameOfTerm|GUIDOfTerm 
function setTaxonomyControlObjectValue(webTaggingId, termValue) {
    var webTaggingCtl = $get(webTaggingId);
    var taxCtlObj = new Microsoft.SharePoint.Taxonomy.ControlObject(webTaggingCtl);
    taxCtlObj.enableControl(true);
    taxCtlObj.setRawText(termValue);
    taxCtlObj.retrieveTerms();
}

Note:

a) to find TaxonomyWebTaggingControl on the client side webTaggingId identifier is used, that corresponds to ContainerId property of control

b) termValue represents a single value held in a TaxonomyField object using the following format: NameOfTerm|GUIDOfTerm

---

Usage

Example 1. Setting TaxonomyWebTaggingControl control value

   //Example 1. Setting TaxonomyWebTaggingControl control value during event (page load, button click and etc.)
    function initCountryTaggingControl() {
        var countriesControlId = "ctl00_PlaceHolderMain_ctl03";
        var continentTermValue = "Africa|43f3b1e7-e40c-45d2-a613-88643668d373";
        setTaxonomyControlObjectValue(countriesControlId, continentTermValue);
    }


ExecuteOrDelayUntilScriptLoaded(initCountryTaggingControl, 'ScriptForWebTaggingUI.js');

Note:

initCountryTaggingControl is executed after script ScriptForWebTaggingUI.js is loaded

---

P.S. If you are interested how TaxonomyWebTaggingControl works on the client side and how to access and manipulate TaxonomyWebTaggingControl on the client side please follow this article.

Answer 2

The solution provided by Vadim above didn't work for me, although it did help me towards an answer. I achieved this in two parts -

1. Via jQuery / DOM get the editable DIV (the one with ID = ContainerId + 'editableRegion') and set the text value of the term you want (note, I didn't find it necessary to set the GUID of the term as well, so just "Africa" in Vadim's example).

2. Get the ContainerId (i.e. as above, but just an ID without the 'editableRegion' part - in some solutions you see this as .parentNode.parentNode.parentNode) as a HtmlDivElement not a jQuery object. If you have it via jQuery do var myDivElement = myJQueryObject.get(0);. Then call a Microsoft function:

   var controlObject = new Microsoft.SharePoint.Taxonomy.ControlObject(document.getElementById(myDivElement));
   controlObject.validateAll();
   

You should then have a validated term (i.e. black text with a solid underline, not red text with a dashed underline)

Answer 3

For some reason Vadim's solution didn't work for me either, but I managed to get it work using both Vadim's and John's code.

function setTaxonomyControlObjectValue(webTaggingId, termValue) {
   var divId = $get(webTaggingId).children[1].id;
   var webTaggingCtl = $get(divId);
   var taxCtlObj = new Microsoft.SharePoint.Taxonomy.ControlObject(webTaggingCtl);
   taxCtlObj.enableControl(true);
   taxCtlObj.setRawText(termValue);
   taxCtlObj.retrieveTerms();
   taxCtlObj.validateAll(); // with this line you don't need term guid, just name of the term
}