Feedback:   mdelrosso@gmail.com  Seguir a @mdelrosso en Twitter @mdelrosso   Desarrollo:  Proyecto en Github Proyecto en Github  Reportar un error Reportar un error  HashTag en Twitter #sheepit

Ejemplo integrador avanzado

Incluir archivos necesarios

            <script type="text/javascript" src="jquery-1.4.min.js"></script>
            <script type="text/javascript" src="jquery.sheepItPlugin-1.1.1.min.js"></script>            

Código javascript

            
var addressesForm = {};

$(document).ready(function() {
    
    
     addressesForm = $("#person_addresses").sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowRemoveAll: true,
        allowAdd: true,
        allowAddN: true,
        
        // Limits
        maxFormsCount: 10,
        minFormsCount: 0,
        iniFormsCount: 0,
        nestedForms: [
            {
                id: 'person_addresses_#index#_phones',
                options: { 
                     indexFormat: '#index_phones#',
                     maxFormsCount: 5
                }
            }
        ],
		data: [
			{
				'address': '343 West Broadway',
				
				// Embedded form data
				'person_addresses_#index#_phones': [
					{ 'phone': '(212) 925-4706' },
					{ 'phone': '(212) 928-4709' }
				]
			},
			{
				'address': '454 West Broadway',
				
				// Embedded form data
				'person_addresses_#index#_phones': [
					{ 'phone': '(212) 45-6806' },
					{ 'phone': '(212) 48-6809' }
				]
			}
		],
		pregeneratedForms: ['pregenerated_form_1']
        
    });
	
    
    
});

function executeAPI() {
					
	// Using API
	
	// Inject data into main form
	alert('Inject data');
	addressesForm.inject([
		{
		'address': 'Injected address'
		}
	]);
	
	// Add a form
	alert('Add a form');
	addressesForm.addForm();
	
	// Get all forms forms
	var forms = addressesForm.getForms();
	
	// Inject new data on each form
	alert('Insert new data on each form');
	for (x in forms) {
		forms[x].inject({ 'address': "Injected new address" });
	}
	
	// Remove a form
	alert('Remove first form');
	addressesForm.removeForm(0);
	
	// Get a nested form and inject data on it
	var phoneForm = addressesForm.getForm(0).getNestedForm(0);
	phoneForm.inject([
		{ 'phone': "Injected phone" }
	]);
	
	// Remove all forms
	alert('Remove all forms');
	addressesForm.removeAllForms();
	
}
			

Plantilla HTML

            

<style>

a {
    text-decoration:underline;
    color:#00F;
    cursor:pointer;
}

.controls div, .controls div input {
    float:left;    
    margin-right: 10px;
}

#executeLink {
	clear:both; 
	margin-top:20px;
}

</style>

<!-- Main sheepIt Form -->
<label>Addresses</label>


