Want to extend my script with new functions, but how?

[Null]

Hi,

I have a javascript, it all works, but I want to extend it a bit. I want these functions to be added:

1. Pressing enter will do the same as the save button
2. As soon as a textarea is shown, the text should be highlighted/selected
3. If possible, replace the cancel button with a hypelink doing the same thing
4. use doubleclick instead of single click to activate: function makeEditable(id){

The js script:

Event.observe(window, 'load', init, false);

function init(){
	var max = 50;
	for (i = 1; i <= max; i++){

	makeEditable('item_'+i);}
}

function makeEditable(id){
	Event.observe(id, 'click', function(){edit($(id))}, false);
}

function edit(obj){
	Element.hide(obj);
	
	var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" cols="15" style="overflow:hidden">'+obj.innerHTML+'</textarea>';
	var button	 = '<input id="'+obj.id+'_save" type="button" value="ok" /><input id="'+obj.id+'_cancel" type="button" value="cancel" /></div>';
	
	new Insertion.After(obj, textarea+button);	
		
	Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
	Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
	
}

function showAsEditable(obj, clear){
	if (!clear){
		Element.addClassName(obj, 'editable');
	}else{
		Element.removeClassName(obj, 'editable');
	}
}

function saveChanges(obj){
	
	var new_content	=  escape($F(obj.id+'_edit'));

	obj.innerHTML	= "Saving...";
	cleanUp(obj, true);

	var success	= function(t){editComplete(t, obj);}
	var failure	= function(t){editFailed(t, obj);}

  	var url = 'edit.php';
	var pars = '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);
	if (!keepEditable) showAsEditable(obj, true);
}

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

function editFailed(t, obj){
	obj.innerHTML	= 'Sorry, the update failed.';
	cleanUp(obj);
}

Thx

[Twey]

Pressing enter will do the same as the save button

Put your input(s) in a form and perform your save when the form is submitted.

As soon as a textarea is shown, the text should be highlighted/selected

Call the .select() method of the input element.

If possible, replace the cancel button with a hypelink doing the same thing

Why? Hyperlinks are for linking to other pages, not calling script.

[Null]

Put your input(s) in a form and perform your save when the form is submitted.
Can't do this, cause then I would put every line/word I want to be editable in a form..

Call the .select() method of the input element.
Tried that, but this will select all text in the textarea when clicking in it. I want it pre-selected

Why? Hyperlinks are for linking to other pages, not calling script.
I know, but I am trying to make something like:
http://wiki.script.aculo.us/scriptac....InPlaceEditor

This script I have almost does the same (but lighter), except of these 4 questions I have. They have it too, so I wondered how the hell I can do that too

ps. added a 4 th request

[Twey]

Put your input(s) in a form and perform your save when the form is submitted.
Can't do this, cause then I would put every line/word I want to be editable in a form..

Or you could just put the whole thing in a form.

Call the .select() method of the input element.
Tried that, but this will select all text in the textarea when clicking in it. I want it pre-selected

I fail to understand you. When do you want the selection to take place? On page load? Simply call select() then.

Why? Hyperlinks are for linking to other pages, not calling script.
I know, but I am trying to make something like:
http://wiki.script.aculo.us/scriptac....InPlaceEditor

The mere fact that someone else has done it doesn't make it right. Especially when the page of the original implementor crashes horribly in Konqueror.

use doubleclick instead of single click to activate: function makeEditable(id){

Change "click" to "dblclick" for the appropriate event.

[Null]

The dblclick worked thx.

Also at this part, textarea is used:

var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" cols="15" style="overflow:hidden">'+obj.innerHTML+'</textarea>';

I only need 1 row, so isn't it better to use:

input type="text"

I tried to change this myself, but no luck so far.

I have 2 reasons to change this:
1: FF shows two rows (instead of 1 atm)
2: As said, I only need 1 row...

How to change this?

Thx

[Twey]

Yes, one would say:

<input id="'+obj.id+'_edit" name="'+obj.id+'" type="text" value="'+obj.innerHTML+'">

[Null]

Worked like a charm, I forgot some ' stuff.

No if I only could replace the cancel button with a hyperlink