WordPress: Front-end Database Interface with Inline Editing



Recently, I was tasked with creating a front-end database GUI, which also allows the user to edit the results directly. In order to accomplish this, I decided the best route was to create a method to list out results through a SELECT query on the database. I also needed an input form to allow the administrator to filter the data that gets returned.

So, the first step was to create the form itself. We can’t very well search the database for specific data, if we don’t know what data to search for.

For our purposes, I’m going to use generic names and labels, so that you can alter this to fit your needs (in the event you need to use it).

I will keep it simple, and only include a few basic inputs. You can alter these inputs to suit your needs. For our purposes, I’ve invented a guitar database scenario.


<form type="post" id="searchGuitars">
	<input type="text" id="guitarmake" name="guitarmodel" placeholder="Guitar Make" />
	<input type="text" id="guitarmodel" name="guitarmodel" placeholder="Guitar Model" />
	<input type="text" id="guitarcolorfinish" name="guitarcolorfinish" placeholder="Guitar Color/Finish" />
	<input type="hidden" name="action" value="searchGuitars" />
	<input type="submit" id="findguitars" name="findguitars" value="Find Guitars" />
</form>

Now that we have the form setup, we will want to write some jQuery to handle the submission of the form, and later AJAX submit that same form while serializing the form’s data.

We will start off by building out a basic document ready function.


$(document).ready(function(){
	//this is where we will place our code
});

Next, we will want to build out a function for submitting the form, which will handle the AJAX as well. This will go inside of our document ready function:


$(document).ready(function(){
	function ajaxSubmit(){
		var myFormSubmit = $(this).serialize();
		jQuery.ajax({
			type:"POST",
			url: "wp-admin/admin-ajax.php",
			data: myFormSubmit,
			success:function(data){
				$("#result").html(data);
			},
			error: function(errorThrown){
				//do something on error
			}  
		});
		return false;
	}
});

Now that we have our AJAX written out, we will want to make sure that the function will run on form submission, so (just above this code), we will place this submit function:


$('#searchGuitars').submit(ajaxSubmit);