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);
		}
	});

	$('#datepicker').datepicker({
		inline: true,
		showOtherMonths: true,
		//dateFormat: 'dd MM yy',
		dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
		showOn: $("#inputDate"),
		//buttonImage: "img/calendar-blue.png",
		//buttonImageOnly: true,
	});
 
	$('#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(\'del\', \'' + 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(html);
		}
	}
	catch (e) {}
}
 
function action(action, data_id, data){
	this.modal = { header: $(".modal-header>h3"),
				   body: $(".modal-body"),
				   footer: $(".modal-footer") };

	this.edit = function (data_id, data) {
		this.modal.header.html("Edit event");
		this.modal.body.html("EDIT");
		this.modal.footer.html('<button type="button" id="edelete" class="btn btn-primary" data-loading-text="Editing..." data-complete-text="The event has been edited!">EDIT</button>');
	};
	this.del = 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('<button type="button" id="edelete" class="btn btn-danger" data-loading-text="Deleting..." data-complete-text="The event has been deleted!">DELETE</button>');
	};
	
	this[action](data_id, data);
	var beforeSend = this[action](data_id, data);
 
	$("button#edelete").on('click', function () {
		var eDelete = $(this);
		$.ajax({
			dataType: "json",
			type: "POST",
			data: { action: action, id: data_id, title: "hola"},
			url: "./php/events_table.php",
			beforeSend: function() { eDelete.button('loading'); eDelete.attr("autocomplete", "off"); },
			success: function(data) {
				if (data[0] == true) { alert("bien") }
				else { alert("mal") }
			},
			complete: function() {
				eDelete.prop("disabled", true);
				eDelete.html(eDelete.attr("data-complete-text"));
			}
		});
	});
}