yapapaya/jquery-cloneya

A jquery plugin to clone DOM elements

jquery-cloneya's Issues

Validation method

Form validation is taking important role in all the applications. So I think cloneya should give the control to user for validating form.

Case:

• Email field is empty or invalid, still we can add new field
• Users what to get confirm user before deleting the form field, like "Are you sure, you want to delete!"

I don't see anyway to achieve this on before_clone or before_delete event callback.

Can return false do the trick ?

Any hook is there to restrict the add/append clonned form for validation purpose?

I want to validate the form before cloning.
I do not need to append/add clonedform before validating the actual form.
is any other hooks available in jquery-cloneya plugin. Please give some suggestion.

Possible to start with id=1?

Hi!

I'm having a scenario where the original element have id's like id="text1" id="container1" and so on. These are crucial for my functions to work, they can't start with no digit at the end. Is it possible, when the cloning is made, to start with this value (text1) and make the clone become text2 for example?

// Jens.

Woking with other plugin

I use Cloneya with Bootstrap-datetime-picker but when clone new row datetime-picker work with only one input of row has been clone.

This is code in jsbin

Hook doc creation, hinting and testing on git hooks

Use git hook plugin for grunt to run docs, jsHint and tests on pre-commit and pre(post?) merge events.

test cloneya before 1.0.0

@gchokeen I have made a lot of changes, for the better:

• Refactored the plugin, because the public methods weren't working. Also because I guess we'll be adding more public methods. Also added a destroy method.
• Added npm support. This will be the first release as node package
• Improved delete functionality
• Added unit tests
• Added travis.ci support

Most importantly nested cloning has changed completely, as you can see in the included demo, or here:
http://yapapaya.github.io/jquery-cloneya/demo.html

I have updated the demo, as well has the github pages here: http://yapapaya.github.io/jquery-cloneya/

It'd be wonderful, if you could test this once and confirm before I release it into the wild.

always clone "template"

Is it possible to clone always kind of template with one "outer" input and two "inner" inputs in nested mode?

After cloning inner form few times and then click to clone outer form, "new" outer form is cloned with one "outer" input and "inner" inputs cloned-few-times.

What I want to achieve is having one outer input and two inner inputs everytime I clone outer form, no matter how many "inner" inputs are.

Best regards,
Milosz

Child data is always cloned - deepClone and dataClone options are ignored

It seems like the .data() on child elements is always cloned, irrespective of the setting of the deepClone and dataClone options. This causes obvious issues with jquery plugins initialised on elements inside the cloned group.

It looks like this is because the options are passed to jquery.clone() as a hash - but that method expects two booleans and treats the hash as equivalent to true.

I will submit a fix and test in a PR just now.

Clone added Two items per one click

When I add one items, it added two items.
Can you check the following example?
http://jsfiddle.net/f6yLw8ch/13/

Thanks

Deprecate and possibly remove old event names in favour of newer namespaced events

For eg, remove the event clone_before_clone and only keep before_clone.cloneya. Right now both of them exist for backwards compatibility, which should be discouraged now.

Limit does not work with nested cloning

How to replicate issue:

1. Using the demo as example, put a limit, say 2, on Contact Information
2. Clone the parent, do not clone contact information
3. You should be able to clone the contact information as many as you want in the 2nd parent (cloned parent)

And other issues if you play around with nested cloning & limit.

Add jsDoc 3 support

Using Grunt tasks

Bootstrap date picker position not pointing exact date input field

When id/class specific not working.

Uncaught Error: Syntax error, unrecognized expression: .

I'm getting the error below in console when adding the jquery-cloneya.min.js file into my HTML:

Uncaught Error: Syntax error, unrecognized expression: .

I've tried using the jQuery version used on the demo/example website in the README for the repo, but still got this.

Issue - Cloning twice

Dear Developer,
Have been using Cloneya for a month. When clone button is clicked, the content is cloned twice (Not all the time). This issue is reproducing in demo too.

Minified file is broken

Hello,
The jquery-cloneya.min.js from current master is broken, it contains extra lines left out by minifying tool or while doing git rebase. Probably by 026ee4d. Here's the code:

<<<<<<< HEAD
!function(e){var n=function(n,t){var o=/^(.*)(\d)+$ ...
=======
(function(e){var t=function(t,n){var r=/^(.*)(\d)+$ ... 
>>>>>>> handle clone delete buttons on minfile

The non-minified version works like a charm. Thanks for the plugin!

how to remove a class from all children of the cloned elemnt ?

hi

please answer the question from the title.
thanks in advance

Prefilling Data

I'm trying to write a way to auto-create several clones when initialized and pre-populate them with data but I'm having difficulty figuring out the best approach to do this. Has anyone modified the code to support this? Thanks!

Introduce minimum clones

Like we have a limit that allows use to set the maximum allowable clones, introduce a minimum parameter that sets the minimum number of clones required.

So, in a form, if you need someone to provide at least 2 websites (for eg), then they won't be able to delete to the last clone. Validation would also become easier.

Start with name="[1]"

Is there a way for the name & ID increment to start with [1] ?

ignore option

When come accross the valiation plugin with cloning process. It clones the validation erros in form. Also when I work with image display I had same issue. So igore feature will be make plugin very usuable.

Deprecate limit, introduce maximum

In the same spirit as #24, deprecate limit and call it maximum (although we'll recognise limit in code for a couple of versions).

Nested child incrementing the parent name

I have a challenge were I have a nested form and the nested form must have children, but when I try to add the child form in incrementing the parent name

`

Questions

Set Question

                        <p class="ans"> 
                            <input type="text" name="question[0][ans]" /> 
                            <label for="ans">Correct Answer</label> 
                        </p>

                        <p class="ansInfo"> 
                            <input type="text" name="question[0][ansInfo]" /> 
                            <label for="ansInfo">answer Info</label> 
                        </p>

Answer option

                                    <input type="text" name="question[0][ansSel]" /> 
                                    <label for="ansSel">option</label> 
                                </p>  
                                <a href="#" class="clone">clone</a>
                                <a href="#" class="delete">delete</a>
                            </div>
                        </div>




                        <a href="#" class="clone">clone</a>
                        <a href="#" class="delete">delete</a>
                    </div>
                </div>
                <!-- <a href="#" class="clone">clone</a>
                <a href="#" class="delete">delete</a> -->
            </div>

            <p class="submit"> 
                <input type="submit" value="Save" /> 
            </p> 

        </form>`

I want to get data like this -

question[0][ques]
question[0][ans]
question[0][ansInfo]

The above part works but now for the nested I want this -

question[0][ansSel][0]
question[0][ansSel]1]
question[0][ansSel][2]
question[0][ansSel][3]

But when I click the clone button for the nested child form it does this -

question[1][ansSel]
question[2][ansSel]
question[3][ansSel]
question[4][ansSel]

external control not working on new clones

hi @actual-saurabh loving your plugin, thanks! but i'm running into an issue: when i use an external control for the delete button, it works on the original elements coded into the page, but not on newly cloned ones.

please check out this fiddle: https://jsfiddle.net/split19/boegwbq9/4/
you can delete the 2nd row, but when cloning a row, you can't delete it.

any ideas? thank you!

reset option

Cloneya needs a reset option, when I come across form reset(without page reload), plugin keeps all the cloned form fields. It has to be reset. so it will be great if we add a rest option.

Reset Plugin

Refer #13, instead of adding a reset option in cloneya, create a separate plugin that can go in a new plugins folder.

Clone tr

Hi,

i am trying to clone form elements that are inside tr and its not working at all

I have use your simple-clone example using table

Here is the code

    <div id="simple-clone-tr" class="demo-wrap">

        <h2>Simple Cloning</h2>
        <form class="form" method="post">   
            <table>
                <tr class="toclone">
                    <td class="name"> 
                        <input type="text" name="name[]" id="sname" /> 
                        <label for="name">Name</label> 
                    </td> 

                    <td class="email"> 
                        <input type="text" name="email[]" id="semail" /> 
                        <label for="email">E-mail</label> 
                    </td> 

                    <td class="web"> 
                        <input type="text" name="web[]" id="sweb" /> 
                        <label for="web">Website</label> 
                    </td> 
                    <td>
                        <a href="#" class="clone">clone</a> 
                        <a href="#" class="delete">delete</a>
                    </td> 
                </tr>
            </table>

        </form>

    </div>
    <!--simple clone demo end-->

I have add the js for the clone

$('#simple-clone-tr').cloneya();

I have notice that the plugin adds the .cloneya-wrap class to the wrapper and the .cloneya to the .toclone element but when i press clone nothing happens

Is something wrong with the code, with my approach ?

Please let me know how to solve this problem.

Why child-selector?

In the lastest plugin release 1.0.0, cloneya using child-selector for all the delete & clone button. It making us to use strict & standard structure, is it really required?

When I work accross the bootstrap form, I faced problem below structure

          <div class="clone-wrapper">
         <div class="input-group form-group toclone">
              <input type="text" class="form-control" id="field_label" placeholder="Field Label">  
              <div class="input-group-addon"><a href="javascript:void(0);" class="clone"><i class="glyphicon glyphicon-plus"></i></a></div>
      </div>
      </div>

This one solved

<div class="input-group-addon clone"><a href="javascript:void(0);"><i class="glyphicon glyphicon-plus"></i></a></div>

Do you think it's really important to do that!

Deprecate defaultRender to defaultCount

Current defaultRender can be deprecated in favour of minimum or defaultCount for clearer understanding of waht it means (#24)

Can't get my selectors to work on child clones

I have a group of fields that I clone by clicking on the [ + ] button; and cloning works fine. Here's the code -

HTML:
<input type="text" name="resumeSkillYears[]" id="<?php echo "resumeSkillYears_" . $i; ?>" class="boo gui-input" placeholder="Years" value="<?php echo $value['skillYears']; ?>" >

JS:

$('.clone-skills').cloneya({
            maximum: 5
        }).on('after_clone.cloneya', function(toClone, newClone){
            $(newClone).find(".boo").stepper({
                UI: false,
                allowWheel: true,
                limit: [0, 50],
                wheel_step: 1,
                arrow_step: 1,
                onStep: function(val, up){
                    $(this).val(function(index, val) {
                        if(val <= 1) {
                            return val + " Year";
                        } else {
                            return val + " Years"
                        }
                    });
                }
            });
        });

Because the ID of the element is dynamically incrementing, I thought I'd rather append a class "boo" to my element and select it through my JS.

However, above code applies the stepper to the parent being cloned (the top row) against the newly created last row. Apparently I'm doing something wrong with 'find'.

Can someone help? Thanks!

Nested Elements of Clone not able to delete

Nested Elements of Clone not able to delete

Auto increment on a multi dimensional PHP sstsy

Hi

There is a small issue when cloning form elements that have a PHP multi dimmensional array scheme, for example if I had a fieldset with 3 fields which I wanted to clone, its not renumbering the array correctly, to give an example, if I loaded a form for editing which was pre-populated with 2 sets of information

contact[0][name]
contact[0][address]
contact[0][phone]

contact[1][name]
contact[1][address]
contact[1][phone]

Then I clicked clone/add another copy of the fieldset, I'd expect the array to renumbered as

contact[0][name]
contact[0][address]
contact[0][phone]

contact[1][name]
contact[1][address]
contact[1][phone]

contact[2][name]
contact[2][address]
contact[2][phone]

Instead, the first array element number is being cleared from the first set, so we end up with

contact[][name]
contact[][address]
contact[][phone]

contact[1][name]
contact[1][address]
contact[1][phone]

contact[2][name]
contact[2][address]
contact[2][phone]

This is possible by design, but we tracked the issue down to the "j" being unset on line 212, commenting out this if statement fixed the issue for us. But perhaps you could make this behaviour optional.

Many Thanks

defaultCount

@gchokeen With nesting, defaultCount produces weird results, which are logical but may not be expected by the user.

I'm not sure if we need defaultCount because I believe rendering can be done better by the server side scripting or plain copy paste html. I'm in huge favour of removing defaultCount.

Do you have any use case where this parameter is required and makes life easier? Let me know your thoughts.

How do I make the input names increase incrementally?

I'm using this, and I need a way to ensure the input names increase like the ID's are.

Custom Clone Button creates double the clones

I am having an issue with using the plugins custom clone button. What happens is every time i click the clone button i get double the clones. here is my code. any help would be greatly appreciated. How do i get this rectified as I am new to javascript.

//javascript
$('#clonedForm').cloneya({
         minimum           : 1,
         maximum           : 10,
         /* cloneThis         : '.toclone', */
         valueClone        : false,
         dataClone         : false,
         deepClone         : false,
         /* cloneButton       : '.clone', */
         deleteButton      : '.delete',
         clonePosition     : 'after',
         serializeID       : true,
         preserveChildCount: false
     })
     .on('maximum.cloneya', function(event, maximumCount, toClone){
         alert("You can't have more than " + maximumCount + " clones");
     })
     .on('form_input.cloneya', function(event, input, toClone, newClone){
        console.log(toClone.find('id')); 
     });
     $('.customButton').on('click', function(){
         $('#clonedForm').triggerHandler('clone.cloneya',[$('.toclone')]);    
     });


//html

<div class="demo-wrap" id="clonedForm">
            <form action="" id="testForm" method="get" class="tstForm">
                <div class="toclone">
                    <select name="selectInput[]" id="clonedForm_#index#_select" required>
                    <option value=""></option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <input type="text" name="textInput[]" size="20" id="clonedForm_#index#_input" required>
                <input type="radio" id="clonedForm_#index#_radio" name="radioInput[]" value="radioYes" required>
                <input type="checkbox" id="clonedForm_#index#_checkbox" name="checkBoxInput[]" value="checkboxYes" required>
                <!-- <a href="#" class="clone">clone</a> -->
                <a href="#" class="delete">delete</a>
                </div>
                <br>
                <br>
                <br>
                <span class="customButton">clone</span>
                <br>
                <br>
                <br>
                <input type="submit" value="submit">
            </form>
    </div>

Bootstrap-Datepicker (daterange) dan Bootstrap-Timepicker

Hi,

I would ask about Bootstrap-Datepicker and Bootstrap-Timepicker, In my case seems to be not work properly, after clone process daterangepicker turned into datepicker, I can change the date in enddate becomes smaller than startdate.

And for my case in Bootstrap-Timepicker, i could not applying the right command to make the cloning result works well.

Here is my code :

.on('before_clone.cloneya', function (event, toClone) {
  toClone.find('input.daterange_picker').each(function() {
    $(this).datepicker('remove');
  });
  toClone.find('input.time_picker').each(function() {
    $(this).timepicker('remove');
  });
})
.on('after_clone.cloneya', function (event, toClone, newclone) {
  toClone.find('input.daterange_picker').each(function() {
    $(this).datepicker({
      startDate: date,
      autoclose: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
    });
  });
  toClone.find('input.time_picker').each(function() {
    $(this).timepicker({
      minuteStep : 5,
      showMeridian : false,
      showInputs : false
    });
  });
})
.on('before_append.cloneya', function (event, toClone, newclone) {
  $(newclone).css('display', 'none');
  $(toClone).fadeOut('fast', function () {
    $(this).fadeIn('fast');
  });
  toClone.find('input.daterange_picker').each(function() {
    $(this).datepicker({
      startDate: date,
      autoclose: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
    });
  });
  toClone.find('input.time_picker').each(function() {
    $(this).timepicker({
      minuteStep : 5,
      showMeridian : false,
      showInputs : false
    });
  });
})
.on('after_append.cloneya', function (event, toClone, newclone) {
  $(newclone).slideToggle();
  console.log('finished cloning ' + toClone.attr('id') + ' to ' + newclone.attr('id'));
  newclone.find('input.daterange_picker').each(function() {
    $(this).datepicker({
      startDate: date,
      autoclose: true,
      format: 'yyyy-mm-dd',
      todayHighlight: true,
    });
  });
  newclone.find('input.time_picker').each(function() {
    $(this).timepicker({
      minuteStep : 5,
      showMeridian : false,
      showInputs : false
    });
  });
})

Realy appreciate if someone can help for this case.

And this the result examples :

The css trick in 239 not work for me.

Will this work in jQuery 1.5 version?

Will this work in jQuery version 1.5?
I also noticed the following errors in IE7 & IE8.

" SCRIPT5009: 'jQuery' is undefined
jquery-cloneya.js, line 8 character 1
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object
demo, line 107 character 13 "

Thanks.

Add jsHint in grunt tasks

Add support for jsHint

Map cloned child form to particular parent form in nested clone

How can I map the child clone form to a parent form. When It seems all the values of all the child forms are normal array. I could not find the parent of the child clone form. All the form values are displayed in single array. Any mapping functionality should be useful for finding the parent of child clone form.
How can I achieve?. Any help is appreciated

Add counter to href?

Hi!

I'm cloning a container with a tab block inside. The links of the tabs has to be unique (href="#tab"), and point to divs with same id (id="tab"). When cloning, the div updates, but not the tab href. Is there a way I can make this happend?

Thanks for a great plugin and sorry for my beginner questions!

// Jens.

serializeIndex does not properly update nested array field names

When cloning an element like this with serializeIndex: true:

<div class="toclone">
    <input name="first[0][second][0][field]">
    <input name="first[0][second][1][field]">
</div>

I would expect only the first-level array key to be updated to the new sequence - eg:

<div class="toclone">
    <input name="first[0][second][0][field]">
    <input name="first[0][second][1][field]">
</div>
<div class="toclone">
    <input name="first[1][second][0][field]">
    <input name="first[1][second][1][field]">
</div>

However, cloneya resets all the numeric keys in a field name in both the toClone and newClone elements - so the output is actually:

<div class="toclone">
    <input name="first[0][second][0][field]">
    <input name="first[0][second][0][field]"> <!-- note the second-level key changed from 1 to 0 -->
</div>
<div class="toclone">
    <input name="first[1][second][1][field]">
    <input name="first[1][second][1][field]">
</div>

This then produces duplicate field names in each block, so the submitted data is missing expected values.

Also reproduced in this jsFiddle.

I appreciate this probably isn't as simple as just forcing it to only change the first key, since potentially in a nested set of clones you might actually want to end up with fields like:

<input name="person[0][telephone][0]">
<input name="person[0][telephone][1]">
<input name="person[1][telephone][0]">
<input name="person[1][telephone][1]">
<input name="person[1][telephone][2]">
<!-- etc -->

where both the "person" block and the individual "telephone" rows could be cloned - so you'd have to track the depth of the clone and work out which index to change each time.

However, as-is the behaviour is very unexpected and doesn't really work for any usecase - so we should either try and fix it or at least strongly document that multi-level array field names are not supported.

Problem with the clone id numbers after #10

Hey there!
When I clone a number of id:s, let's call it "image", the first clone becomes "image1", the second one image2 etc...

The problem is, when I come to number ten, this becomes the ID:s:

image1111111110
image1111111111
image1111111112
image1111111113
image1111111114

etc...

Any idea why this happens? I'm using a query where I use the ID numbers, and need it to keep increasing without the other digits being added. Like so:

image10
image11
image12

etc...

Is this possible to achieve?

Thanks!

// Jens.

Better nested cloning

It makes no sense for users to keep invoking cloneya on each nest and have so many different class names. It should work properly, even when all nested instances have the same class names.

Run function with created clone id

Hi!
Right now I'm having the following code:

$('#formclone').cloneya({
            limit       : 20,
            cloneThis       : '.formPack',
            valueClone      : false,
            dataClone       : false,
            deepClone       : false,
            cloneButton     : '.clone',
            deleteButton    : '.delete',
            clonePosition   : 'after',
            serializeID         : true
        }).on('clone_after_append', function(event, toclone, newclone) {
            $(toclone).children('.tab-container').hide();
            $(toclone).children('.preview').show().effect('highlight', {}, 1000);
            var idNum = $(newclone).children('.preview').attr('id').replace(/preview/, '');
            $('#tab-container' + idNum).tabs();
   });

What I'm trying to do with the lines:

var idNum = $(newclone).children('.preview').attr('id').replace(/preview/, '');
            $('#tab-container' + idNum).tabs();

is to get the id of the .preview div of the new clone (for example #preview1), strip out the preview part and this way get the id of the clone.

Then I would like to run the tab function with this container id.

Not getting it to work though.

Is there another way I should do this, or another way I can get the id?

Thanks!
// Jens.

Check box and radio button element's values are reset.

We are using the form with radio and check box button. When we cloned the form, it reset the value of check box and radio buttons. It allows only one radio button value to choose for all the cloned forms.

Appropriate support or help is appreciated.

Prevent deleting

I am trying to perform some logic in the before_delete event. If applicable I would like to prevent deleting. I have tried returning false and preventDeault() without success.

Is this possible?

nested elements of a clone cannot be deleted

in your nested demo, if you add phone numbers, then clone the contact, the phone numbers in the cloned contact cannot be deleted. not related to my implementation, not working on your demo page either. Otherwise, great work... would love to have this issue resolved if possible.

Delete all clones

how do i limit the times of deleting? because with your example it delete me all the form

Create more than one inner form in single form

Thank you for great jQuery-cloneya plugin.
How can we create more than one inner form within the main form.
I am using one main form with four inner forms.
The fresh main form worked perfectly with all the inner forms.
After cloning of the main form,did not display all the inner forms.
It display first inner form only.
Any help will be appreciated.

Thanks,

function to clone input values and increment name/value

is possible this plugin clone a container wrapper, and your childs elements with the value and name, and if possible increment name/value?