My Patched-Up JQrelcopy

Yii 1.1 Tips, Snippets and Tutorials
1

Cloning inputs was annoying me because JQrelcopy does not automatically handle the ‘name’ attributes of the inputs. For example, if you were to clone not just a field but a model field you would want your data like this:

0

field1 #part of modelA

field2 #part of modelA

field3 #part of modelA

1

field1 #part of modelA

field2 #part of modelA

field2 #part of modelA

The default implementation does not provide for that. You would instead get:

0

field1

1

field2

2

field3

and so on…

For many reasons I did not want to deal with that in my app.

Bottom line, this patched version will produce output like the following:

name="Model[$index][field]" id="Model_$index_field"

The attached file is a drop-in replacement for the default JS file with no further modifications needed. Props to Ianare for the idea. His fork (which is non working for my purposes) is here:

https://github.com/digitick/yii-jqrelcopy

This script works with the datepicker as well. Hope someone finds this helpful.

2

Thanks for this! I’m still using the jappendo extension with a controller that handles sets of “model[]” inputs…hardly a robust solution, but has been working…looking forward to trying this method.

My form currently uses autocomplete fields, so I don’t know if I’ll be able to implement this anytime soon…

Thanks!

3

Check out addAnother.js by Jeremiah something. He has solved the autocomplete issue (but his extension still has the model [] thingy problem). You may be able to hack that into relcopy.

4

thanks I haven’t seen that plugin before. It looks like there’s some code to handle the row index in there too

http://www.michaelpeacock.co.uk/blog/entry/add-another--jquery-plugin

5

Used this and it seems to be working. Thanks for sharing!

6

I tried replacing the javascript file with yours and it did not work. After replacement, it works the same as the original jqrelcopy extension before replacement. The textfield name is still the same for all the duplicated textfields, only the textfields ids are incremental.

Is there any other things I have to delete, replace or change? What about JQRelcopy.php file? Do I need to replace it?

Any idea why this happens and how I can solve this problem?

7

Did you clear the contents of the assets folder in the main directory of your app?

EDIT: Looks like it’s the same here as well.

8

I do not get this result.

In my installation the ID and name fields both increment the ID when a row is cloned.

Can you show how you are using it?

9

Thank you very much for sharing, it works fine for me :D

10

Hello,

Thanks very much for the solution. May I check how the ‘view’ should be setup based on the updated JS file? I tried clearing the /assets folder but using the ‘view’ definition below.




<div class="row user">

	<?php echo CHtml::label('First Name',''); ?>

	<?php echo CHtml::textField('Users[][firstname]','',array('style'=>'width:100px')); ?>

</div>
11

Folks - I think I have it. Include a 0 in the square brackets.




<div class="row user">

	<?php echo CHtml::label('First Name',''); ?>

	<?php echo CHtml::textField('Users[0][firstname]','',array('style'=>'width:100px')); ?>

</div>
12

I should have mentioned that. I am not a strong jquery coder and I thought it would be simplest to just start with 0 index.

If you display existing ‘rows’ (fetch from DB) this will still work to increment the last value, but if you are starting new you want to use 0 for your first row.

13

I have managed to achieve the same results in generating unique IDs just by using some Javascript

this is my code




$this->widget('ext.jqrelcopy.JQRelcopy',

array(

      'id' => 'copylink',

      'removeText' => 'remove',

      'jsAfterNewId' => "if(typeof this.attr('name') !== 'undefined'){ this.attr('name', this.attr('name').replace('new', 'new_'+counter));}",

));

assuming the fields are structured as the following

<input type="input" name="controllerName[new][title]">

<textarea name="controllerName[new][description]"></textarea>

Each time the copy action is triggered the Javascript searches for all "name" attributes and replaces [new] with [new_1], [new_2]. The key [new_x] increments using the JS "counter" variable used in jqrelcopy Javascript.