Ajax instant edit

A small piece of javascript reads al SPAN tags, checks if it has and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

This is a very simple script which only works with span tags. Text from the span html tag is sent to update.php which process the request.
Plain html is returned from the server and this result populates the span.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<base href=”http://www.ajaxdaddy.com/ajax/ajax-instantedit/”>
<style type=”text/css”>
body {color: white;background: #52616F;}
a { color: white; }
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>

<link rel=”stylesheet” type=”text/css” href=”” />
</head>
<body>

<div style=”border: 5px solid #D3ECFF;”>
<span id=”userName” class=”editText”>
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
</span>
</div>
<script type=”text/javascript” src=”javascript/instantedit.js”></script>
<script type=”text/javascript”>
setVarsForm("pageID=profileEdit&userID=11");
</script>
</body>
</html>

Leave a Reply