Null
03-04-2007, 12:37 PM
Hi,
The code:
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, 'dblclick', function(){edit($(id))}, false);
Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}
function edit(obj){
Element.hide(obj);
var textarea = '<div id="'+obj.id+'_editor" align="right"><input id="'+obj.id+'_edit" name="'+obj.id+'" type="text" size="22" maxlength="22" value="'+obj.innerHTML+'">';
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);
document.getElementById(obj.id+'_edit').focus();
}
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);
}
I can save the data to a databse using var url = 'edit.php';, but what to put in edit.php? Cause nothing gets saved now...
Thx
The code:
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, 'dblclick', function(){edit($(id))}, false);
Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}
function edit(obj){
Element.hide(obj);
var textarea = '<div id="'+obj.id+'_editor" align="right"><input id="'+obj.id+'_edit" name="'+obj.id+'" type="text" size="22" maxlength="22" value="'+obj.innerHTML+'">';
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);
document.getElementById(obj.id+'_edit').focus();
}
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);
}
I can save the data to a databse using var url = 'edit.php';, but what to put in edit.php? Cause nothing gets saved now...
Thx