This project has moved and is read-only. For the latest updates, please go here.

GetSPField - Detect field change on page and call routine

Jul 22, 2016 at 6:09 PM
On an EditForm.aspx page I have a routine to hide/unhide a field based on the change of another field. It works fine on pageload, but I want to fire the change on the page itself if the user makes a change. This is a managed metadata field. What is the correct syntax to create the event? Thanks for the help!
$(document).ready(function () {
    var statusField = SPUtility.GetSPField('Status');
    var showOrHideField = function() {
        var statusFieldValue = statusField.Controls.value.substr(0,statusField.Controls.value.search("\\|"));
        if(statusFieldValue === 'New') {
            SPUtility.HideSPField('Comment');
        }
        else {
            SPUtility.ShowSPField('Comment');
        }
    };
    showOrHideField();

// none of these options worked
    $(statusField.Dropdown).change(function() { alert('Changed'); });
    $(statusField.Dropdown).on('change', function() { alert('Changed'); });
    $('#Status').bind ("change", function(){ showOrHideField(); });
    $('#Status').trigger('change');
    $('#Status').change(function(){ })
    $('#Status'.Dropdown).on('change', showOrHideField);
Jul 22, 2016 at 7:12 PM
Because this is a managed metadata (taxonomy) field a change event will not be triggered due to the way the field is implemented. Therefore one way to solve the issue is to create a function to listen for changes. I found a listener function and added it to your code. It seems to have the desired result, every time the metadata field is updated the showOrHideField function is run.
$(document).ready(function () {
    var statusField = SPUtility.GetSPField('Status');
    var showOrHideField = function() {
        var statusFieldValue = statusField.Controls.value.substr(0,statusField.Controls.value.search("\\|"));
        if(statusFieldValue === 'New') {
            SPUtility.HideSPField('Comment');
        }
        else {
            SPUtility.ShowSPField('Comment');
        }
    };
    //run at startup
    showOrHideField();
    
     //listener to monitor for change to taxonomy field 
     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
           showOrHideField();
       }    
    }
    ExecuteOrDelayUntilScriptLoaded(initTaggingControl, 'ScriptForWebTaggingUI.js');
I found the listener function from a couple of sources:
http://sharepoint.stackexchange.com/questions/160833/jquery-to-execute-on-change-of-taxonomy-field
https://blog.vgrem.com/2013/01/23/using-sharepoint-taxonomywebtaggingcontrol-control-access-and-manipulate-from-client-side/
Marked as answer by CaveBay on 7/22/2016 at 12:27 PM
Jul 22, 2016 at 8:28 PM
Perfect, works great, thanks Josh!