Archive for September, 2011

jDupIt

Hi everyone
Today Im gonna show you my latest plugin(This one is in jquery:D)
So what does this plugin do?
It’s not really a plugin but an object that your form extends it then you can duplicate your fields remove them or add n number of them
Let see the object code


var jDupIt = {
fieldsElement: null,
initialize: function() {
newElement = $('#outer-fields-div').children('div.fields-div:first').clone();
newElement.hide();
this.fieldsElement = newElement;
},
addOne: function() {
newElement = this.fieldsElement.clone();
$('#outer-fields-div').append(newElement);
newElement.slideDown('slow');
},
bindAddOne: function(clickElement) {
formObj = this;
$(clickElement).click(function(){formObj.addOne()});
},
bindAddN: function(clickElement, inputElement) {
formObj = this;
$(clickElement).click(function(){
for (i = 0 ; i < $(inputElement).val() ; i++)
formObj.addOne();
});
},
bindRemoveCurrent: function(clickElement) {
$(clickElement).live('click', function(){
$(this).parents('div.fields-div').slideUp('slow', function(){$(this).remove()});
});
},
bindRemoveLast: function(clickElement) {
$(clickElement).click(function(){
$('#outer-fields-div').children('div.fields-div:last').slideUp('slow', function(){$(this).remove()})
});
}
};

And here is the html code

<form id=”factor-form” method=”post”>
<label>Factor Num: </label>
<input name=”num_fac” type=”text” />
<label>Address: </label>
<input name=”address” type=”text” />
<div id=”outer-fields-div”>
<div class=”fields-div”>
<label>Referencia: </label>
<input name=”references[]” type=”text” />
<label>Precio </label>
<input name=”prices[]” type=”text” />

<a>
<img src=”images/cross.png” width=”16″ height=”16″ border=”0″ />
</a>
</div>
</div>
<input type=”submit” value=”ok” name=”submit” />
</form>
<!– Controls –>
<div id=”controls”>
<div id=”add”><a><span>Add One</span></a></div>
<div id=”remove”><a><span>Remove</span></a></div>
<div id=”add-n-div”>
<div id=”add-n”><a><span>Add</span></a></div>
<input id=”add-n-num” type=”text” size=”4″ /> products
</div>
</div>
<!– /Controls –>

Be careful

You can name every element as you like but 2 of them

<div id=”outer-fields-div”>
<div class=”fields-div”>

The first one is to know where the dynamic fields are and the second one is to know which fields to duplicate

Which means the second one contains the dynamic fields and the first one contains nothing or one or more blocks of second one

So what should you do to use the object?

element = $('#factor-form');
jQuery.extend(element, jDupIt);

First your form extends jDupIt then you bind the buttons or links to the actions


element.initialize();
element.bindAddOne('#add');
element.bindAddN('#add-n', '#add-n-num');

(#add-n-num is the id of the input that indicates the number of times that you want to duplicate the fields)

element.bindRemoveCurrent('.remove-current');
element.bindRemoveLast('#remove');

Do not forget to call element.initialize since it’s necessary
I hope this plugin be helpful for you

Leave a comment