CoderZone.org

Category: >> JavaScript >> AJAX Inline Editor #2 Bookmark and Share

<< lastnext >>

Snippet Name: AJAX Inline Editor #2

Description: Inline editing example using AJAX.

Comment: (none)

Author: CoderZone
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>
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 10