Updating a Database On Change Using AJAX

Programmers

Updating a Database On Change Using AJAXWith AJAX you can create some pretty awesome effects on your website. One of my favorite is using AJAX to submit each input when the user changes the mouse focus off.

In this post we’ll cover the basics of submitting each text input when the user changes focus.

The Basic Setup

For all jQuery, you’ll need the following two things in your page. First, loading the jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Second, you’ll need to add this code around all the other code we write below:

$(document).ready(function() {
});

Catching the On Focus and Assembling the Variables

$('textarea, input').on('blur', function() {
});

We’ll need to catch the event that happens when the user moves off of either a text area or an input. Notice when we reference the text area and the input area we use a comma in between them and don’t use either the ID sign or the Class sign (# or .).

Using the jQuery method “on” and referencing the “blur” event, we’ll start a function.

Next we’ll add some coding in that function.

$('textarea, input').on('blur', function() {
	var itemID = $(this).attr('id');
    var itemVal = $(this).val();
	var itemVal = itemVal.replace(/n/g, '<br />');
	var itemVal = itemVal.replace(/&/g, 'and');
	var itemstring = "ID=" + itemID + "&value=" + itemVal;

	processChange(itemstring);
});

Line 2 we get the ID of the item we just moved off of. This means that the text area or the input area that we created must have an ID!

Line 3 we get the value of this text area or input.

Line 4 and Line 5 we replace all the “n” with “<br/>” so we’ve got line breaks, and all “&” symbols with the word “and” because when we pass the variables in the next portion we don’t it to get messed up.

Line 6 we string together variables to pass in our next function. In this one we’re only passing the ID of the text area or input and the value of that input. That way we’ll know what field to update in the database.

Line 8 we call the function we’ll create below and pass the variable “itemstring” to it.

AJAX to Submit and Return the Information

Our function to submit the individual text area or input is the same as any AJAX Submit, explained here: http://kimjoyfox.com/ajax-jquery-and-form-submission/

But here’s the coding I used so you can take a look.

I leave the testing lines in the code and simply comment them out for easy future edits (line 2, 3, 10).

The first portion of the code is pretty standard AJAX. Notice the the data passed in line 7 is the variable we passed to the function.

function processChange(itemstring){
	//console.log(itemstring);
	//return false;
	$.ajax({
		type: "GET",
		url: "php/update.php",
		data: itemstring,
		complete: function(data) {
			var Resp = data.responseText;
			//console.log(Resp);
		},
		success: function() {
			$('#saved').css('display', 'block');
			setTimeout(function() {
				$('#saved').animate({
					opacity: 0,
				}, 500, function(){
					$('#saved').css('display', 'none').css('opacity', '1');
				});
			}, 1000);
		}
	});
}

If you’ll notice the success portion of the AJAX function, on line 12, we add feedback for the user. The “Saved” Div is already on the page, but set to “display:none”. So if it succeeds, we display our little “Saved” Div for the user. However, we also want to get rid of this Div (which I have set to be overtop of everything and in the middle of the screen), so next we use the setTimeout built-in function.

We animate the “Saved” Div to 0 opacity at a speed of 500 and then, once that’s done, we change the display to none, and the CSS opacity to 1. At first glance that last part – changing the opacity to 1 seems a bit weird, but if we leave the opacity at 0, then when another input area is saved the “Saved” Div will still be set to opacity 0 so it won’t show up.

We leave the “Saved” Div visible for 1 second, which in line 20 is done by coding 1000 milliseconds.

Summary

Once you start with the right steps, using the jQuery “on blur” method, you can accomplish a lot of pretty cool effects for your users. Hopefully this will get you started using AJAX on change.

Have questions? Feel free to ask and I’ll do my best to answer!

Comments
  • Spizzio says:

    Appreciate the thought put into this, I dropped meta tags for a while but have started using them again as I have been told that other search engines still rely on them.