Edit in Place... has it been done?

[JohnT]

with YUI-EXT? I have seen it done with prototype, but my brain cannot hold another Javascript library's info!

If anyone can point me to an example, that would be great.

Thank you.

[Bobafart]

there is in-line editing with grids if that is what you are referring to

[JohnT]

I had this in mind:

http://tool-man.org/examples/edit-in-place.html

anything like that done in EXT?

[INeedADip]

We are doing some editing stuff:

http://ez.emaildirect.com

[JohnT]

I'd say so! Nice!

I sure will use that as a model.

I gotta give this a shot myself.... so if you don't mind checking back, I am sure I will have a question or two.

Great work INeedADip!

[aconran]

Some awesome work INeedADip!!

[rodiniz]

Very nice.. It took a while for the page to load but very nice Ineed.
I see you are using ajax.net .Very nice library also.

[brian.moeskau]

INeedADip, unless I'm mistaken, it looks like your editor widget is a Telerik R.A.D. editor? Seems to work nicely, but probably won't be much help to anyone trying to do the same using Ext. Or did I miss something?

On another note, as you're using the Telerik controls with Ext, how has that worked out for you? Any big issues using them together? I'm also using AjaxPro and having pretty good luck with that, but I got burned trying to use the MS Ajax Toolkit and so have stayed away from other third party Ajax control libs. I'd be interested in your experience.

[INeedADip]

Thats why I just said that we are doing "some editing stuff".
I didn't mean to suggest that we created the Telerik Editor, we are using yui-ext for the hover, dialog boxes, tabs, and general DOM manipulation on that page.

EmailDirect mainly utilizes AjaxPro.NET and the YUI / yui-ext. The telerik editor control is the only other control we are using. We've had no problems what-so-ever with Telerik or AjaxPro. I can't speak for any other libraries because we don't use any.

I've thought about trying out AjaxControl kit and what not, but I'm a huge fan of AjaxPro and when you couple that with how easy Jack has made everything else (DOM manipulation, Dialogs, Tree views, Grids, etc...) I just haven't really needed anything else.

[JohnT]

Well, I wrote my own:

http://missioncriticalmedia.com/trope/editInPlace.html

It works with P, DIV and SPAN tags.

This is my first class I have ever written in Javascript. It appears to work.

Double click to edit.

Suggestions on my code would be appreciated.

Thanks!

John T.

[rodiniz]

Well, I wrote my own:

http://missioncriticalmedia.com/trope/editInPlace.html

It works with P, DIV and SPAN tags.

This is my first class I have ever written in Javascript. It appears to work.

Double click to edit.

Suggestions on my code would be appreciated.

Thanks!

John T.
Not bad... I would probably use a TextArea instead of input type text to edit the data
and use css class to make the borders more beautiful.
You could also use the DomHelper.

[brian.moeskau]

Not bad. You might want to test on a decent-sized dom that has lots of editable pieces. I can foresee that you might want to make an entire page editable (with lots of editable regions), and since you are instantiating and inserting objects into the dom at startup, this may or may not perform up to par. If it does, fine -- if not, you may consider doing lazy instantiation of your editor. Also, as there can only be one at a time by your current design anyway, might be better in general to simply create one editor on demand, then reuse the same instance each time, simply attaching it as needed to each new div.

It would be really sweet to be able to combine this functionality into Ext somehow so that we could do something like:

Ext.select('div').makeEditable();
:)

[JohnT]

Also, as there can only be one at a time by your current design

I thought I made it a class? Didn't I ? lol

I have tested with 3 elements, all editable.



var myEditable = new EEP.EditinPlace("edit", {

saveAction : Trope.doSave,
clsName : "hoverStyle"

});

var myEditable2 = new EEP.EditinPlace("edit2", {

saveAction : Trope.doSave,
clsName : "hoverStyle"

});

var myEditable3 = new EEP.EditinPlace("edit3", {

saveAction : Trope.doSave,
clsName : "hoverStyle"

});



and it worked.

Not sure about the performance with LOTS of stuff on a page. I will give it a shot though.

and hell yeah, this would be fantastic:




Ext.select('div').makeEditable();



hint hint Jack. :)

[brian.moeskau]

Also, as there can only be one at a time by your current design
I thought I made it a class? Didn't I ? lol

Yeah, I just meant that only one editor can be active at a time. If that's the case, there's no need to create three separate inputs and attach them all to the dom at creation time. Just create one, then reuse it on each edit operation. E.g., give it an id that is unique to your class that you can check to see if it already exists.

[JohnT]

Oh I see. Yes, that would make sense. Also, I think I just realized that I am creating a new one EACH time , even if you already edited an "editable". Ugh...




