Editing Variable Sized List Controls (section)

==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>