Edit in place tool

[putty]

I am working on a edit in place tool, the normal flow is this.
-User clicks text on web page.
- Block of text becomes a form.
- User edits contents and presses submit button or cancel.
- New text is sent to webserver and saved.
- Form becomes normal text again.

Currently I have created a function that you can use to turn an element into an inline edit element.

The Function



function editInPlace(element){

var the_element = Ext.get(element);

the_element.on('click',function(){

var root = this;
var intValue = root.dom.innerHTML;

if(!this.editor){
var h = this.getHeight();
if(h<80)h = 80;

if(this.getWidth() < 180){
var width = 180;
}else{
var width = this.getWidth() - 20;
}

this.editor = new Ext.form.FormPanel({
width: width,
autoHeight:true,
border:false,

items: [{
xtype: 'textarea',
value: this.dom.innerHTML,
width: width,
hideLabel: true,
height: h,
name:element,
}],

buttons: [{
text: 'Cancel',
handler : function(){
root.hide();
root.dom.innerHTML = intValue;
root.editor.destroy();
root.editor = '';
root.show();
}
},{
text: 'Submit',
handler : function(){

root.editor.getForm().submit({
waitMsg:'Saving Data...',
url: '../include/data/update-club.php',

success: function( form, action ){
root.hide();
root.dom.innerHTML = form.items.get(0).value;
root.editor.destroy();
root.editor = '';
root.show();
},

failure: function( form, action ){
Ext.MessageBox.alert('Failure', 'There was an error saving your data, please try again later.');
}

});
}
}]
})

this.hide();
this.dom.innerHTML = '';
this.editor.render(the_element.dom)
this.show();

}
});
}


The Web Page



<script>
Ext.onReady(function(){

editInPlace('div');
editInPlace('span');

});
</script>

<div id="div">You can edit all the text in this div.</div>

The <b><span id="span">Bold text</span></b> is editable.



I use php to initially populate my div and span with data from the database.

I am only new to javascript and am very interested in any feedback and pointers. In particular I don

[vlados]

Isn't better if you make it:



function editInPlace(element){
if(the_element = Ext.get(element)) {
the_element.on('click',function(){

[stever]

Also I am having some trouble getting the new value entered into the form. Currently this line
root.dom.innerHTML = form.items.get(0).value; returns the initial value of the filed not the new edited value. Anyone know why this is?


Having done things like this a few times, I suggest you completely clean what the user is writing when you are dealing with html. Even send to the server to save, and have it send you back a cleaned up (secure) version.

As for the above, did you try
root.dom.innerHTML = form.items.get(0).dom.value;??? Though you really ought to just use a cleaned version from the server.

[putty]

Thanks Stever,

I used
root.dom.innerHTML = root.editor.getForm().items.get(0).getValue();to get the edited version of the html.

I ended up just using the uncleaned html to replace the edit box after editing instead of cleaning it server side then returning it, every other time the page is reloaded the viewer will see the server side cleaned and safe html.

Although in some cases the user editing the page will not see a true representation of what the html will look like, I think this is a good trade off for a quicker save time, and 99% of the time the html looks the same.

I also added a little snippet to turn edit mode on and off. Altogether inline editing gave me a very quick way to edit site content.