jQuery Repeatable List Item

Repeatable item with doT.js template engine

JS ( Minified )   Download .zip   View on GitHub

Full Options List ( Data Attributes )

Option Value Description
data-start-indexInteger, default 0The index to start counting from to put in the repeated template.
data-index-key-nameString, default indexThe {index key name} placeholder used in the template replaced with index number.
data-value-key-nameString, default valueThe {value key name} placeholder used in the template replaced with value.
data-template-selectorString, default empty stringThe query selector for the script template container script[type="text/template"].
data-add-button-labelString, default Add NewAdd new item button label.
data-add-button-classString, default btn btn-primaryAdd button class attribute value.
data-wrapper-classString, default repeatable-wrapperClass name of the list wrapper div.
data-confirm-removeyes or no, default noWither to confirm before removing item or not.
data-confirm-remove-messageString, default Are Your Sure ?The message user sees to confirm.
data-empty-list-messageString, default <li>No Items Found</li>
set to item if you want a pre added empty item by default or empty string for no message		The message users sees if there are no items added yet in the list.
data-default-itemObject, default {}The default list item values used in adding new item, Required when using doT.js template engine
data-valuesJSON, default []Default values to fill the list with on start, JSON array object.

Events

Event Parameters Description
repeatable-init

  • None

Triggers when the list is initializing.
repeatable-completed

  • The list jQuery element

Triggers when the list is initialized and ready.
repeatable-new-item

  • The list jQuery element

  • The new item jQuery element added to the list

  • The index replaced the {index} placeholder

  • The data object that parsed to replace the corresponding placeholders

Triggers when the a new item added to the list.
repeatable-removed

  • The list jQuery element

  • The remove item jQuery element

Triggers when an item removed from the list.

Simple List

Code :

<!-- If you want HTML content as the empty message, just escape HTML entities, ex: in PHP -->
<?php 
$empty_msg = htmlentities( '<li><p class="alert alert-info">No Items Yet</p></li>' );
?>

<!-- List -->
<ul class="repeatable" data-empty-list-message="<?php echo $empty_msg; ?>">
	<li data-template="yes" class="list-item">
		<div class="row">
			<p class="col-md-10"><input type="text" name="input[{index}]" class="form-control" /></p>
			<p class="col-md-2"><a href="#" class="btn btn-default" data-remove="yes">Remove</a></p>
		</div>
	</li>
</ul>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.repeatable.item.js"></script>
<script>
( function ( window ) {
	jQuery( function( $ ) {
		$( '.repeatable' ).repeatable_item();
	});
} )( window );
</script>

List With Item Added By Default

Code :

<!-- If you want an empty item added by default to the list -->
<!-- List -->
<ul class="repeatable" data-empty-list-message="item">
	<li data-template="yes" class="list-item">
		<div class="row">
			<p class="col-md-10"><input type="text" name="input[{index}]" class="form-control" /></p>
			<p class="col-md-2"><a href="#" class="btn btn-default" data-remove="yes">Remove</a></p>
		</div>
	</li>
</ul>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.repeatable.item.js"></script>
<script>
( function ( window ) {
	jQuery( function( $ ) {
		$( '.repeatable' ).repeatable_item();
	});
} )( window );
</script>

List With Data Array

Code :

<!-- Data JSON -->
<?php
$data = array (
	1 => "jon.deo@mail.com",
	3 => "will.smith@mail.com",
	5 => "sean.connery@mail.com",
);

$data_json = htmlentities( json_encode( $data ) );
?>

<!-- List -->
<ul class="repeatable" data-confirm-remove="yes" data-values="<?php echo $data_json; ?>">
	<li data-template="yes" class="list-item">
		<div class="row">
			<p class="col-md-10"><input type="text" name="input[{index}]" placeholder="Input Label" class="form-control" value="{value}" /></p>
			<p class="col-md-2"><a href="#" class="btn btn-default" data-remove="yes">Remove</a></p>
		</div>
	</li>
</ul>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.repeatable.item.js"></script>
<script>
( function ( window ) {
	jQuery( function( $ ) {
		$( '.repeatable' ).repeatable_item();
	});
} )( window );
</script>

Array of Objects with doT.js Template

  • Remove

Code :

<!-- Data JSON -->
<?php
$data_json = htmlentities( json_encode( array (
		array (
			"name" => "Will Smith",
			"email" => "will.smith@mail.com",
			"gender" => "male",
		),
		array (
			"name" => "Emma Watson",
			"email" => "emma.watson@mail.com",
			"gender" => "female",
		),
		array (
			"name" => "Sean Connery",
			"email" => "sean.connery@mail.com",
			"gender" => "male",
		),
) ) );

// default item required
$default_item_json = htmlentities( json_encode( array (
		"name" => "",
		"email" => "",
		"gender" => "",
) ) );
?>

