script.js

$(function() {
	tbody = $("tbody");
	$.ajax({
		dataType: "json",
		type: "POST",
		data: { action: "select" },
		url: "./php/events_table.php",
		beforeSend: function() { tbody.html("<td colspan=\"4\" style=\"text-align: center; padding: 50px 0px;\">Loading events...</td>"); },
		success: function(data) {
			getEventsTable(data);
		}
	});

	$('#inputTime').timepicker();
});

function getEventsTable(data) {
	tbody.empty();

	try {
		for (i = 0; i <= data.length; i++) {
			var html = '<tr>' +
							'<td>' + data[i]["title"] + '</td>' +
							'<td>' + data[i]["location"] + '</td>' +
							'<td>' +  data[i]["selector"] + '</td>' +
							'<td class="config">' +
								'<div class="btn-group pull-right">' +
									'<button href="javascript:void(0)" class="btn btn-small dropdown-toggle" data-toggle="dropdown">' +
										'<i class="icon-cog"></i>' +
									'</button>' +
									'<ul class="dropdown-menu">' +
										'<li>' +
											'<a 	class="edit" onclick="action(\'edit\', \'' + data[i]["id"] + '|' +  data[i]["title"] + '\')" ' +
												'href="#" data-toggle="modal" data-target="#myModal">' +
													'<i class="icon-edit"></i>&nbsp;&nbsp;Edit' +
											'</a>' +
										'</li>' +
										'<li>' +
											'<a  class="delete" onclick="action(\'delete\', \'' + data[i]["id"] + "', '" +  data[i]["title"] + "&nbsp;&nbsp;" + data[i]["location"] + "&nbsp;&nbsp;" + data[i]["selector"] + '\')"' +
												'href="#" data-toggle="modal" data-target="#myModal">' +
													'<i class="icon-remove"></i>&nbsp;&nbsp;Delete' +
											'</a>' +
										'</li>' +
									'</ul>' +
								'</div>' +
							'</td>' +
						'</tr>';
			tbody.append();
		}
	}
	catch (e) {}
}

function action(action, data_id, data){
	this.modal = {
		header : $(".modal-header>h3"),
		body : $(".modal-body"),
		footer :$(".modal-footer")
	};
	var inDelete = $("input#edelete");
	this.edit = function (data_id, data){
		this.modal.header.html("Edit event");
		this.modal.body.html("");
		this.modal.footer.html('<input id="edelete" type="submit" class="btn" value="EDIT" />');
		return '<span style="text-align: center; padding: 50px 0px;">Updating...</span>';
	};
	this.delete = function(data_id, data){
		this.modal.header.html("Delete event");
		this.modal.body.html('<h3 style="text-align: center">You are going to delete:</h3><br /><h4 style="text-align: center">' + data + '</h4>');
		this.modal.footer.html('<input id="edelete" type="submit" class="btn btn-danger" value="DELETE" />');
		return '<span style="text-align: center; padding: 50px 0px;">Deleting...</span>';
	};
	
	var beforeSend = this[action](data_id,data);

	inDelete.submit(function () {
		$.ajax({
			dataType: "json",
			type: "POST",
			data: { action: action },
			url: "./php/events_table.php",
			beforeSend: function() { tbody.html(beforeSend); },
			success: function(data) {
				alert("Bien");
			}
		});
	});
}