/**
* @class EIP.EditinPlace
* Creates an editable element


*/

EEP = {};

EEP.EditinPlace = function(el, oConfig){

/* Apply Config */
Ext.util.Config.apply(this, oConfig,{

trigger : "click"

});

/* Get Handle */
this.el = getEl(el);
el = this.el;

/* Create Overlay Div */
overlayConfig = {
tag : "DIV",
id : YAHOO.util.Dom.generateId()
};

/* Insert Into DOM */
getEl(document.body).createChild(overlayConfig);

/* Save the ID so we can show/hide it */
this.overLayId = overlayConfig.id;
overlay = getEl(this.overLayId);

/* Attach Overlay Events */
el.on("mouseover", this.showOverlay, this);
getEl(this.overLayId).on("mouseout", this.hideOverlay, this);
getEl(this.overLayId).on(this.trigger, this.doTheEdit, this);

/* Overlay Visibility */
overlay.setVisible(false);
overlay.setOpacity(.35);

/* Overlay Class */
overlay.addClass(this.clsName);

/* Overlay to match Element */
overlay.setBox(el.getBox());


}



EEP.EditinPlace.prototype = {

setAction : function(saveAction){
if(typeof saveAction != 'function'){
return;
} else {
this.saveAction = saveAction;
}
return this;
},

performAction : function(){

this.saveAction.call();

},

hideOverlay : function(){
getEl(this.overLayId).setVisible(false);

},

showOverlay : function(){
getEl(this.overLayId).setVisible(true);
},

doTheEdit : function(){

// Get The Text
switch(this.el.dom.tagName){

case "P":
this.originalText = this.el.dom.firstChild.nodeValue;
break;

case "DIV":
this.originalText = this.el.dom.innerHTML ;
break;

case "SPAN":
this.originalText = this.el.dom.innerHTML ;
break;

}

// Now Create Text Box
inputConfig = {
tag : "INPUT",
id : YAHOO.util.Dom.generateId(),
type : "text",
value : this.originalText
};
getEl(document.body).createChild(inputConfig);

/* Size Input Box */
this.inputElement = getEl(inputConfig.id);
this.inputElement.setBox(this.el.getBox());

/* Hide Original Element */
this.el.setVisible(false);

/* Show new Input Box */
this.inputElement.setVisible(true);

/* Add Blur Event to update the original Div*/
this.inputElement.on("blur", this.doRestore, this);

},

doRestore : function(){
this.el.dom.innerHTML = this.inputElement.dom.value;
this.inputElement.setVisible(false);
this.el.setVisible(true);
this.performAction();
}

};

[JohnT]

Why the hell did I call this EEP ??? :shock:

It was supposed to be EIP, which would make more sense.

[brian.moeskau]

I would call the class 'Editable' as it is conceptually similar to 'Resizable' -- wrapping additional behavior around an existing element. I would also change your input creation logic to be lazy and to store the ref so that you don't create it multiple times. I realize that you added doRestore for this reason, but the way it's coded you'll still get duplicates if someone calls doTheEdit more than once. How about something like this:

if (!this.inputElement) {
// Now Create Text Box
inputConfig = {
tag : "INPUT",
id : YAHOO.util.Dom.generateId(),
type : "text",
value : this.originalText
};
getEl(document.body).createChild(inputConfig);
this.inputElement = getEl(inputConfig.id);

/* Add Blur Event to update the original Div*/
this.inputElement.on("blur", this.doRestore, this);
}

/* Size Input Box */
this.inputElement.setBox(this.el.getBox());

/* Hide Original Element */
this.el.setVisible(false);

/* Show new Input Box */
this.inputElement.setVisible(true);

[JohnT]

Thanks Brian. I made those changes, and now it appears the performAction method is being called repeatedly for some reason.

Here is the link again:

http://missioncriticalmedia.com/trope/editInPlace.html

and here is the updated code:




/**
* @class EIP.EditinPlace
* Creates an editable element


*/

EIP = {};

EIP.Editable = function(el, oConfig){

/* Apply Config */
Ext.util.Config.apply(this, oConfig,{

trigger : "click"

});

/* Get Handle */
this.el = getEl(el);
el = this.el;

/* Create Overlay Div */
overlayConfig = {
tag : "DIV",
id : YAHOO.util.Dom.generateId()
};

/* Insert Into DOM */
getEl(document.body).createChild(overlayConfig);

/* Save the ID so we can show/hide it */
this.overLayId = overlayConfig.id;
overlay = getEl(this.overLayId);

/* Attach Overlay Events */
el.on("mouseover", this.showOverlay, this);
getEl(this.overLayId).on("mouseout", this.hideOverlay, this);
getEl(this.overLayId).on(this.trigger, this.doTheEdit, this);

/* Overlay Visibility */
overlay.setVisible(false);
overlay.setOpacity(.35);

/* Overlay Class */
overlay.addClass(this.clsName);

/* Overlay to match Element */
overlay.setBox(el.getBox());


}



