javascript not repeated in Repeating section nintex

  • 28 March 2018
  • 4 replies
  • 15 views

Badge +2

Hi I have a drop down list containing (A & B)

if A is selected

column 1 (single line of text) will show

column 2 (people picker) will be cleared 

else B

column 2 (people picker )will show

Column 1 (singline of text) will be blank

this is in a repeating section..

Error: this action "on change" only happened once.


NWF.FormFiller.Events.RegisterAfterReady(function () {

NWF$("#" + dropdownlist).on('change', function(){
var dropdownlistSelected = NWF$("#" + dropdownlist).attr("selected", true);

   if (dropdownlistSelected.val() == "A") {

//column2
    var xx1 = new NF.PeoplePickerApi('#' + xx);
      xx1.clear();


   } else if(dropdownlist.val() == "B") {

//set blank
    NWF$("#" + Column1).val('').trigger("change").trigger("blur");
   }
});



});


4 replies

Userlevel 5
Badge +14

Instead of targeting your controls by way of the id attribute, use the class attribute instead. 

IDs are not guaranteed inside of a Repeating Section because they change each time a Row is Added or Deleted, meaning you would need to create a new Event Handler each for every row. 

Using classes (as shown in the example below, I have used the class "fancyClassName"), you can easily handle ALL of the changes to any control that has said class. 

NWF.FormFiller.Events.RegisterAfterReady(function () { 

NWF$(".fancyClassName.nf-filler-control").on("change", function(event){
  var eventControl = NWF$(event.target);
  var eventControlValue = eventControl.val();
  var eventControlContainer = eventControl.closest(".nf-filler-control"); 
  var sourceContext = NWF.FormFiller.Functions.GetParentContext(eventControl);

  var singleLineTextControl = sourceContext.find(".singleLineTextClass.nf-filler-control");
  var peoplePickerControl = sourceContext.find(".peoplePickerClass.nf-filler-control");

  console.log("Event Fired! Control Value Changed To: " + eventControlValue);

});
});

This is a bit of a robust example, but as you can see it's targeting all controls that have the fancyClassName class as well as the nf-filler-control class which is automatically given to the outermost <div> of a Control. 

If you wanted to target a singleLineText control (which in this case is shown having the class singleLineTextClass) or a people Picker controls (shown as having the class peoplePickerClass), you would simple need to include those classes onto the controls in question using the 'CSS class' entry on the Ribbon: 

214063_pastedImage_1.png

If you want to play around a bit more to see how you can alter things, Preview your form and press F12 to open the developers console (this works best in Chrome but you can also mess around in IE though you will get a headache), and a 'debugger;' command just after the console call (or just copy the code below): 

NWF.FormFiller.Events.RegisterAfterReady(function () { 

NWF$(".fancyClassName.nf-filler-control").on("change", function(event){
  var eventControl = NWF$(event.target);
  var eventControlValue = eventControl.val();
  var eventControlContainer = eventControl.closest(".nf-filler-control"); 
  var sourceContext = NWF.FormFiller.Functions.GetParentContext(eventControl);

  var singleLineTextControl = sourceContext.find(".singleLineTextClass.nf-filler-control");
  var peoplePickerControl = sourceContext.find(".peoplePickerClass.nf-filler-control");

  console.log("Event Fired! Control Value Changed To: " + eventControlValue);
  debugger;

});
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Badge +2

Caroline Jung‌ pls advise on the below code if there is any error

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function () {
  var repeaterRow = NWF$(arguments[0][0]);

if (NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('css-clientSection')) { /// not validating from here on.
alert('new row has been added to the Client Section repeater'); 

   var clientType = NWF$(repeaterRow).find('.css-clientType').find('option:selected');
   var externalClient = NWF$(repeaterRow).find('.css-ExternalClient').find('input');
   var internalClient = NWF$(repeaterRow).find('css-InternalClient').find('input');
alert(clientType);  

clientType.change(function(){

   if (clientType.val() == "= External client") {
    internalClient = new NF.PeoplePickerApi('#' + InternalClientName);
internalClient.clear();
   } else if(clientType.val() == " Internal client") {
    NWF$('.ExternalClientcsscls').val("");
   }
}); 


 }

});

Badge +2

nmarples

Hi i did try your suggestion

it did work but i just want it to be applicable to the current on change items in the repeating section of nintex...

once i change the other repeating items also get change...

NWF.FormFiller.Events.RegisterAfterReady(function() {

//repeating section

NWF$(".css-ClientType.nf-filler-control").on("change", function(event){
var eventControl = NWF$(event.target);
var eventControlValue = eventControl.val();
var eventControlContainer = eventControl.closest(".nf-filler-control");
var sourceContext = NWF.FormFiller.Functions.GetParentContext(eventControl);
var singleLineTextControl = sourceContext.find(".css-InternalClient.nf-filler-control");
var peoplePickerControl = sourceContext.find(".css-ExternalClient.nf-filler-control");
console.log("Event Fired! Control Value Changed To: " + eventControlValue);


if(eventControlValue == "Internal client"){
NWF$('.ExternalClientcsscls').val("");
console.log(eventControlValue == "Internal client");

}else if (eventControlValue == "External client"){
var pp =NWF$('.InternalClientcsscls').val("");
pp.text(""); // clearing people picker not sure how. for css class control
console.log(eventControlValue == "Internal client");
}


});

});

Userlevel 5
Badge +14

can you perhaps post a screenshot of the repeating sections in question so that we can get a better idea about the controls you have, their layout, and relationship with one another? 

Also Control Names, Control Classes, and any other relevant information would be incredibly helpful in allowing people to accurately help with solving a problem. 


Reply