JavaScript: AJAX Inline Editor #2 - Inline editing example using AJAX.

Quick Search:


	CODE Oracle PL/SQL Code Library


	JOBS Find Or Post Oracle Jobs


	FORUM Oracle Discussion & Chat

JavaScript: AJAX Inline Editor #2

Jump to:

Category: >> JavaScript >> AJAX Inline Editor #2

<< last next >>

Snippet Name: AJAX Inline Editor #2

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>

Free
Oracle Magazine
Subscriptions
and Oracle White Papers

SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more

Home : Code Library : Sponsors : Privacy : Terms of Use : Contact Us

PSOUG LOGIN
Username:
Password: