DubFriend / jquery.repeater

Create a repeatable group of input elements
MIT License
389 stars 191 forks source link

A sample that works that includes panel accordion? #96

Closed martinmurciego closed 5 years ago

martinmurciego commented 5 years ago

I know it's duplicated https://github.com/DubFriend/jquery.repeater/issues/66#issue-254551573

But I need an example, if someone has it in jsfiddle / codepen because I need to finish a module of a web app for the University. Problem: Clone accordion panels within another accordion panel but only the first one can deploy it and the rest does not, it is as if the content was only created for the panel-body of the first panel-body.

It seems to me that maybe there is no support for cloning acordion panels since these handle attributes such as id instead of name, it is my suspicion that I do not know what the problem is.

My code and markup html is something complicated to reproduce it as is. But: https://jsfiddle.net/martinmurciegomartinmurciego/h0t7uc18/3/

Bootstrap 3.3.7 jQuery 3.2.0

martinmurciego commented 5 years ago

I was able to solve the problem I had by changing the value of the id attributes of each panel by adding them an element index. The jsfiddle does not try hard to work, but then I update it. My case is a bit more complex because of what it includes but it is rare that the jsfiddle does not show well

            var $repeater = $('.repeater').repeater({
                initEmpty: false,
                defaultValues: {},
                show: function() { //al agregar item con .slideDown()
                    var selfRepeaterItem = this;
                    $(selfRepeaterItem).slideDown();

                    var repeaterItems = $("div[data-repeater-item]");
                    $(selfRepeaterItem).attr('data-index', repeaterItems.length - 1);
                    $(selfRepeaterItem).find('a  h4 span.repeaterItemNumber').text(repeaterItems.length);

                    var aheadingItemId = '#headingItem' + repeaterItems.length;
                    $(selfRepeaterItem).find('a.panel-heading').attr('id', aheadingItemId).attr('href', '#collapseItem' + repeaterItems.length).attr('aria-controls', 'collapseItem' + repeaterItems.length);

                    $(selfRepeaterItem).find('#collapseItem').attr('id', 'collapseItem' + repeaterItems.length).attr('aria-labelledby', 'headingItem' + repeaterItems.length);