JavaScript Events are not working in Nintex Forms 2013


Badge +2

I refer to Vadim Tabakman blog about Numbering a Repeating Section and JavaScript events in Nintex Forms . But I find the number and field data is not right in Nintex 2013 Form. I check the JavaScript code and find  function "NWF.FormFiller.Events.RegisterRepeaterRowAdded" and "NWF.FormFiller.Events.RegisterRepeaterRowDeleted" not working at all.

This code is working in Nintex 2010 form. But not working in Nintex 2013 form. Any one could help me?

216927_pastedImage_1.png

The JavaScript code:

var rs = null;
NWF$(document).ready(function () {
rs = NWF$('.vtMyRepeatingSection');
window.setTimeout(doWork, 1000); // 1 seconds
});
function doWork() {
NWF$(rs).find('.cssFirstField').find('input').val('wombat');
NWF$(rs).find('.cssSecondField').find('input').val('koala');
fnAddNRows(0);
fnNumberRows();
}
function fnAddNRows(numRows) {
for (i = 0; i < numRows; i++) {
NWF$(rs).find('.ms-addnew').click();
}
}
function fnNumberRows() {
var iID = 0;
var labels = NWF$(rs).find('.vtLabel');
NWF$.each(labels, function (index) {
if (index == 0) NWF$(this).text(labels.length);
else NWF$(this).text(iID);
iID++;
});
}

//Not working
NWF.FormFiller.Events.RegisterRepeaterRowAdded(function () {
var repeaterRow = NWF$(arguments[0][0]);
if (NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('vtMyRepeatingSection')) {
fnNumberRows();
NWF$(repeaterRow).find('.cssFirstField').find('input').val('wombat2');
NWF$(repeaterRow).find('.cssSecondField').find('input').val('koala2');
}
});

//not working
NWF.FormFiller.Events.RegisterRepeaterRowDeleted(function () {
var repeaterControl = NWF$(arguments[0][0]);
if (repeaterControl.hasClass('vtMyRepeatingSection')) {
fnNumberRows();
}
});


2 replies

Userlevel 5
Badge +14

So in that particular blog, someone in the comments actually shows how you can use a built in function to produce Row Numbers that might actually save you some headaches in the future. 

If you create a Calculated Control, you can simply use the formula as shown: 

216938_pastedImage_1.png

216939_pastedImage_2.png

Moving on. The reason your code wasn't working isn't because Form Events aren't working. It's because you were targeting the incorrect parent element. 

Your Nintex Form Events are written like: 

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function() {
  var repeaterRow = NWF$(arguments[0][0]);
  if (NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('vtMyRepeatingSection')) {
    fnNumberRows();
    NWF$(repeaterRow).find('.cssFirstField').find('input').val('wombat2');
    NWF$(repeaterRow).find('.cssSecondField').find('input').val('koala2');
  }
});

NWF.FormFiller.Events.RegisterRepeaterRowDeleted(function() {
  var repeaterControl = NWF$(arguments[0][0]);
  if (repeaterControl.hasClass('vtMyRepeatingSection')) {
    fnNumberRows();
  }
});

In your first event you're defining the repeaterRow as the current row that was added, but then you're targeting a parent element to that Row with the class of .nf-repeater. That particular element, while a parent to the Row, doesn't actually contain the customer css class that you applied to the control. You'd need to go up a few more parent elements (specifically, up to the parent Control Container), before that if statement would be true. 

In your second event, it's the same mistake as the first. The argument being fed into that particular function is actually the 3rd child under the Repeating Section's Container <div> with the class ".nf-repeater". You would once again need to traverse up the tree a bit before you'd reach the containing <div> that would have a custom class on it. 

The below code is a simplified version of what you have and should work at doing what you're trying to accomplish: 

var rs = null;
NWF$(document).ready(function() {
  rs = NWF$('.vtMyRepeatingSection');
  window.setTimeout(doWork, 1000);
});

function doWork() {
  NWF$(rs).find('.cssFirstField').find('input').val('wombat');
  NWF$(rs).find('.cssSecondField').find('input').val('koala');
  fnAddNRows(0);
  fnNumberRows();
}

function fnAddNRows(numRows) {
  for (i = 0; i < numRows; i++) {
    NWF$(rs).find('.ms-addnew').click();
  }
}

function fnNumberRows() {
  var iID = 0;
  var labels = NWF$(rs).find('.vtLabel');

  NWF$.each(labels, function(index) {
    if (index == 0) NWF$(this).text(labels.length);
    else NWF$(this).text(iID);
    iID++;
  });
}

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function(currentRow) {
  if (currentRow.closest(".nf-filler-control").hasClass("vtMyRepeatingSection")) {
    fnNumberRows();
    NWF$(currentRow).find('.cssFirstField').find('input').val('wombat2');
    NWF$(currentRow).find('.cssSecondField').find('input').val('koala2');
  }
});

NWF.FormFiller.Events.RegisterRepeaterRowDeleted(function(innerRepeater) {
  if (innerRepeater.closest(".nf-filler-control").hasClass("vtMyRepeatingSection")) {
    fnNumberRows();
  }
});

Additional notes

If you decide to use the method of counting rows as I show at the top of this post,  you can totally remove all of your custom code to do so. The resulting custom javascript would then look like: 

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function(currentRow) {
  if (currentRow.closest(".nf-filler-control").hasClass("vtMyRepeatingSection")) {
    NWF$(currentRow).find('.cssFirstField').find('input').val('wombat2');
    NWF$(currentRow).find('.cssSecondField').find('input').val('koala2');
  }
});

Which is a whole lot simpler. 

ALSO! Because I have no idea whether or not you comment your code, remember that if you're using the Customer Javascript editor found in the Form Settings, you'll need to use comment blocks (/* some comment */) instead of commented lines (// some comment):

216940_pastedImage_7.png

Using the comment lines tends to usually mess with the rest of the form as it breaks how the <script> tags are generated at runtime and essentially results in code further down the line being commented out. This also has to do with the fact that I don't believe the Custom Javascript editor respects line breaks when you submit the form, which subsequently pushes code that you want behind said Line Comment which also breaks things. 


I hope this helps you to solve your Repeating Section woes. 

Badge +2

Thanks, Megajerk

Your suggestions are very useful.

Reply