AJAX Edit In Place

5.21.2008 | Old Posts

Quite a simple thing to do with javascript is show and hide elements in the DOM. Again I will use the prototype javascript library in this tutorial because it makes accessing the DOM so much easier, but many other libraries will have the same basic functionality as prototype. We will then use AJAX to save the changes to the database.

The HTML

So what we are going to do here is have the normal text ouput in HTML shown and have the textarea where you can edit the text hidden. Quite simple.

<script src="prototype.js" type="text/javascript"></script>
 
<div id="edit_controls" style="display:none;">
    <form id="my-form" method="POST" action="ajax.php">
    <textarea id="textedit" name="textedit" style="width:100%;height:200px;">This is my text...</textarea>
    <input type="button" id="subbut" value="submit" onclick="edit(false);" />
    </form>
</div>
 
<div id="normal_controls">
    <div id="textdiv">This is my text...</div>
    <input type="button" value="edit" onclick="edit(true);" />
</div>

Notice a few things. The edit() method for the edit and submit buttons is the method we will use to show and hide things. Also notice that the “edit_controls” div is initially hidden using the style display:none;. Aslo the text displayed here you would load from the database to make it useful.

The Javascript

So we really only need one method. It is that simple.

function edit(bool){
	if(bool){
		$('normal_controls').hide();
		$('edit_controls').show();
	} else {
		$('my-form').request({
			onSuccess: function(transport){
				var response = transport.responseText || "no response text";
				$('textdiv').innerHTML = response;
				$('normal_controls').show();
				$('edit_controls').hide();
			},
			onFailure: function(transport){ 
				$('normal_controls').show();
				$('edit_controls').hide();
				alert("Something went wrong...");
			}
		});
	}
}

So all we are doing here is hiding one div and displaying the other depending on the value of “bool”. Very simple. When the editing has been done (bool = false) this is where you use AJAX to save to the database and update the “textdiv”. We just use the Prototype form.request() function to send the request to ajax.php.

The PHP

In reality the ajax.php file would use an UPDATE query on the database to update it with the new information then echo it out. In this example we are just going to echo out the information we recieve:

<?
//Do a mysql UPDATE here
echo nl2br($_POST['textedit']);
?>

Conclusion

So the whole file looks like:

<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<title>AJAX Edit In Place</title>
</head>
<body>
<div id="wrapper">
	<h2>AJAX Edit In Place</h2>
	<div id="edit_controls" style="display:none;">
		<form id="my-form" method="POST" action="ajax.php">
	    <textarea id="textedit" name="textedit" style="width:100%;height:200px;">This is my text...</textarea>
	    <input type="button" id="subbut" value="submit" onclick="edit(false);" />
		</form>
	</div>
 
	<div id="normal_controls">
	    <div id="textdiv">This is my text...</div>
	    <input type="button" value="edit" onclick="edit(true);" />
	</div>
</div>
 
<script type="text/javascript">
function edit(bool){
	if(bool){
		$('normal_controls').hide();
		$('edit_controls').show();
	} else {
		$('my-form').request({
			onSuccess: function(transport){
				var response = transport.responseText || "no response text";
				$('textdiv').innerHTML = response;
				$('normal_controls').show();
				$('edit_controls').hide();
			},
			onFailure: function(transport){ 
				$('normal_controls').show();
				$('edit_controls').hide();
				alert("Something went wrong...");
			}
		});
	}
}
</script>
</body>
</html>

Click here to see the live version. I hope this might help some people to realise how powerful and easy to use AJAX can be.

Update: Code updated thanks to kangax for his suggestions.

  • Digg
  • StumbleUpon
  • del.icio.us
  • Reddit
  • Wikio
  • Technorati
  • Pownce
  • E-mail this story to a friend!

Similar Posts

Responses

kangax
5.21.2008

Instead of “style.display = ”” and “style.display = ‘none’”, you could use prototype’s Element#show/Element#hide. You could also take advantage of Form#request which serializes and sends form via ajax.

Best,
kangax

gilbitron
5.21.2008

Thanks for that kangax. I’ve updated the code to include your suggestions.

Anjelina
7.19.2008

Hi,
I like your Ajax edit, its really simple. and can be understood by learner too.
Please can you add \”Loading…\” message until editting is complete? That would give your script more interactivity.

Thanks any way for sharing this..

Anjelina

ldndude
8.05.2008

Thank you so much! I went through a whole bunch of similar scripts which worked fine for editing into txt files but none of them connected well to a database. Yours worked perfectly and flawlessly, and above all, yours had the simplest implementation and smallest straightforward code. Thank you!

Comments