Evaluating each ProductID in a Repeating Section


Badge +2

Hi all,

I have a repeating section containing several controls and javascript to handle each step in the process.  A product id (single line textbox) first accepts input and upon change, it calls a web service to validate the id and also to get some data about the product to then display next to it.  The web service call is working just fine, however it is only getting called on the first row's product id control.  Additional rows are not calling the web service.  

I am using javascript reference ("jsvProductID") for the control.

Here is my javascript:

NWF$(document).ready(function () {

NWF$('#' + jsvProductID).change(function () { event_LookupProduct(); });

});


function event_LookupProduct() {
var lookupValue = NWF$("#" + jsvProductID).val();
NWF$.ajax({
type: "GET",
url: "http://company.org/myservice/Rest/ProductSummary/ProductId=" + lookupValue,
dataType: "json",
success: function (response, type, xhr) {
onEquipmentLookupSucceeded(this, response);
},
error: function (xhr) {
window.alert("error: " + xhr.statusText);
}
});
return false;
}


15 replies

Userlevel 5
Badge +14

as you've noticed, custom handlers are not copied to new RS rows if rows are created at runtime.

you will need to write your own Before- or After- row added handler and within it to assign your onchange handler to respective controls

have a look here for RS events to capture JavaScript events in Nintex Forms 

note you will need to correctly identify a RS row which contains a control you need to assign a onchange handler to, see an example here https://community.nintex.com/message/47277-re-custom-validation-function-not-fired-on-repeating-section?commentID=47277#… 

Badge +2

Thanks for your reply‌,

Unfortunately, I have read the RS events and followed your recommended example but have not been able to get a simple example of this to work.  To keep things simple I tried to create a new form that had just a single line textbox on a repeater control, with the goal of entering anything in the textbox and receiving an alert (triggered by the change event of the textbox) that shows the value of the textbox.  When I run the form and input a value into the first textbox, nothing happens.  When I add a row and input a value into the new row's text box then the alert pops up but the value is undefined.  When I add a third row and do the same, then the alert pops up twice again with an undefined value. 

It seems that I am missing something here, and I am not very experienced in JavaScript.  I am hoping you might be able to show a simple demo of this in action.   

Userlevel 5
Badge +14

could you share your code?

Badge +2

Sure thing.  Again, to keep it simple, I am only using a single text box within a repeater control and looking for the alert popup to show me only the value of the textbox that was changed.

 

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

 

NWF$(".control-id").change(function () {
 var lookupValue = NWF$('.control-Id').val();  
 alert(lookupValue);
 });

 

repeaterRow.find(".nf-associated-control")[0].change=NWF$(repeaterRow.siblings()[1]).find(".nf-associated-control")[0].change;
repeaterRow.find(".nf-associated-control")[0].Validators =
NWF$(Page_Validators).filter(function(idx,elem){
return elem.controltovalidate==repeaterRow.find('.nf-associated-control')[0].id;
})
});

Userlevel 5
Badge +14

I haven't said a script on a link I posted is directly solution for your problem and it will work with just copy&paste laugh.png

it should have been just an example how to identify current repeater row.

try this

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function (){
     var repeaterRow = NWF$(arguments[0][0]);
     repeaterRow.find('.TextBoxClass input.nf-associated-control').change(TextBoxChangeHandler);
});

function TextBoxChangeHandler(evt){
  alert('changed='+evt.target.value);
}

TextBoxClass is a class assigned to text control onchange handler should be attached.

204028_pastedImage_2.png

Badge +2

Thanks, That worked great Marian Hatala‌!  The one remaining thing I still have not figured out is how to best handle the 1st row and do the same alert pop-up when it's value gets changed.  I gave this code a try

NWF$('.TextBoxClass').change(function () {

var daId = NWF$('#' + jsvTextBoxClass).val();

alert('changed=' + daId);

});

 

 

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

var repeaterRow = NWF$(arguments[0][0]);

repeaterRow.find('.TextBoxClass input.nf-associated-control').change(TextBoxChangeHandler);

});

function TextBoxChangeHandler(evt) {

alert('changed=' + evt.target.value);

}

but it pops the alert box up every time one of the textboxes in the other rows are also changed.  How do I do that?

Userlevel 5
Badge +14

following should work

NWF.FormFiller.Events.RegisterAfterReady(function () {  
  NWF$('.RSClass').find('.TextBoxClass input.nf-associated-control').change(TextBoxChangeHandler);
})

RSClass is CSS class set for repeating section control.

Badge +2

Thanks again ‌!  This works fine.  I appreciate the assistance.

Userlevel 5
Badge +14

great you got it working.

may I ask to mark as correct one of my posts? so that others are not confused since as you've written, your code doesn't work correctly.

Badge +2

Of coarse...I already have done so.

Userlevel 5
Badge +14

not sure what you did but still your post shows up marked as correct.

note only one post can be marked as correct.

Badge +2

You provided the main answer on June 9th, which I have marked as correct.  Your answer today is also correct as both were needed to complete the goal.  I hope this make sense to you now.

Userlevel 5
Badge +14

you have marked my post just helpfull, not correct.

as correct answer you have marked your post

204119_pastedImage_1.png

correct answers are promoted by a search tool, as well as highlighted at the top of page, right after the question.

that help others to find a solution to the same/similar problem faster.

as per now, marked post do not provide fully correct working answer to the original question.

as per two possible correct answers, you can choose either one.

however, I think first one fits the most to the original question, since you stated it works for first line but not the others.

Badge +2

Ahh, I see that now.  I have marked "your" answer as correct.  And I agree that the first answer you gave best qualifies as the correct one.

Userlevel 5
Badge +14

great we finally agrred happy.png

Reply