Next Prev

Ajax instant edit

Read more and download "Ajax instant edit"

A small piece of javascript reads al SPAN tags, checks if it has class="editText" 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.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!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>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Bart

2010-01-07 11:31:34

I would like to use this script but how can I update the new entered data into my database?

Tim

2009-06-23 08:52:42

How would you modify this so that it actually saves the text as I type it? at the moment it ignores hard-returns so I couldn't type in a new-line or paragraph....

Munmun

2009-03-05 04:52:08

can i get the code of this "comment on" form

Ranjeet 9810544071

2009-03-04 02:02:19

i also want save in data base of this value

James

2009-02-22 23:26:54

hi, Can forward the complete code for update.php for data base so that we can understand.

Rupesh Kumar

2009-02-18 04:01:24

This is very good example.

SARFRAZ AHMED

2009-02-02 23:43:40

I had problems updating individual records, then i modified the instantedit.js file and enabled it to pass the id of the field that we want to edit. var myarray = new Array(); myarray = elem.id.split("|"); var fname = myarray[0]; var fid = myarray[1]; ///////////////////////////////// nt = remotos.enviar(urlBase + "?fieldname=" +encodeURI(fname)+ "&fid="+encodeURI(fid)+"&content="+encodeURI(campo.value)+"&"+formVars,""); Now you can update a records using a php file with this query. update questions set $fieldname = '$content' where qid = " . $_REQUEST["fid"];

Anand

2008-12-11 04:17:58

Its Really nice to have such sites and regarding the codes-> it is Very nice and understandable.Thank You.

Kevin Williams

2008-10-26 01:32:02

here it is

Kurt

2008-09-07 03:49:51

js error, if you delete all text in the field and save that....

PieterV

2008-08-18 07:59:26

I like it but what common use can it have? This is just lame parlor tricks.

Luke

2008-08-15 08:07:26

sweet

Vikas

2008-08-11 23:57:54

Its real good

Moin

2008-06-11 03:10:05

real good

Tom

2008-05-27 07:10:19

You might want to secure this in some way, since it currently permits HTML and scripting to be edited into the field and executed within the SPAN.

Chuck

2008-05-26 13:37:48

this is awesome. works great. I think that, if needed, people need to remember to but a final echo with the $content at the end of their update.php files. i had forgot it at first and then realized. everything else is simply get and manipulating the data strings.

IXy

2008-05-14 07:55:19

max good!

Nervjaga

2008-02-26 00:26:00

I'am in linux, and the examples code text displayed to me in two lines, there is un compatible new line symbols, thats sucks! But the scripts there are very nice.

Ameier

2008-01-09 18:47:06

a textarea ,a div ,can do it!

Sandeep

2007-11-28 06:11:30

Alt special characters not handled!!!!! Eg. Âº

Arevalo

2007-11-25 19:36:20

it it's awsome!

Lawk Salih

2007-11-21 10:04:27

How about permissions? Rights to edit the file?

GemicsATgmxNET

2007-10-02 05:24:26

Cheers, at mine it works fine, but I could run the storage on txt-files. Please help!

Daniel

2007-09-20 13:00:43

When I implement this script it works fine the first time you click on a span to edit, but the second time you click that span it blanks out and doesn't preserve the original value at all. Any ideas why that would happen?

Jom Bond

2007-09-13 01:44:50

The update.php file receives its data via GET so you can simply check for the defined elements and do what ever you want to them via get. email:3507072@gmail.com

Nick

2007-07-21 14:43:50

The update.php file receives its data via GET so you can simply check for the defined elements and do what ever you want to them via get.

Nick

2007-07-16 14:26:27

This example does not work unless you know how and what is in the update.php file Can you please post the update.php file that way it will make this example relevant. Or you can just email it to me at the above address. Thank you.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Ajax instant edit

Comment on this example