PDA

View Full Version : Want to extend my script with new functions, but how?



Null
02-17-2007, 03:45 PM
Hi,

I have a javascript, it all works, but I want to extend it a bit. I want these functions to be added:
Pressing enter will do the same as the save button As soon as a textarea is shown, the text should be highlighted/selected If possible, replace the cancel button with a hypelink doing the same thing 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
02-17-2007, 04:12 PM
Pressing enter will do the same as the save buttonPut 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/selectedCall the .select() method of the input element.
If possible, replace the cancel button with a hypelink doing the same thingWhy? Hyperlinks are for linking to other pages, not calling script.

Null
02-17-2007, 04:28 PM
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/scriptaculous/show/Ajax.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
02-17-2007, 08:02 PM
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-selectedI 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....InPlaceEditorThe 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
02-17-2007, 10:58 PM
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
02-17-2007, 11:14 PM
Yes, one would say:
<input id="'+obj.id+'_edit" name="'+obj.id+'" type="text" value="'+obj.innerHTML+'">

Null
02-18-2007, 12:00 AM
Worked like a charm, I forgot some ' stuff.

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