Editing Variable Sized List Controls

== <span style="background-color:pink;">Deprecated</span> == 

=== <span style="background-color:pink;">See [[Variable-Length_Line_Item_Edits|Variable-Length Line Edits]] instead.</span> ===

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

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

Sample outer control markup.
<syntaxhighlight lang="php">
<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>
</syntaxhighlight>

Sample line-item markup.

<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>

Sample line-item form inputs.

<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>

==JQuery/JavaScript==


Add an additional line of form input:

<syntaxhighlight lang="javascript">
$('.add-related-btn')
.button({
	icons: {primary: 'ui-icon-plus'},
	text: false
})
.click(LITTLED.CMS.addRelatedProduct);
</syntaxhighlight>


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:

<syntaxhighlight lang="javascript">
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 */
}
</syntaxhighlight>


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:

<syntaxhighlight lang="javascript">
/* page load */
LITTLED.CMS.bindRelatedProductsHandlers($('.related-products'));

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


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

<syntaxhighlight lang="javascript">
$('.del-related-btn')
.button({
	icons: {primary: 'ui-icon-trash'},
	text: false
})
.live('click', LITTLED.CMS.delRelatedProduct);
</syntaxhighlight>


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:

<syntaxhighlight lang="javascript">
	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
		});
	},
</syntaxhighlight>


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

<syntaxhighlight lang="javascript">
	delRelatedProduct: function() {
		var $p = $(this).closest('.related-row');
		$p.remove();
	},
</syntaxhighlight>

==AJAX==
The page that handles AJAX request is basically a wrapper around the line-item include files.
<syntaxhighlight lang="php">
<? include(ADMIN_TEMPLATE_DIR."forms/related_product_inputs.php"); ?>
</syntaxhighlight>


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 [http://luzern.dbarchowsky.com/hostmgr/press/|Luzern Labs press CMS] as an example.
[[Category:CMS Documentation]]