Forums

Javascript Ignoring Added Fields in Repeater Area

itpates 27 Mar, 2018
If this is a bug, please let me know and I'll post it over there. If not, please look at my example - I recreated it based on a form I am working on, with just the elements I am having issue with, and the problem still persists. I can create new fields in the preview using the Repeater Area functionality, but I have yet to be able to get javascript to see the new fields, much less affect them. The javascript sees the original fields just fine. I have tried input, and in this example, class as items for the javascript to identify the fields by, but only the original field is affected. The rest are ignored.[file=10291]Repeater_Area_Test_27_Mar_2018_14_34_18.cf6bak[/file]
itpates 29 Mar, 2018
Anyone? Or is this a really stupid question?
GreyHead 29 Mar, 2018
Hi itpates ,

It is not a bug so I have deleted your duplicate post there.

The problem as I understand it is that the 'new' Repeater area elements did not exist when the page loaded so no JavaScript events/actions will have been added to them. You have to re-identify them after they have been added. There is a FAQ showing how to do that with CFv5 - I imagine that something similar will work with CFv6 but I have not yet tested that out.

Bob
itpates 29 Mar, 2018
I found 2 FAQs for v5 that dealt with multiplier areas, but neither of them gave much inspiration on how to initialize new fields to JQuery in V6.
itpates 29 Mar, 2018
This is part of what I had used when I had hand-coded everything back in v4. Not sure where I got this particular bit of code from, but it worked well in v4. I'm trying to move away from hand-coding the form and using the modules instead, so that migration to new versions of CF isn't such a pain.
            $('#btnAdd1').click(function() {
var numa = $('.clonedInputa').length; // how many "duplicatable" input fields we currently have
var newNuma = new Number(numa + 1); // the numeric ID of the new input field being added

// create the new element via clone(), and manipulate it's ID using newNum value
var newElema = $('#checka' + numa).clone().attr('id', 'checka' + newNuma);

// manipulate the name/id values of the input inside the new element
newElema.children('input.checknamea').attr('id', 'namea' + newNuma).attr('value', 'Name on Check').attr('name', 'checklista[' + numa + '][checkname]');
newElema.children('input.checkamounta').attr('id', 'amounta' + newNuma).attr('value', '0.00').attr('name', 'checklista[' + numa + '][checkamount]');

// insert the new element after the last "duplicatable" input field
$('#checka' + numa).after(newElema);

// enable the "remove" button
$('#btnDel1').removeAttr("disabled");

});

$('#btnDel1').click(function() {
var numa = $('.clonedInputa').length; // how many "duplicatable" input fields we currently have
$('#checka' + numa).remove(); // remove the last element

// enable the "add" button
$('#btnAdd1').removeAttr("disabled");

// if only one element remains, disable the "remove" button
if (numa -1 == 1)
$('#btnDel1').attr('disabled','disabled');
});

$('#btnDel1').attr('disabled','disabled');
itpates 30 Mar, 2018
I disagree that this is not a bug. I tried the v5 recommendations and it's FUBAR. I know JQuery works on these sorts of forms just fine because I had it working on v4. What changed to break that? I need this and it should be trivial.
This topic is locked and no more replies can be posted.