 |
|
| |
|
| |
|
| |
|
|
|
| Ajax instant edit
|
| |
|
|
Jamal Ahmad |
|
|
14 Comments | 1102 Hits |
|
Tags:
Ajax, instant edit, inline editing |
| |
|
As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.
You say: but that ain't new at all! I say: But all of this has been made easy to use and implement: 2.0! 
VIEW DEMO
how you can make it work (5 easy steps for integration)
- Download this Javascript file: InstantEdit 2.0 JS
- Create a update file that handles the input. For example this PHP: Update File
- In your page add the javascript: <script type="text/javascript" src="instantedit.js"></script>
- Set fixed vars (like hidden elements in a field post). These will be posted with the editable field so you can identify a user/session.
<script type="text/javascript"> setVarsForm("pageID=profileEdit&userID=11"); </script> - Last step: in your HTML for any editable field add a SPAN arround it:
<span id="userName" class="editText">John Doe</span>
Note: id is the fieldname (?userName=John Doe&), and should be unique!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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."
</span>
</div>
<script type="text/javascript" src="javascript/instantedit.js"></script>
<script type="text/javascript">
setVarsForm("pageID=profileEdit&userID=11");
</script>
</body>
</html> how it works 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.
IE? FF? This script works in internet explorer, netscape and firefox. Any other platforms haven't been tested. That's kinda up to you. Update: If you want to force a textarea over a textfield (for example to edit a piece of HTML) use class="editText" offsetHeight="10". If you want to PUSH an ID to your script I use: id="edit_userID_$userID". In your update script, strip the text, and keep the $userID. Et voila. |
|
|
|
|
|
|
|
| |
|
| |
|
|
| |
|
This is very good example easy to understand and quick to implement. |
| |
|
|
Anand |
Friday, May 15, 2009 @ 07:42 AM |
|
| |
|
Its Really nice to have such sites and regarding the codes-> it is Very nice and understandable.Thank You. |
| |
|
|
Kurt |
Friday, May 15, 2009 @ 09:37 AM |
|
| |
|
js error, if you delete all text in the field and save that.... |
| |
|
|
Tom |
Friday, May 15, 2009 @ 10:25 AM |
|
| |
|
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 |
Friday, May 15, 2009 @ 11:59 AM |
|
| |
|
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. |
| |
|
|
Nervjaga |
Saturday, May 16, 2009 @ 08:24 AM |
|
| |
|
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. |
| |
|
|
Daniel |
Saturday, May 16, 2009 @ 09:33 AM |
|
| |
|
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 |
Saturday, May 16, 2009 @ 11:01 AM |
|
| |
|
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:info@exploremyblog.com |
| |
|
|
Nick |
Saturday, May 16, 2009 @ 12:28 PM |
|
| |
|
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. |
| |
|
|
|
| |
|
yes Nick is right, you have to understand update.php file if you want to work dynamically or through database. |
| |
|
|
|
| |
|
Thanks for this useful information. This is very helpful in web designing and web development. |
| |
|
|
|
| |
|
I implemented 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? |
| |
|
|
|
| |
|
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? |
| |
|
|
|
| |
|
That's Cool i really love it to implement but problem is i dont know how to do it because i dont know PHP. |
| |
|
|
| |
|
| |
|
|
|
|
|
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
Blog
Community |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
Popular Posts |
| |
|
| |
|
| |
|
| |
|
| |
ExploreMyBlog Poll |
| |
|
| |
|
| |
|
| |
Blog Categories |
| |
|
| |
|
| |
|
| |
|
| |
|
|
|
|
![[ Stumble Upon ]](../assets/images/stubmleupon_bookmarking_icon.gif){kind=icon}
![[ Facebook ]](../assets/images/facebook_bookmarking_icon.gif){kind=icon}
![[ del.icio.us ]](../assets/images/delicious_bookmarking_icon.gif){kind=icon}
![[ furl ]](../assets/images/furl_bookmarking_icon.gif){kind=icon}
![[Sphinn]](../assets/images/sphinn_bookmarking_icon.gif){kind=icon}
![[ Digg ]](../assets/images/digg_bookmarking_icon.gif){kind=icon}
![[ Twitter ]](../assets/images/twitter_bookmarking_icon.gif){kind=icon}
![[ Technorati ]](../assets/images/technorati_bookmarking_icon.gif){kind=icon}
![[ Reddit ]](../assets/images/reddit_bookmarking_icon.gif){kind=icon}
![[ Subscribe To RSS Feeds ]](../assets/images/rss_feeds.gif){kind=small}
