Variable Sized List Controls

HTML/Form Content

Create include file that can be used by both the content edit form and AJAX scripts to generate the list markup.

<? include (ADMIN_TEMPLATE_DIR."forms/related_products_container.php"); ?>

Sample outer control markup.

<div style="clear:both;overflow:hidden;margin:12px 0 8px 0;">
	<div class="inputlabel" style="width:500px;padding-bottom:2px;border-bottom:1px solid #999;margin-bottom:4px;">Related Products <a href="javascript:void(0)" rel="nofollow" class="add-related-btn" title="add related product">add related product</a></div>
	<div id="related-error-container" class="error" style="clear:both;float:left;width:480px;display:none;"></div>
	<div class="form-section related-products">
<?
if (count($input->related_array)>0):
	foreach ($input->related_array as &$rp):
		include (ADMIN_TEMPLATE_DIR."forms/related_product_line.php");
	endforeach;
else: ?>
		<div class="no-results"><i>No related products have been added.</i></div>
<? endif; ?>		
	</div>
</div>

Sample line-item markup.

<div class="related-row">
	<input type="hidden" name="<?=related_product_class::ID_PARAM?>[]" value="<?=$rp->id->value?>" />
	<div style="float:left;padding-right:10px;" class="related-name"><?=$rp->collection . " " . $rp->name->value?></div>
	<div><a href="javascript:void(0)" rel="nofollow" class="trash-btn" title="delete">delete</a></div>
</div>

Sample line-item form inputs.

<div class="related-row">
	<div><input type="text" name="<?=$rp->name->param?>" value="<?=(($rp->name->value)?($rp->name->value):("Product Name"))?>" style="width:240px;" maxlength="<?=$rp->name->size?>" /></div>
</div>

JQuery/JavaScript

Add an additional line of form input:

$('.add-related-btn')
.button({
	icons: {primary: 'ui-icon-plus'},
	text: false
})
.click(LITTLED.CMS.addRelatedProduct);

The remaining JQuery handlers should be placed in a routine that can be called each time a new line of form input is added to the list:

bindRelatedProductsHandlers: function( $c ) {
			
	if ($c===undefined) {
		$c = $('.related-products');
	}

	$('.del-related-btn', $c)
	.button({
		icons: {primary: 'ui-icon-trash'},
		text: false
	})
	.click(LITTLED.CMS.delRelatedProduct);

	/* additional custom code here */
}

The routine that binds AJAX handlers on a line-item basis is called both on page load and each time a new line is added:

/* page load */
LITTLED.CMS.bindRelatedProductsHandlers($('.related-products'));

/* line item */
LITTLED.CMS.bindRelatedProductsHandlers($('.related-products .related-row:last'));

Remove line-items (both existing linked records and form inputs):

$('.del-related-btn')
.button({
	icons: {primary: 'ui-icon-trash'},
	text: false
})
.live('click', LITTLED.CMS.delRelatedProduct);

The "add" handler routine makes an AJAX call to get the markup for a new line of form inputs and adds the new element at the end of the list:

addRelatedProduct:function() {

		/* clear any error messages */
		$('#related-error-container').html('');
		$('#related-error-container:visible').fadeOut('fast');

		$.ajax({
			type: 'get',
			url: LITTLED.CMS.related_product_uri,
			data: { n: $('.related-products .related-row').length },
			dataType: 'json',
			success: function(data) {

				if (data.error) {
					return(LITTLED.displayError(data.error));
				} 

				$e = $('.related-products');
				var n = $('.related-products .related-row').length;
				if (n>0) {
					$e.append(LITTLED.htmldecode(data.content));
				}
				else {
					$e.html(LITTLED.htmldecode(data.content));
				}
				$('.related-products .related-row:last').attr('data-index', n).addClass('rp-'+n);
				LITTLED.CMS.bindRelatedProductsHandlers($('.related-products .related-row:last'));
				LITTLED.dismissDialog();
				return (false);
			},
			error: LITTLED.ajaxError
		});
	},

The "remove" handler removes the line from the DOM:

delRelatedProduct: function() {
		var $p = $(this).closest('.related-row');
		$p.remove();
	},

AJAX

The page that handles AJAX request is basically a wrapper around the line-item include files.

<? include(ADMIN_TEMPLATE_DIR."forms/related_product_inputs.php"); ?>

Additionally, the script could handle cases where the form inputs submit the data when they are changed (e.g. dropdown onchange handler, or autocomplete) and the AJAX script would handle saving the links and return markup representing the link as flattened text and not form inputs.

See the Labs press CMS as an example.