cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Workflow Hero

Forms - click event on add repeater row not working inside document ready javascript function

Jump to solution

Hi,

I have this javascript inside of a form. It serves to input data into the form if it was copied from already existing item (data is collected by another JS function and put into localStorage).

Problem is that I do not seem to be able to click on the link to add new rows to repeater section. Please see comments in the code.

NWF$(document).ready(function(){
       var LocationField = NWF$('#' + ddLocationField);
       var VisitReasonField = NWF$('#' + ddVisitReason);
       var IntReqField = NWF$('#' + cbInternetReq);
       var ParkReqField = NWF$('#' + cbParkingReq);
       var SpecificsField = NWF$('#' + mltSpecifics);
       if (localStorage.locVal && localStorage.vReasonVal && localStorage.iIntVal && localStorage.pParkVal && localStorage.sSpecsVal && localStorage.rRepeaterContent && localStorage.HowManyRows) {
            var repeaterContentArr = JSON.parse(localStorage.getItem("rRepeaterContent"));
            var HowManyRowsVal = parseInt(localStorage.HowManyRows);
             LocationField.val(localStorage.locVal);
              VisitReasonField.val(localStorage.vReasonVal);
             if (localStorage.iIntVal=="true") { 
                       IntReqField.click();       THIS WORKS (check box YES/NO)
             }
             if (localStorage.pParkVal=="true") {
                         ParkReqField.click(); THIS WORKS (check box YES/NO)
            }
            if (localStorage.sSpecsVal !="undefined") { 
                 SpecificsField.val(localStorage.sSpecsVal);  
            }  
            var repeaterNewRowLink =  NWF$('.visitors_repeater').find('a');
            for (var i = 1;i < HowManyRowsVal;i++) {
                       repeaterNewRowLink.click(); THIS IS EXECUTED BUT THE ROWS ARE NOT ADDED (new row link on the repeater)
            }
            localStorage.removeItem("locVal");
            localStorage.removeItem("vReasonVal");
            localStorage.removeItem("iIntVal");
            localStorage.removeItem("pParkVal");
            localStorage.removeItem("sSpecsVal");
            localStorage.removeItem("rRepeaterContent");
            localStorage.removeItem("HowManyRows");
}
});

If I wait until the content of the page is visible and then run this manually in the console

 var repeaterNewRowLink =  NWF$('.visitors_repeater').find('a');

repeaterNewRowLink.click();

all works fine and repeater rows are added.

Is there any way how to click that link inside document ready function please?

Many thanx for reply

Jan

 
Labels: (2)
0 Kudos
Reply
5 Replies
Workflow Hero

Re: Forms - click event on add repeater row not working inside document ready javascript function

Jump to solution

Hi

I had similar requirement to add rows dynamically to a repeater, I used the below code, it worked for me.

//add rows
for (var i = 0; i < results.length - 1; i++) {
   NWF$(".rs-timeslots").find(".ms-addnew").click();
}

.rs-timeslots is the css class name given to Repeater Section.

and find ".ms-addnew" class which is out of the box class for "Add New" link, and then call "click()" event.

So, rather trying with element name (a - anchor tag), give a try with its class name (.ms-addnew).

Thanks,

Krishna.

0 Kudos
Reply
Workflow Hero

Re: Forms - click event on add repeater row not working inside document ready javascript function

Jump to solution

Hi Krishna,

This code for clicking on add row works on my other form normally using the same selector. There is a difference though. In the other form this code is trigerred by user action in other form control whereas in this situation I am trying to click that link once DOM is ready, before the user even sees the form on the screen.

Anyways, I gave your suggestion a try and it unfortunatelly did not help. After that I even tried to do the find like this

NWF$('.visitors_repeater').find('.ms-addnew.nf-repeater-addrow-link.nf-ignore-for-calc').click();

.nf-repeater-addrow-link and .nf-ignore-for-calc are also classes of that link according to F12 IE tool but that did not help either.

So, I think that this has to do with a visibility of that element....but I have no idea how to solve it. Some event handler when element becomes visible would be handy here.

0 Kudos
Reply
Workflow Hero

Re: Forms - click event on add repeater row not working inside document ready javascript function

Jump to solution

Hi Jan,

Try replacing your NWF$(document).ready() function with NWF.FormFiller.Events.RegisterAfterReady(). 

Thanks,

Krishna.

Reply
Workflow Hero

Re: Forms - click event on add repeater row not working inside document ready javascript function

Jump to solution

YES! This helped. Many thanx!

Jan

0 Kudos
Reply
Workflow Hero

Re: Forms - click event on add repeater row not working inside document ready javascript function

Jump to solution

Just worth pointing out that if you have a lookup field on your form then using

NWF.FormFiller.Events.RegisterAfterReady(function () {
   if (localStorage.locVal) { 
         var LocationField = NWF$('#' + ddLocationField);
         LocationField.val(localStorage.locVal);
         localStorage.removeItem("locVal");
   }
});

will not fill in the the field. No idea why but it will just stay on Please select a value option.

You need to use

NWF$(document).ready(function(){ 
   if (localStorage.locVal) { 
         var LocationField = NWF$('#' + ddLocationField);
         LocationField.val(localStorage.locVal);
         localStorage.removeItem("locVal");
   }
});

0 Kudos
Reply