event listener not working

**farridav** · 03-22-2010, 11:58 PM

Hi, im trying to make a VERY simple CMS functionallity, i basically dynamically create a table and to each element of tabular data, i assign an onclick listener that runs a function turning the data into an input field (i used textarea) and fills the text area with the original data.

I have this working a little bit, but i basically want to update my database onBlur of the field, but whenever i try and assign an onBlur listener to my dynamically created input field it fires straight away and breaks it...

code is below, if anyone can help me figure out how to at least change the data to an input field (like i have) then change it back to plain text onBlur that would be great.. ill handle all the db updating etc,

[CODE]
<html>
<head>
<title>testing</title>
<meta http-equiv="Content-Type" content="text/php; charset=UTF-8" />
<script type="text/javascript">
function cms(element){
var field = new Object;
field.content = element.innerHTML;
field.id = element.id;
field.primary = element.name;
field.dom = document.getElementById(element.id);
field.length = element.innerHTML.length +10;
field.dom.onclick=null;

field.edit = document.createElement("textarea");
field.edit.cols = field.length;
field.edit.style.height = "20px";
field.edit.innerHTML = field.content;
field.edit.onBlur = cms_update(field); //seems to run automatically???
field.dom.innerHTML="";
field.dom.appendChild(field.edit);
}

function cms_update(field){
//field.dom.removeChild(field.edit);
//field.dom.innerHTML = field.content;
//going to upload edited field to the database from here..
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>Table Data</td>
<td>Click to edit</td>
</tr>
<tr>
<td id='fieldname1' name='groupIdentifier' onclick='cms(this)'>fieldname1</td>
<td id='fieldname2' name='groupIdentifier' onclick='cms(this)'>fieldname2</td>
</tr>
</table>
</body>
</html>
[ICODE]

**vwphillips** · 03-23-2010, 09:16 AM

Code:

<html>
<head>
<title>testing</title>
<meta http-equiv="Content-Type" content="text/php; charset=UTF-8" />
<script type="text/javascript">
function cms(element){
var field = new Object;
field.content = element.innerHTML;
field.id = element.id;
field.primary = element.name;
field.dom = document.getElementById(element.id);
field.length = element.innerHTML.length +10;
field.dom.onclick=null;

field.edit = document.createElement("textarea");
field.edit.cols = field.length;
field.edit.style.height = "20px";
field.edit.innerHTML = field.content;
field.edit.onblur =function(){ cms_update(field); }//seems to run automatically???
field.dom.innerHTML="";
field.dom.appendChild(field.edit);
}

function cms_update(field){
 alert(field)
//field.dom.removeChild(field.edit);
//field.dom.innerHTML = field.content;
//going to upload edited field to the database from here..
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>Table Data</td>
<td>Click to edit</td>
</tr>
<tr>
<td id='fieldname1' name='groupIdentifier' onclick='cms(this)'>fieldname1</td>
<td id='fieldname2' name='groupIdentifier' onclick='cms(this)'>fieldname2</td>
</tr>
</table>
</body>
</html>

Thread: event listener not working

Thread Tools

Search Thread

event listener not working

Bookmarks

Bookmarks

Posting Permissions