Event Table (DataTables version) - Attach functions to links

event-page(snippet).jsp

$(function() {
	...
	...

	// Assign a function to addLink
	// Displays a dialog form for adding a new record
	$("#addLink").click(function() { 
		// Show the dialog
		$( "#addDialog" ).dialog({	
			modal: true,
			width: 350,
			close: function(event, ui) { }
		});
		return false;
	});

	// Assign a function to editLink
	// Checks first if a record is selected from the table
	// Then it retrieves that record via jQuery's data()storage method
	// Finally it displays a dialog form for editing the selected record
	$("#editLink").click(function() { 
		var tId = $('input:radio[name=eventRadio]:checked').val();
		if (tId == null) {
			$("#genericDialog").text("Select a record first!");
			$("#genericDialog").dialog( 
					{	title: 'Error',
						modal: true,
						buttons: {"Ok": function()  {
							$(this).dialog("close");} 
						}
					});
		} else {
			// Retrieve record
			var record = null;
			for (var i=0; i<$('#eventTable').data('records').length; i++) {
				if ($('#eventTable').data('records')[i].id == tId) {
					record = $('#eventTable').data('records')[i];
					break;
				}
			}

			// Assign record to form fields
			$('#editForm #ename').val(record.name.toString());
			$('#editForm #edate').val(new Date(record.date).toString('yyyy-MM-dd'));
			$('#editForm #edescription').val(record.description.toString());
			$('#editForm #eparticipants').val(record.participants.toString());

			// Show the dialog
			$("#editDialog").dialog({	
				modal: true,
				width: 350,
				close: function(event, ui) { }
			});
		}
		return false;
	});

	// Assign a function to deleteLink
	// Checks first if a record is selected from the table
	// Finally it displays a dialog form for deleting the selected record
	$("#deleteLink").click(function() { 
		// show dialog box
		var tId = $('input:radio[name=eventRadio]:checked').val();
		if (tId == null) {
			$("#genericDialog").text("Select a record first!");
			$("#genericDialog").dialog( 
					{	title: 'Error',
						modal: true,
						buttons: {"Ok": function()  {
							$(this).dialog("close");} 
						}
					});
		} else {
			$("#deleteDialog").dialog({	
				modal: true,
				width: 350,
				close: function(event, ui) { }
			});
		}
		return false;
	});

	...
	...
});