I am running a modified version of a formset script that was found in GITHUB.
;(function($) {
$.fn.formset = function(opts)
{
var options = $.extend({}, $.fn.formset.defaults, opts),
flatExtraClasses = options.extraClasses.join(' '),
totalForms = $('#id_' + options.prefix + '-TOTAL_FORMS'),
initialForms = $('#id_' + options.prefix + '-INITIAL_FORMS'),
currentFormIndex = parseInt(totalForms.val()),
maxForms = $('#id_' + options.prefix + '-MAX_NUM_FORMS'),
minForms = $('#id_' + options.prefix + '-MIN_NUM_FORMS'),
childElementSelector = 'input,select,textarea,label,div',
$$ = $(this),
applyExtraClasses = function(row, ndx) {
if (options.extraClasses) {
row.removeClass(flatExtraClasses);
row.addClass(options.extraClasses[ndx % options.extraClasses.length]);
}
},
updateElementIndex = function(elem, prefix, ndx) {
var idRegex = new RegExp(prefix + '-(\\d+|__prefix__)-'),
replacement = prefix + '-' + ndx + '-';
if (elem.attr("for")) elem.attr("for", elem.attr("for").replace(idRegex, replacement));
if (elem.attr('id')) elem.attr('id', elem.attr('id').replace(idRegex, replacement));
if (elem.attr('name')) elem.attr('name', elem.attr('name').replace(idRegex, replacement));
},
hasChildElements = function(row) {
return row.find(childElementSelector).length > 0;
},
showAddButton = function() {
return maxForms.length == 0 ||
(maxForms.val() == '' || (maxForms.val() - totalForms.val() > 0));
},
showDeleteLinks = function() {
return minForms.length == 0 ||
(minForms.val() == '' || (totalForms.val() - minForms.val() > 0));
},
insertDeleteLink = function(row) {
var delCssSelector = $.trim(options.deleteCssClass).replace(/\s+/g, '.'),
addCssSelector = $.trim(options.addCssClass).replace(/\s+/g, '.');
var delButtonHTML = document.createElement("a");
delButtonHTML.classList.add(options.deleteCssClass);
delButtonHTML.textContent = options.deleteText;
delButtonHTML.id = "deleteID";
if (options.deleteContainerClass) {
row.find('[class*="' + options.deleteContainerClass + '"]').append(delButtonHTML);
} else if (row.is('TR')) {
row.children(':last').append(delButtonHTML);
} else if (row.is('UL') || row.is('OL')) {
row.append('<li>' + delButtonHTML + '</li>');
} else {
row.append(delButtonHTML);
}
if (!showDeleteLinks()){
row.find('a.' + delCssSelector).hide();
}
row.find('a.' + delCssSelector).click(function() {
var result = confirm("Are you sure you want to Delete3?");
if (result) {
var row = $(this).parents('.dynamic-form');
var itemIdInput = row.find('input:hidden[id $= "-id"]');
var itemId = itemIdInput.val();
var deleteInput = `<input type="hidden" name="line_items_to_delete" value="${itemId}">`; // Update here....
if( $(deleteInput).val() ) {
$('#line_items_to_delete').append(deleteInput); // Update here....
}
var row = $(this).parents('.' + options.formCssClass),
del = row.find('input:hidden[id $= "-DELETE"]'),
buttonRow = row.siblings("a." + addCssSelector + ', .' + options.formCssClass + '-add'),
forms;
if (del.length) {
del.val('on');
row.hide();
forms = $('.' + options.formCssClass);
totalForms.val(forms.length);
} else {
row.remove();
forms = $('.' + options.formCssClass).not('.formset-custom-template');
totalForms.val(forms.length);
}
for (var i=0, formCount=forms.length; i<formCount; i++) {
applyExtraClasses(forms.eq(i), i);
if (!del.length) {
forms.eq(i).find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, i);
});
}
}
if (!showDeleteLinks()){
$('a.' + delCssSelector).each(function(){$(this).hide();});
}
if (buttonRow.is(':hidden') && showAddButton()) buttonRow.show();
if (options.removed) options.removed(row);
return false;
}
});
};
$$.each(function(i) {
var row = $(this),
del = row.find('input:checkbox[id $= "-DELETE"]');
if (del.length) {
if (del.is(':checked')) {
del.before('<input type="hidden" name="' + del.attr('name') +'" id="' + del.attr('id') +'" value="on" />');
row.hide();
} else {
del.before('<input type="hidden" name="' + del.attr('name') +'" id="' + del.attr('id') +'" />');
}
$('label[for="' + del.attr('id') + '"]').hide();
del.remove();
}
if (hasChildElements(row)) {
row.addClass(options.formCssClass);
if (row.is(':visible')) {
insertDeleteLink(row);
applyExtraClasses(row, i);
}
}
});
if ($$.length) {
var hideAddButton = !showAddButton(),
addButton, template;
if (options.formTemplate) {
template = (options.formTemplate instanceof $) ? options.formTemplate : $(options.formTemplate);
template.removeAttr('id').addClass(options.formCssClass + ' formset-custom-template');
template.find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, '__prefix__');
});
insertDeleteLink(template);
} else {
if (options.hideLastAddForm) $('.' + options.formCssClass + ':last').hide();
template = $('.' + options.formCssClass + ':last').clone(true).removeAttr('id');
template.find('input:hidden[id $= "-DELETE"]').remove();
template.find(childElementSelector).not(options.keepFieldValues).each(function() {
var elem = $(this);
if (elem.is('input:checkbox') || elem.is('input:radio')) {
elem.attr('checked', false);
}
if (elem.is('select')) {
elem.append('<option style="display:none" selected value="">Optional</option>');
}
else {
elem.val('');
}
});
}
options.formTemplate = template;
var addButtonHTML = '<a class="' + options.addCssClass + '" href="javascript:void(0)">' + options.addText + '</a>';
if (options.addContainerClass) {
var addContainer = $('[class*="' + options.addContainerClass + '"');
addContainer.append(addButtonHTML);
addButton = addContainer.find('[class="' + options.addCssClass + '"]');
} else if ($$.is('TR')) {
var numCols = $$.eq(0).children().length,
buttonRow = $('<tr><td colspan="' + numCols + '">' + addButtonHTML + '</tr>').addClass(options.formCssClass + '-add');
$$.parent().append(buttonRow);
addButton = buttonRow.find('a');
} else {
$$.filter(':last').after(addButtonHTML);
addButton = $$.filter(':last').next();
}
if (hideAddButton) addButton.hide();
addButton.click(function() {
var formCount = currentFormIndex,
row = options.formTemplate.clone(true).removeClass('formset-custom-template'),
buttonRow = $($(this).parents('tr.' + options.formCssClass + '-add').get(0) || this),
delCssSelector = $.trim(options.deleteCssClass).replace(/\s+/g, '.');
let highestId = 0;
const idRegex = /\d+/;
$("input[name$='-research_line_item_description']").each(function(){ // Update here....
const currentName = $(this).attr('name');
const idVal = currentName.match(idRegex);
const idInt = parseInt(idVal);
highestId = Math.max(highestId,parseInt(idInt));
});
formCount = highestId+1;
applyExtraClasses(row, formCount);
row.insertBefore(buttonRow).show();
row.find(childElementSelector).each(function() {
updateElementIndex($(this), options.prefix, formCount);
});
totalForms.val(formCount + 1);
if (showDeleteLinks()){
$('a.' + delCssSelector).each(function(){$(this).show();});
RemoveFirstButton();
UpdatePlaceHolder();
UpdateTotals();
}
if (!showAddButton()) buttonRow.hide();
if (options.added) options.added(row);
currentFormIndex++;
return false;
});
}
return $$;
};
/* Setup plugin defaults */
$.fn.formset.defaults = {
prefix: 'form', // The form prefix for your django formset
formTemplate: null, // The jQuery selection cloned to generate new form instances
addText: 'Add', // Text for the add link
deleteText: 'Del', // Text for the delete link
addContainerClass: null, // Container CSS class for the add link
deleteContainerClass: null, // Container CSS class for the delete link
addCssClass: 'add-row-budget', // CSS class applied to the add link
deleteCssClass: 'delete-row-budget', // CSS class applied to the delete link
formCssClass: 'dynamic-form', // CSS class applied to each form in a formset
extraClasses: [], // Additional CSS classes, which will be applied to each form in turn
keepFieldValues: '', // jQuery selector for fields whose values should be kept when the form is cloned
added: null, // Function called each time a new form is added
removed: null, // Function called each time a form is deleted
hideLastAddForm: false, // When set to true, hide last empty add form (becomes visible when clicking on add button)
};
})(jQuery);
It works great! With one exception....I am having trouble detecting when the buttons are clicked...If I do the following...
$(".add-row-budget").on('click', function() {
$(window).on('beforeunload',function(){
return '';
});
console.log("test1");
});
It doesn't work. I kind of understand why...the elements are being loaded in dynamically...and from what I gather....They're not being bound...or I'm missing an Add-Event-Listener? I've hacked this a bit...by adding...
RemoveFirstButton();
UpdatePlaceHolder();
UpdateTotals();
And this gets the code to "wakeup" and after the first pass I can get the...
$(".add-row-budget").on('click', function() {
$(window).on('beforeunload',function(){
return '';
});
console.log("test1");
});
To work. How can I get the code above to work in concert with the original code in a less hacky way?
Thanks in advance for any thoughts.
And then in my HTML....
I had to include several UpdateFormset() references but this solution ultimately worked.