<div id="person_addresses">

	<!-- Form template-->
	<div id="person_addresses_template">
		<label for="person_addresses_#index#_address">Address <span id="person_addresses_label"></span></label>
		<input id="person_addresses_#index#_address" name="person[addresses][#index#][address]" type="text" size="50" maxlength="100" />
		<a id="person_addresses_remove_current"><img src="images/cross.png" width="16" height="16" border="0"></a>
		
		<!-- Embeded sheepIt Form -->
		<div style="margin-left:50px; overflow:hidden;">
			<label>Phones</label>
			
			<div id="person_addresses_#index#_phones">
			
				<!-- Nested form template-->
				<div id="person_addresses_#index#_phones_template">
					<label for="person_addresses_#index#_phones_#index_phones#_phone">Phone <span id="person_addresses_#index#_phones_label"></span></label>
					<input id="person_addresses_#index#_phones_#index_phones#_phone" name="person[addresses][#index#][phones][#index_phones#][phone]" type="text" size="15" maxlength="10" />
					<a id="person_addresses_#index#_phones_remove_current"><img src="images/cross.png" width="16" height="16" border="0"></a>
				</div>
				<!-- /Nested form template-->
				
				<!-- No forms template -->
				<div id="person_addresses_#index#_phones_noforms_template">No phones</div>
				<!-- /No forms template-->
				
				<!-- Controls -->
				<div id="person_addresses_#index#_phones_controls" class="controls">
					<div id="person_addresses_#index#_phones_add"><a><span>Add phone</span></a></div>
					<div id="person_addresses_#index#_phones_remove_last"><a><span>Remove</span></a></div>
					<div id="person_addresses_#index#_phones_remove_all"><a><span>Remove all</span></a></div>
					<div id="person_addresses_#index#_phones_add_n">
						<input id="person_addresses_#index#_phones_add_n_input" type="text" size="4" />
						<div id="person_addresses_#index#_phones_add_n_button"><a><span>Add</span></a></div>
					</div>
				</div>
				<!-- /Controls -->
				
			</div>
			
		</div>
		<!-- /Embeded sheepIt Form -->
		
	</div>
	<!-- /Form template -->
	
	
	<!-- Pre-generated form -->
	<div id="pregenerated_form_1">
		<label for="person_addresses_#index#_address">Address <span id="person_addresses_label"></span></label>
		<input id="person_addresses_#index#_address" name="person[addresses][#index#][address]" type="text" size="50" maxlength="100" />
		<a id="person_addresses_remove_current"><img src="images/cross.png" width="16" height="16" border="0"></a>
		
		<!-- Embeded sheepIt Form -->
		<div style="margin-left:50px; overflow:hidden;">
			<label>Phones</label>
			
			<div id="person_addresses_#index#_phones">
			
				<!-- Nested form template-->
				<div id="person_addresses_#index#_phones_template">
					<label for="person_addresses_#index#_phones_#index_phones#_phone">Phone <span id="person_addresses_#index#_phones_label"></span></label>
					<input id="person_addresses_#index#_phones_#index_phones#_phone" name="person[addresses][#index#][phones][#index_phones#][phone]" type="text" size="15" maxlength="10" />
					<a id="person_addresses_#index#_phones_remove_current"><img src="images/cross.png" width="16" height="16" border="0"></a>
				</div>
				<!-- /Nested form template-->
				
				<!-- No forms template -->
				<div id="person_addresses_#index#_phones_noforms_template">No phones</div>
				<!-- /No forms template-->
				
				<!-- Controls -->
				<div id="person_addresses_#index#_phones_controls" class="controls">
					<div id="person_addresses_#index#_phones_add"><a><span>Add phone</span></a></div>
					<div id="person_addresses_#index#_phones_remove_last"><a><span>Remove</span></a></div>
					<div id="person_addresses_#index#_phones_remove_all"><a><span>Remove all</span></a></div>
					<div id="person_addresses_#index#_phones_add_n">
						<input id="person_addresses_#index#_phones_add_n_input" type="text" size="4" />
						<div id="person_addresses_#index#_phones_add_n_button"><a><span>Add</span></a></div>
					</div>
				</div>
				<!-- /Controls -->
				
			</div>
			
		</div>
		<!-- /Embeded sheepIt Form -->
		
	</div>
	<!-- /Pre-generated form -->
	
	
	
	<!-- No forms template -->
	<div id="person_addresses_noforms_template">No addresses</div>
	<!-- /No forms template -->
	
	<!-- Controls -->
	<div id="person_addresses_controls" class="controls">
		<div id="person_addresses_add"><a><span>Add address</span></a></div>
		<div id="person_addresses_remove_last"><a><span>Remove</span></a></div>
		<div id="person_addresses_remove_all"><a><span>Remove all</span></a></div>
		<div id="person_addresses_add_n">
			<input id="person_addresses_add_n_input" type="text" size="4" />
			<div id="person_addresses_add_n_button"><a><span>Add</span></a></div>
		</div>
	</div>
	<!-- /Controls -->
	
</div>
<!-- /Main sheepIt Form -->

<p id="executeLink" ><a href="javascript:executeAPI();"><span>Execute API</span></a></p>

            

Resultado

Nueva persona
Datos principales
No hay teléfonos
No hay teléfonos
No hay direcciones

Ejecutar API

Descargar el ejemplo completo

Descargar - example7.rar