marcofranssen/productDialog.js

## productDialog.js
var productDialog = function($){
	var self = null;
	var dialogForm = null;

	var init = function() {
		if (self === null) return;
		self = this;
		initDialog();
	};

	var initDialog = function() {
		dialogForm = $('#productDialogForm');
		dialogForm.dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			buttons: {
				Create: function() {
					var valid = true;
					//Some form validation, left for brevity

					if(valid) {
						$.post('someserverurl', formData, postComplete, 'json');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				//remove validation classes from form elements
				//left for brevity
			}
		});
		//Do some cool jquery stuff on your form to make it more interactive
		//Remove the original submit button because dialog contains one
	}

	var postComplete = function(data) {
		self.trigger('formPostComplete', data); //triggers event with the response from the server
	};

	var show = function(modal) {
		if (modal) dialogForm.dialog({ modal: true; });
		else dialogForm.dialog({ modal: false; });
		dialogForm.dialog('open');
	};

	return {
		init: init,
		showModal: show(true),
		show: show
	};
}(jQuery);

## productMediator.js
var productMediator = function($) {
	var self = null;

	var init = function() {
		if (self === null) return;
		self = null;
		productDialog.init();

		productOverview.init();
		productDialog.bind('formPostComplete', productOverview.refreshData);

		$('#createNewProduct').click(productDialog.showModal); //binds buttonclick
	};

	return {
		init: init
	}
}(jQuery);

## productOverview.js
var productOverview = function($){
	var self = null;
	var grid = null;

	var init = function() {
		if (self === null) return;
		self = this;
		grid = $('#productsGrid');
		//init a jqGrid on some div id grid.jqGrid(....
		//or simply init some other things to show your products data by doing a $.get(....
		//left for brevity
	};

	var refreshData = function(data) {
		//simply call grid.reload() in case of jqGrid,
		//or update your products overview by using the data, (depends on what your server post returns)
		//or do a $.get request or something
	};

	return {
		init: init,
		refreshData: refreshData
	};
}(jQuery);

## products.html
<!DOCTYPE html>
<html>
	<head>
		<title>Products</title>
		<!-- stylesheets jquery ui and ui dialog-->
		<!-- scripts jquery and jquery ui-->
		<script src="productDialog.js"></script>
		<script src="productOverview.js"></script>
		<script src="productMediator.js"></script>
		<script>
                        $(function() {
			    productMediator.init();
                        });
		</script>
	</head>
	<body>
		<h1>Products<h1>
		<button id="createNewProduct">Create new product</button>
		<div id="productsGrid">
			<!-- Contains your products grid -->
		<div>
		<form id="productDialogForm">
			<label for="name">Name</label>
			<input id="name" name="name" />
			<label for="price">Price</label>
			<input id="price" name="price" />
			<label for="category">Category</label>
			<input id="category" name="category" />
			<button type="submit">Create</button>
		</form>
	</body>
</html>
	var productDialog = function($){
	var self = null;
	var dialogForm = null;

	var init = function() {
	if (self === null) return;
	self = this;
	initDialog();
	};

	var initDialog = function() {
	dialogForm = $('#productDialogForm');
	dialogForm.dialog({
	autoOpen: false,
	height: 300,
	width: 350,
	buttons: {
	Create: function() {
	var valid = true;
	//Some form validation, left for brevity

	if(valid) {
	$.post('someserverurl', formData, postComplete, 'json');
	}
	},
	Cancel: function() {
	$(this).dialog('close');
	}
	},
	close: function() {
	//remove validation classes from form elements
	//left for brevity
	}
	});
	//Do some cool jquery stuff on your form to make it more interactive
	//Remove the original submit button because dialog contains one
	}

	var postComplete = function(data) {
	self.trigger('formPostComplete', data); //triggers event with the response from the server
	};

	var show = function(modal) {
	if (modal) dialogForm.dialog({ modal: true; });
	else dialogForm.dialog({ modal: false; });
	dialogForm.dialog('open');
	};

	return {
	init: init,
	showModal: show(true),
	show: show
	};
	}(jQuery);
	var productMediator = function($) {
	var self = null;

	var init = function() {
	if (self === null) return;
	self = null;
	productDialog.init();

	productOverview.init();
	productDialog.bind('formPostComplete', productOverview.refreshData);

	$('#createNewProduct').click(productDialog.showModal); //binds buttonclick
	};

	return {
	init: init
	}
	}(jQuery);
	var productOverview = function($){
	var self = null;
	var grid = null;

	var init = function() {
	if (self === null) return;
	self = this;
	grid = $('#productsGrid');
	//init a jqGrid on some div id grid.jqGrid(....
	//or simply init some other things to show your products data by doing a $.get(....
	//left for brevity
	};

	var refreshData = function(data) {
	//simply call grid.reload() in case of jqGrid,
	//or update your products overview by using the data, (depends on what your server post returns)
	//or do a $.get request or something
	};

	return {
	init: init,
	refreshData: refreshData
	};
	}(jQuery);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Products</title>
	<!-- stylesheets jquery ui and ui dialog-->
	<!-- scripts jquery and jquery ui-->
	<script src="productDialog.js"></script>
	<script src="productOverview.js"></script>
	<script src="productMediator.js"></script>
	<script>
	$(function() {
	productMediator.init();
	});
	</script>
	</head>
	<body>
	<h1>Products<h1>
	<button id="createNewProduct">Create new product</button>
	<div id="productsGrid">
	<!-- Contains your products grid -->
	<div>
	<form id="productDialogForm">
	<label for="name">Name</label>
	<input id="name" name="name" />
	<label for="price">Price</label>
	<input id="price" name="price" />
	<label for="category">Category</label>
	<input id="category" name="category" />
	<button type="submit">Create</button>
	</form>
	</body>
	</html>