<!-- List -->
<ul class="repeatable" data-confirm-remove="yes" data-default-item="<?php echo $default_item_json; ?>" data-values="<?php echo $data_json; ?>">
	<li data-template="yes" class="list-item">
		<div class="form-group">
			<label for="user[{index}][name]" class="col-md-2 control-label">Name</label>
			<div class="col-md-8">
				<input type="text" class="form-control" name="user[{index}][name]" id="user[{index}][name]" placeholder="Name" value="{{=it.name}}" />
			</div>
		</div>
		<div class="form-group">
			<label for="user[{index}][email]" class="col-md-2 control-label">Email</label>
			<div class="col-md-8">
				<input type="email" class="form-control"name="user[{index}][email]"  id="user[{index}][email]" placeholder="Email" value="{{=it.email}}" />
			</div>
		</div>
		<div class="form-group">
			<label for="user[{index}][gender]" class="col-md-2 control-label">Gender</label>
			<div class="col-md-8">
				<div class="radio-inline">
					<label>
						{{ if( it.gender === 'male' ) { }}
						<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="male" checked="checked" />
						{{ } else { }}
						<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="male" />
						{{ } }}
						Male
					</label>
				</div>
				<div class="radio-inline">
					<label>
						{{ if( it.gender === 'female' ) { }}
						<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="female" checked="checked" />
						{{ } else { }}
						<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="female" />
						{{ } }}
						Female
					</label>
				</div>
			</div>
			<p class="col-md-2"><a href="#" class="btn btn-default" data-remove="yes">Remove</a></p>
		</div>
		<hr class="divider" />
	</li>
</ul>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.repeatable.item.js"></script>
<script>
( function ( window ) {
	jQuery( function( $ ) {
		$( '.repeatable' ).repeatable_item();
	});
} )( window );
</script>

Using script template tag attribute

    Code :

    <!-- Data JSON -->
<?php
$data_json = htmlentities( json_encode( array (
		array (
			"name" => "Will Smith",
			"email" => "will.smith@mail.com",
			"gender" => "male",
		),
		array (
			"name" => "Emma Watson",
			"email" => "emma.watson@mail.com",
			"gender" => "female",
		),
		array (
			"name" => "Sean Connery",
			"email" => "sean.connery@mail.com",
			"gender" => "male",
		),
) ) );

// default item required
$default_item_json = htmlentities( json_encode( array (
		"name" => "",
		"email" => "",
		"gender" => "",
) ) );
?>

<!-- template -->
<script type="text/template" id="item-template">
<li class="list-item">
	<div class="form-group">
		<label for="user[{index}][name]" class="col-md-2 control-label">Name</label>
		<div class="col-md-8">
			<input type="text" class="form-control" name="user[{index}][name]" id="user[{index}][name]" placeholder="Name" value="{{=it.name}}" />
		</div>
	</div>
	<div class="form-group">
		<label for="user[{index}][email]" class="col-md-2 control-label">Email</label>
		<div class="col-md-8">
			<input type="email" class="form-control"name="user[{index}][email]"  id="user[{index}][email]" placeholder="Email" value="{{=it.email}}" />
		</div>
	</div>
	<div class="form-group">
		<label for="user[{index}][gender]" class="col-md-2 control-label">Gender</label>
		<div class="col-md-8">
			<div class="radio-inline">
				<label>
					{{ if( it.gender === "male" ) { }}
					<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="male" checked="checked" />
					{{ } else { }}
					<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="male" />
					{{ } }}
					Male
				</label>
			</div>
			<div class="radio-inline">
				<label>
					{{ if( it.gender === "female" ) { }}
					<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="female" checked="checked" />
					{{ } else { }}
					<input type="radio" name="user[{index}][gender]" id="user[{index}][gender]" value="female" />
					{{ } }}
					Female
				</label>
			</div>
		</div>
		<p class="col-md-2"><a href="#" class="btn btn-default" data-remove="yes">Remove</a></p>
	</div>
	<hr class="divider" />
</li>
</script>

<!-- list -->
<ul class="list-unstyled repeatable" data-confirm-remove="yes" data-template-selector="#item-template" data-default-item="<?php echo $default_item_json; ?>" data-values="<?php echo $data_json; ?>"></ul>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.repeatable.item.js"></script>
<script>
( function ( window ) {
	jQuery( function( $ ) {
		$( '.repeatable' ).repeatable_item();
	});
} )( window );
</script>

    Events Dump

      Code :

      <!-- List -->
<ul id="catch-events" class="list-unstyled repeatable" data-confirm-remove="yes">
	<li data-template="yes">
		<div class="row">
			<p class="col-md-10"><input type="text" name="input[{index}]" placeholder="Input Label" class="form-control" /></p>
			<p class="col-md-2"><a href="#" class="btn btn-default" data-remove="yes">Remove</a></p>
		</div>
	</li>
</ul>

<!-- Event List to display it -->
<ul id="events-dump"></ul>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.repeatable.item.js"></script>
<script>
( function ( window ) {
	jQuery( function( $ ) {
		// First: listen for the events
		var event_date = new Date( e.timeStamp );
		$( "#events-dump" ).append( "<li><p><code>"+ e.type +"</code> On <strong>"+ event_date.toDateString() +" "+ event_date.toLocaleTimeString( "en-us" ) +"</strong></p></li>" );

		// Second: apply the plugin
		$( ".repeatable" ).repeatable_item();
	});
} )( window );
</script>