EIP.Editable.prototype = {

setAction : function(saveAction){
if(typeof saveAction != 'function'){
return;
} else {
this.saveAction = saveAction;
}
return this;
},

performAction : function(){

this.saveAction.call();

},

hideOverlay : function(){
getEl(this.overLayId).setVisible(false);

},

showOverlay : function(){
getEl(this.overLayId).setVisible(true);
},

doTheEdit : function(){

// Get The Text
switch(this.el.dom.tagName){

case "P":
this.originalText = this.el.dom.firstChild.nodeValue;
break;

case "DIV":
this.originalText = this.el.dom.innerHTML ;
break;

case "SPAN":
this.originalText = this.el.dom.innerHTML ;
break;

}

if (!this.inputElement) {
// Now Create Text Box
inputConfig = {
tag : "INPUT",
id : YAHOO.util.Dom.generateId(),
type : "text",
value : this.originalText
};
getEl(document.body).createChild(inputConfig);
this.inputElement = getEl(inputConfig.id);

/* Add Blur Event to update the original Div*/
this.inputElement.on("blur", this.doRestore, this);
}

/* Size Input Box */
this.inputElement.setBox(this.el.getBox());

/* Hide Original Element */
this.el.setVisible(false);

/* Show new Input Box */
this.inputElement.setVisible(true);

/* Add Blur Event to update the original Div*/
this.inputElement.on("blur", this.doRestore, this);

},

doRestore : function(){
this.el.dom.innerHTML = this.inputElement.dom.value;
this.inputElement.setVisible(false);
this.el.setVisible(true);
this.performAction();
}

};

[JohnT]

also it fails miserably if you have formatting in your Editable, like if you try to set this as editable:




<p id="makeMeEditable">John got in over his head again</p>



:cry:

[brian.moeskau]

The multi-save could be because you have this line twice now :)

this.inputElement.on("blur", this.doRestore, this);

[JohnT]

SonOfA...!!!!

Thanks.

I suppose this class could be expanded to something useful, but not by me. This is stretching my programming skills. Took me half the day to get to this point.

I sure would love to see this implimented though, in Element, ya know?

Thanks. Maybe I will put this in examples, as it *does* work.

Prototype SchmotoType. I knew it could be done. I was actually suprised it wasn't already, with all you EXT pros floating around here.

John T.

[rodiniz]

hope you font mind JohnT . I have made some changes and posted a sample at my website
http://www.rodrigodiniz.qsh.eu/EditInPlace.htm
Check it out.

[JohnT]

Great job! Thanks. Of course I don't mind. I love learning.

It works wonderful. This is very usable now.

John

[JohnT]

I think with the following would really polish this up, what do you think?

Editable Wishlist

1. Make the overlay optional

2. ESC = cancel and revert changes (while inside editor)

3. Allow edit of HTML , for instance passing hasHTML = true in the config or something

4. Cursor - let them pass it in config so they can choose.


Are you up for it? :)

[rodiniz]

I think with the following would really polish this up, what do you think?

Editable Wishlist

1. Make the overlay optional

2. ESC = cancel and revert changes (while inside editor)

3. Allow edit of HTML , for instance passing hasHTML = true in the config or something

4. Cursor - let them pass it in config so they can choose.


Are you up for it? :)

1)And put the click handler to edit where?
2)Thats easy
3)Can be done .. but Its very complex.
4)Dont think it would be very usable.
I made a post at the Extensions forum.So we can continue your posts there.

[Animal]

Hasn't Jack already got an inline editor? I've seen one working in one of his latest blog entries.

[JohnT]

Well, that was my initial question in this post.

Does he? If so, sure would like to have a peek.

[Animal]

http://yui-ext.com/deploy/yui-ext.0.40-alpha/source/widgets/InlineEditor.js

Test: http://yui-ext.com/deploy/yui-ext/examples/tree/organizer.html

[JohnT]

:o

Terrific. Thanks.

Me and rodiniz got some good practice in anyways. :)

[topcoder1]

Is this widget still part of the extjs 1.1 release? I can't find it.

http://yui-ext.com/deploy/yui-ext.0.40-alpha/source/widgets/InlineEditor.js

Test: http://yui-ext.com/deploy/yui-ext/examples/tree/organizer.html

[carol.extjs]

Is this widget still part of the extjs 1.1 release? I can't find it.

Ext.form.HtmlEditor

In the Examples and Demos folder look at "Dynamic Forms" under Form and Combobox