I am working on a sharepoint online classic team site. and inside the classic team site i have 2 lists:-

  1. Responsibility List.
  2. Customer site List.
  3. Both of the above lists have the same managed metadata columns named "ResponsibilityCustomer" which is linked to a term set.
  4. Inside the Responsibility list's new/edit forms,i am trying using jQuery to query the "Customer Site" list's items which are linked to the same "ResponsibilityCustomer", and populate a lookup list named $("select[id*='ResponsibilityCustomerSite_']") with the results.

Here is the jQuery which i am using inside the Responsibility List's New/Edit forms :-

$(document).ready(function() {
    //listen for the managed metadata columns changes
    function initTaggingControl() {
        RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, onCustomTextChanged));


    function onCustomTextChanged(sender, args) {
        var ll = $(args.editableRegion).parents().length;
        if (args.editableRegion.innerText.length > 0) {

            for (var j = 0; j < ll; j++) {
                var a = $(args.editableRegion).parents()[j].FieldName;

                if (a === "Responsibility Customer") {


    function getCurrentMainCategoryID() {
        var currentMainCatId = 0;
        var respsubcategory = $("select[id*='ResponsibilitySubCategory']");//this is a dro-down

        if (respsubcategory !== null && respsubcategory !== '') {
            // do something

            var currentsubcat = $("select[id*='ResponsibilitySubCategory'] :selected").text();
            //code goes here


    function customernamefun() {
        //customer managed metadta field
        var customer = $("div[id*='ResponsibilityCustomer_']");
        // the Lookup drop-down to be popualted with the below ajax call
        var customersite = $("select[id*='ResponsibilityCustomerSite_']");
        var currentcustomersite = customersite.val();
        if (customer !== null && customer !== '') {
            // do something
            //get the value for the managed metadata term
            var currentcustomer = $("div[id*='ResponsibilityCustomer_']").find("span").text();
            if (currentcustomer == '' || currentcustomer == null) {


            var results = "";
            //query the "Customer Site" list based on the managed metdata term value
            var body = {
                'query': {
                    '__metadata': {
                        'type': 'SP.CamlQuery'
                    'ViewXml': "<View><Query><Where><Eq><FieldRef Name='ResponsibilityCustomer'/><Value Type='TaxonomyFieldType'>" + currentcustomer + "</Value></Eq></Where></Query></View>"

                url: "/_api/web/lists/getbytitle('Customer%20Site')/GetItems",
                method: "POST",
                contentType: "application/json;odata=verbose",
                async: false,
                data: JSON.stringify(body),
                headers: {
                    "Accept": "application/json; odata=verbose",
                    "X-RequestDigest": $('#__REQUESTDIGEST').val()
                success: function(data2) {

                    if (data2.d.results.length > 0) {
                        results2 = data2.d.results;
                        for (var ii = 0; ii < results2.length; ii++) {
                            //populate the lookup drop-downlist
                            if (results2[ii].Id == currentcustomersite)
                                customersite.append(new Option(results2[ii].Title, results2[ii].Id, true, true));
                                customersite.append(new Option(results2[ii].Title, results2[ii].Id));


                    if (data2.d.results.length <= 0) {
                error: function(data) {


            return results;
    ExecuteOrDelayUntilScriptLoaded(initTaggingControl, 'ScriptForWebTaggingUI.js');
    ExecuteOrDelayUntilScriptLoaded(getCurrentMainCategoryID, "sp.js");
    ExecuteOrDelayUntilScriptLoaded(customernamefun, "sp.js");


now the above code is working well on FireFox + IE-11. but on google chrome and on Edge, it is not working on most of the cases. where i am facing these 2 issues on Edge & Chrome:-

  1. Now as shown in the above code, i have 2 test alerts and on FireFox & IE-11, the list forms will load then the alerts will be shown. so inside the 2 alerts i will get the correct values in-case the related fields contain values. on the other hand on Chrome and Edge, while the forms is loading the alerts will start showing, and i will get the correct values inside the alert(currentsubcat); (where the currentsubcat represents a drop-down option), while inside this alert("cusotmname"+currentcustomer); the currentcustomer will always be empty. here is how the alerts will be shown while the list forms are still loading on Edge and Chrome:- Here is the alert showing the drop-down value correctly:- enter image description here

While this is the alert alert("cusotmname"+currentcustomer); for the managed metadata column which will be empty:- enter image description here

Here are the 2 fields i am showing the alerts for:- enter image description here

  1. second issue. On Edge and Chrome, if i start typing in the managed metadata column, and i select the related item from the auto-complete results, the lookup list will never get populated, while if i select the term by clicking on the taxonomy-browser-cutton (highlighted in red in the above picture), the lookup list will get populated correctly..

so can anyone adivce on this.. how i can detect when a managed metadta field is chnaged ?and populate the lookup list? and why my code is only working on FireFox and IE-11??

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.