« Previous entry | Next entry » Browse > Snippets

Skip to comments (18) AJAX: Edit in Place
Posted by Snyke on Mar 07 2006 @ 01:02  :: 7660 unique visits

AJAX: In situ edit
A simple edit in place using Prototype, based on the tutorial @ 24ways.org

CODE: JAVASCRIPT
/*
* Snyke
* Description: In-Situ Editing of text paragraphs on click.
* Based on 'Edit-in-Place with Ajax' of 24ways.org
* @params string element, parameters (get)
*/


function editinplace(obj, params){
    Element.hide(obj);
    var textarea = '<div id="'+obj.id+'_editor"><textarea class="editable" id="'+obj.id+'_edit" name="'+obj.id+'" rows="4" cols="60">'+obj.innerHTML+'</textarea>';
    var button   = '<div><input id="'+obj.id+'_save" type="button" value="Save" /> <input id="'+obj.id+'_cancel" type="button" value="Cancel" /></div></div>';
    new Insertion.After(obj, textarea+button);
    Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj, params)}, false);
    Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
}

function saveChanges(obj, params){
    var new_content =  escape($F(obj.id+'_edit'));
    obj.innerHTML   = "<img src='thm/img/loading.gif'> Saving...";
  cleanUp(obj, true);
 
    var success = function(t){editComplete(t, obj);}
    var failure = function(t){editFailed(t, obj);}
  var url = 'index.php';
    var pars = '&'+params+'&ajax=editinplace&id='+obj.id+'&content='+new_content;
    var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});
}

function cleanUp(obj, keepEditable){
    Element.remove(obj.id+'_editor');
    Element.show(obj);
    //new Effect.Highlight(obj, { duration: 3.0 });
}

function editComplete(t, obj){
    obj.innerHTML   = t.responseText;
}

function editFailed(t, obj){
    obj.innerHTML   = 'Could not save...';
    cleanUp(obj);
}

18 comments posted so far
Add your own »

1. On Mar 13 2006 @ 07:19 TheJohnDoe2005 wrote:

For anyone who is new to this...
You must have this script in order for the function above to work

Filename : prototype.js

JavaScript Framework
Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

For the latest Version
=======================
http://prototype.conio.net/

2. On Mar 13 2006 @ 11:18 TheJohnDoe2005 wrote:

My Test Example here
http://lab.mooo.com/
Similiar output as what 24ways.org example does...but I didn't use the prototype.js.

2 Example shown...
The first one doesn't use AJAX while the second one does....

3. On Jul 03 2006 @ 11:40 guest wrote:

@TheJohnDoe2005

u sure you made the above?

http://lab.megaleecher.net

u use an iframe to point to this site :\

4. On Aug 27 2008 @ 04:54 guest wrote:

Top 10 best roulette strategy gambling casinos based on micro gaming platform.
Best play blackjack online gambling casinos, play to win and enjoy your online
blackjack software experience.
Learn how to play video poker gambling and experience the thrill of gambling and beating online casinos.
Use a free poker guide to calculate your winning poker odds.
Learn the art of gambling horse racing and play to win your punts at the races.
Dont buy movies, get movie downloading movies and watch them for free.
Earn money and work from home, with learn forex, trade the forex market.
Get all sorts of iphone for your new iphone mobile telephone.

5. On Jan 09 2009 @ 11:07 snowy wrote:

Hi, i was wondering if anyone else had a problem with copying and pasting into the fields.....it just doesnt save!!

6. On Jan 09 2009 @ 12:14 snowy wrote:

Hi, i was wondering if anyone else had a problem with copying and pasting into the fields.....it just doesnt save!!

8. On Mar 05 2009 @ 08:43 guest wrote:

A handsome manor<a href="http://www.wowgoldbag.fr" title="wow gold">wow gold</a>house grew out<a href="http://www.tbcgold.fr" title="wow gold">wow gold</a>of the darkness<a href="http://www.psii.org" title="wow gold">wow gold</a>at the end of<a href="http://www.wowgold.ws" title="wow gold">wow gold</a>the straight<a href="http://www.wowgoldkaufen.com" title="wow gold">wow gold</a>drive, lights <a href="http://www.wowtao.fr" title="wow gold">wow gold</a>glinting in the diamond

9. On Mar 05 2009 @ 08:45 guest wrote:

A handsomewow goldmanor house wow goldgrew out of wow goldthe darkness wow goldat the end ofwow goldthe straight wow golddrive, lights

10. On Mar 05 2009 @ 08:45 guest wrote:

Somewheredofus kamasin the darkdofus kamasgarden beyond kamas dofusthe hedge a acheter dofusfountain wasbuy kamasplaying.acheter kamas

11. On Mar 05 2009 @ 08:45 guest wrote:

Gravel crackledworld of warcraft goldbeneath cheap wow goldtheir feet wow oras Snapewow power levelingand Yaxley buy wow goldsped toward cheap wow goldtoward the frontwow power levelingdoor, whichdofus kamasswung inward abuy ffxi giltheir approach,Lord of the Rings Online goldthough nobody

12. On Mar 05 2009 @ 08:46 guest wrote:

The hallwaywow goldwas large, wow golddimly lit, wow goldand sumptuouslywow golddecorated, wow goldwith a magnificent

13. On Mar 05 2009 @ 08:46 guest wrote:

The eyes ofdofus kamasthe pale-facedkamas dofusportraits onacheter kamasthe wall followeddofus kamas   Snape and Yaxley kamas dofusas they acheter kamasstrode past. dofus kamasThe two menkamas dofushalted at buy kamasa heavy woodendofus kamasdoor leading kamas dofusinto theachat kamasnext room, dofus kamashesitated for kamas dofusthe space of acheter des kamasa heartbeat

16. On Jul 14 2009 @ 04:04 guest wrote:

buy wow gold
my wow power leveling
buy wow gold
good wow power leveling
BUY wow gold
my wow power leveling
CHEAP rs gold
cheap wow power leveling
CHEAPEST lotro gold
MY aion gold
buy wow gold
cheap wow gold
CHEAPEST wow gold

18. On Jan 06 2010 @ 21:25 guest wrote:

Silberbarren kaufen

Add a new comment

Name:
Password: (leave empty for anonymous comment)
 
View formatting tags Comment: