| Hej! Med följande javascript kan jag editera text och spara den nya texten med class editable, men trots det är den sparade texten inte editerbar. Hur kan det komma sig? Hur ska jag skriva scriptet för att få den editerade sparade texten åter editerbar? var config = {
rows: '5',
cols: '25',
okButtonText: 'Spara',
cancelButtonText: 'Avbryt'
};
// identifierar editerbara element när sidan startas, aktiverar funktionen inPlaceEditor
window.onload = function () {
var pElements = document.getElementsByTagName('*');
for (var i=0; i < pElements.length; i++) {
if(pElements[i].className == 'editable')
inPlaceEditor(pElements[i]);
};
}; function inPlaceEditor (editableElement) {
// klick på editerbart element startar en funktion
editableElement.onclick = function() {
// om inget "barn" i editerbara elementet (p-taggen) så skapas textrutan och knapparna
if(this.childNodes[1] == undefined)
{
var text = getTextArea(this); // startar funktionen getTextArea
var buttons = getButtons(text.div); // startar funktionen getButtons
this.className = 'not_editable';
} if(buttons)
{
var container = this;
// avbryt-knappens funktion definieras
buttons.cancel.onclick = function()
{ // vid klick på avbryt-knappen ..
container.firstChild.nodeValue = text.origText; // .. återgår textrutans text till ursprungstexten ..
container.removeChild(container.childNodes[1]); // .. den tillfälliga diven med textrutan tas bort
container.className = 'editable'; // ursprungstexten görs åter editerbar
// kod som medger att man kan klicka på och aktivera textrutans innehåll utan att samtidigt aktivera "containern"
if (!e) {
var e = window.event;
if (e.stopPropagation) e.stopPropagation();
return false;
}
} // redigeringsknappens funktion definieras
buttons.edit.onclick = function()
{
var content= document.getElementById('content'); // identifierar ursprungsdiven med id=content
var newText = text.textarea.value; // den nyredigerade texten samlas upp i variablen newText
var newP=document.createElement("p"); // skapar ett nytt p-element
newP.appendChild(document.createTextNode(newText)); // skapar en ny textnod med newText i detta p-element
var lager =document.getElementById("lager"); // läggar "lagret" dvs. textrutan med innehåll i variablen lager
content.insertBefore(newP, lager.parentNode); // sätter in den nya texten ovanför diven (id=lager) med textrutan
newP.className = 'editable'; // förser den nya p-taggen med className editable
var cont=lager.parentNode; // skapar identitet till lagrets förälder, dvs. p-taggen som ej har id, endast classnamn
cont.parentNode.removeChild(cont); // tar bort den tillfälliga lagerdiven med textrutan
}
}
}
} function getTextArea(obj)
{
var origText = obj.firstChild.nodeValue; // lägg den ursprungliga texten i variabeln origText
obj.firstChild.nodeValue = '';
var div = document.createElement("div"); // skapa ett div-element för att lagra den tillfälliga textrutan
div.setAttribute("id","lager"); // ge den skapade diven id=lager
obj.appendChild(div); // lägg denna div som barn till p-taggen
var textarea = document.createElement("textarea"); // skapa en textruta
textarea.setAttribute("cols", config.cols); // hämta textrutans kolumnstorlek från var config
textarea.setAttribute("rows", config.rows); // hämta textrutans radstorlek från var config
textarea.value = origText; // lägg den ursprungliga texten i textrutan
div.appendChild(textarea); // lägg textrutan i den skapade diven
// skapa den redigerbara textrutan, lägg in ursprungstexten och placera allt i den skapade diven
var text = {
'origText': origText,
'textarea': textarea,
'div': div
}
return text;
} function getButtons(obj)
{
var br = document.createElement("br"); // skapa radbrytning för att knapparna ska komma under textrutan
var edit = document.createElement("input"); // skapa editeringsfunktion
edit.setAttribute("type", "button"); // knyt editeringsfunktionen till en knapp
edit.setAttribute("value", config.okButtonText); // hämta upp data från var config
obj.appendChild(br); // koppla radbrytning till knappen
obj.appendChild(edit); // koppla editeringsfunktionen till knappen
var cancel = document.createElement("input"); // skapa avbrytfunktionen
cancel.setAttribute("type", "button"); // knyt avbrytfunktionen till knappen
cancel.setAttribute("value", config.cancelButtonText); // hämta data från var config
obj.appendChild(cancel); // koppla avbrytfunktionen till knappen
// skapa knapparna
var buttons = {
'edit': edit,
'cancel': cancel
}
return buttons;
}
| 
