cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
dweyrick
Nintex Newbie

How to trigger javascript function when Managed Metadata form control field value changes?

I have a Managed Metadata (MM)  form field and a single line text form field (TXT) on a Nintex form (using version 2.11.4.0).

Goal:  When the value in the MM form field changes, I would like the value to be written to the single line text field.

I will then use the value from the TXT field in a List Lookup control to filter values in the drop-down list for the user.

I have put together the following custom JavaScript functions for to achieve this (with much help from posts by the post 

 How Do You Validate Managed Metadata Field in a Nintex Form:

function SetFieldValue(cbfield, cbfieldval) {
NWF$('#'+ cbfield).val(cbfieldval);
}

function getMDFieldValue(varMDField) {
var mm = NWF$("#" + varMDField);
var mmv = mm.find("input[type='hidden']").val();
return mmv;
}

My MM form field has a Javascript Control ID of jsDeptMMD.   My TXT form field has a Javascript Control ID of jsDeptTXT.

I use the following statement to run the "SetFieldValue" JavaScript function:

SetFieldValue(jsDeptTXT, (getMDFieldValue(jsDeptMMD)));

I have tested this in the IE Developer console by manually typing the command into the IE Console and it works fine to update the TXT form field (see attached screenshot).

However, when I place this same JavaScript function call in the Validation function of the MM form field, it does not seem to fire (nothing appears in the TXT form field).   I have also tried using a Calculated Value form field to update the TXT form field - but changing the MM form field value does not seem to trigger the firing of calculated value form fields.

Been knocking myself out on this for a couple days trying several things but unable to get anything to trigger the javascript function when the MM form field value changes......

Any assistance you can lend me in getting the "SetFieldValue" JavaScript function to run when the value in the MM form field changes will be greatly appreciated!!

0 Kudos
Reply
1 Reply
chaddavis
Nintex Newbie

Re: How to trigger javascript function when Managed Metadata form control field value changes?

Initially, I thought a simple .change function would work. Unfortunately, the managed metadata field doesn't trigger the .change event when a selection is made because the input field is being filled dynamically. I then noticed that the text value is stored in a span element so, I thought I'd try the following code:

[Do Not Use - For Reference Only]

NWF$('#' + mymanagedmetadata).on('DOMSubtreeModified', 'span', function () {
    NWF$('#' + mytextbox).val(
        NWF$('#' + mymanagedmetadata + ' span.valid-text').text()
    );
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However, I hit another road block.

Although this code does work in the console screen of Chrome,

Screenshot of code running successfully and deprecation error.

it caused the form to not load at all when added to the Custom JavaScript section, plus it gave me the following message:

[Violation] Added synchronous DOM mutation listener to a 'DOMSubtreeModified' event. Consider using MutationObserver to make the page more responsive.

which lead me to learn that DOMSubtreeModified has been deprecated (so don't use that code).

I then began looking into the MutationObserver option suggested, but didn't have any luck.

I think MutationObserver is the way to go, but I'm just not sure how to make it work for managed metadata.

Hopefully someone else will be able to help you take it from here.

For anyone else looking into this, the problem lies in the following code of the managed metadata control:

<span id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_nf-Taxonomya398552a_53ef_43b9_a22b_49f4246f8467" class=" nf-associated-control">
     <input name="ctl00$PlaceHolderMain$formFiller$FormView$ctl42$ctl00" type="hidden" id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl00" formcontrolid="01cb44d5-28ce-4337-a142-d61ad73f683a" value="Public Works|4a3aeecd-0078-4b5a-9df7-187e1ac0e3e6">
     <div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01" class="ms-taxonomy ms-taxonomy-height ">
          <div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01controlHolder" class="ms-taxonomy-control-holder" style="width: 100%;">
               <img src="/_layouts/15/images/EMMCopyTerm.png" title="Browse for a valid choice" alt="Browse for a valid choice" tabindex="0" class="ms-taxonomy-browser-button">
               <div class="ms-taxonomy-fieldeditor ms-taxonomy-fieldeditor-standard ms-taxonomy-writing" title="Add Terms" style="width: 278px;">
                    <div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01editableRegion" contenteditable="true" class="ms-taxonomy-writeableregion ms-inputBox  ms-rtestate-write ms-inputBoxActive" title="Search for Term" disableribboncommands="True" allowmultilines="false" restrictpastetotext="True" style="height: calc(100% - 6px);" role="textbox" aria-autocomplete="both" aria-multiline="true" aria-label="Rich text editor" rtedirty="false">
                         <span class="valid-text" title="">
                              Public Works
                              <span id="ms-rterangecursor-start" aria-hidden="true"></span>
                              <span id="ms-rterangecursor-end" aria-hidden="true"></span>
                         </span>
                    </div>
               </div>
          </div>
          <div id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl01suggestionsContainer" class="ms-taxonomy-suggestion-container ms-rtefocus-invalid ms-taxonomy-hidden" unselectable="on">
               <div class="ms-taxonomy-suggestion-holder" unselectable="on"></div>
               <img src="/_layouts/15/images/CornerGrip.gif" unselectable="on" class="ms-taxonomy-panel-resizer">
          </div>
     </div>
</span>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You need to find a way to catch when the text value of this span tag (lines 8-12 above) changes:

<span class="valid-text" title="">
     Public Works
     <span id="ms-rterangecursor-start" aria-hidden="true"></span>
     <span id="ms-rterangecursor-end" aria-hidden="true"></span>
</span>
‍‍‍‍‍

Or when this input field's value (line 2 above) changes:

<input 
     name="ctl00$PlaceHolderMain$formFiller$FormView$ctl42$ctl00"
     type="hidden"
     id="ctl00_PlaceHolderMain_formFiller_FormView_ctl42_ctl00"
     formcontrolid="01cb44d5-28ce-4337-a142-d61ad73f683a"
     value="Public Works|4a3aeecd-0078-4b5a-9df7-187e1ac0e3e6"
>
‍‍‍‍‍‍‍

but you only want to retrieve the value before the pipe | in this instance.

0 Kudos
Reply