Snippet Name: AJAX Inline Editor_two
Description: Inline editing example using AJAX.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
FUNCTION setEditable (id) {
VAR object = document.getElementById(id);
VAR content = object.innerHTML;
object.innerHTML = '<textarea id="save" rows="10" cols="50" onblur="setNonEditable(\'' + id + '\', \'save\')">' + content + '</textarea>';
}
FUNCTION setNonEditable (div_id, textarea) {
TRY {
VAR object = document.getElementById(div_id);
object.innerHTML = document.getElementById(textarea).value;
} CATCH (e) {}
}
</script>
<title>Test</title>
</head>
<body>
<div id="the_div">Editable text!</div>
<button type="button" name="edit" onclick="setEditable('the_div')">Edit</button>
<button type="button" name="edit" onclick="setNonEditable('the_div', 'save')">Save</button>
<hr>
<script>
function position_window(v1,v2)
{
var obj=document.getElementById("popup");
obj.style.visibility="visible";
obj.style.left=v1.offsetLeft;
obj.style.top=v1.offsetTop-50;
obj.innerHTML=v2;
}
function hide_window(){
var obj=document.getElementById("popup");
obj.style.visibility="hidden";
}
</script>
<div style="height:100%;background:#77aaff;text-align:center;padding-top:200px;">
<img src="burning heart 2.gif" style="width:100px;height:100px;"
onmouseover="position_window(this,'Message for image 1.');" onmouseout="hide_window();"/>
<img src="burning heart 2.gif" style="width:100px;height:100px;"
onmouseover="position_window(this,'Message for image 2.');" onmouseout="hide_window();"/>
<img src="burning heart 2.gif" style="width:100px;height:100px;"
onmouseover="position_window(this,'Message for image 3.');" onmouseout="hide_window();"/>
<img src="burning heart 2.gif" style="width:100px;height:100px;"
onmouseover="position_window(this,'Message for image 4.');" onmouseout="hide_window();"/>
</div>
<div id="popup" style="position:absolute;top:100;left:100;width:100px;height:50px;background:#cccc33;text-align:center;visibility:hidden;"
</body>
</html> |
