Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: AJAX Inline Editor #1 Jump to:  
Category: >> JavaScript >> AJAX Inline Editor #1 Bookmark and Share

<< lastnext >>

Snippet Name: AJAX Inline Editor #1

Description: Edit-in-place with this slick bit of code.

Comment: (none)

Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009

<html>
<head>
<script>
VAR timerlen = 5;
VAR slideAniLen = 250;
 
VAR timerID = NEW Array();
VAR startTime = NEW Array();
VAR obj = NEW Array();
VAR endHeight = NEW Array();
VAR moving = NEW Array();
VAR dir = NEW Array();
 
FUNCTION slidedown(objname){
        IF(moving[objname])
                RETURN;
 
        IF(document.getElementById(objname).style.display != "none")
                RETURN; // cannot slide down something that is already visible
 
        moving[objname] = TRUE;
        dir[objname] = "down";
        startslide(objname);
}
 
FUNCTION slideup(objname){
        IF(moving[objname])
                RETURN;
 
        IF(document.getElementById(objname).style.display == "none")
                RETURN; // cannot slide up something that is already hidden
 
        moving[objname] = TRUE;
        dir[objname] = "up";
        startslide(objname);
}
 
FUNCTION startslide(objname){
        obj[objname] = document.getElementById(objname);
 
        endHeight[objname] = parseInt(obj[objname].style.height);
        startTime[objname] = (NEW Date()).getTime();
 
        IF(dir[objname] == "down"){
                obj[objname].style.height = "1px";
        }
 
        obj[objname].style.display = "block";
 
        timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}
 
FUNCTION slidetick(objname){
        VAR elapsed = (NEW Date()).getTime() - startTime[objname];
 
        IF (elapsed > slideAniLen)
                endSlide(objname)
        ELSE {
                VAR d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                IF(dir[objname] == "up")
                        d = endHeight[objname] - d;
 
                obj[objname].style.height = d + "px";
        }
 
        RETURN;
}
 
FUNCTION endSlide(objname){
        clearInterval(timerID[objname]);
 
        IF(dir[objname] == "up")
                obj[objname].style.display = "none";
 
        obj[objname].style.height = endHeight[objname] + "px";
        DELETE(moving[objname]);
        DELETE(timerID[objname]);
        DELETE(startTime[objname]);
        DELETE(endHeight[objname]);
        DELETE(obj[objname]);
        DELETE(dir[objname]);
 
        RETURN;
}
 
 
// single link slide-up/slide-down function
FUNCTION slide(objname){
    IF(document.getElementById(objname).style.display == "none"){
        slidedown(objname);
    }ELSE{
        slideup(objname);
    }
}
 
 
/* My functions added here */
FUNCTION edit_it()
{
 VAR store = document.getElementById("view_it").innerHTML;
 document.getElementById("view_it").style.display="none";
 document.getElementById("edit_it").style.display="block";
 document.getElementById("t1").innerHTML=store;
 document.getElementById("mydiv").style.background="#cccccc";
 }
 
 
FUNCTION save_it()
{
 //var store = document.getElementById("t1").innerHTML;
VAR modtext = document.xx.t1.value;
 document.getElementById("edit_it").style.display="none";
 document.getElementById("view_it").style.display="block";
 //document.getElementById("view_it").innerHTML=store;
document.getElementById("view_it").innerHTML=modtext;
 document.getElementById("mydiv").style.background="#FCF9D7";
 
ALERT(modtext);
 
 
 }
 
 
 
FUNCTION cancel_it()
{
 document.getElementById("edit_it").style.display="none";
 document.getElementById("view_it").style.display="block";
 document.getElementById("mydiv").style.background="#FCF9D7";
 }
/*End of my functions*/
</script>
<style type="text/css">
.red{color:black;background:#FCF9D7;font-family:times NEW roman;padding:10px;
cursor: pointer;
}
.edit_edit {
background:#FFF;
margin:0px;
padding:2px;
color:#000;
}
.editButtons {
    background:gray;
    float:left;
    padding:0px 4px;
    margin:2px;
    color:#FFF ! important;
    text-Decoration:none;    
    font-Size:.8em;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;  
     font-size: 11px;   
}
.editButtons:hover {
    background:#000;
    color:#FFF;
}
</style>
</head>
<body>
<hr>
 
<a href="javascript:;" onmousedown="slide('mydiv');">Show/Hide</a> 
<div id="mydiv" style="display:block; border-style: solid; border-width: 1px; background-color: #ffffdd; overflow:hidden;width:440px;height:205px;padding:2px;">
 <div  id="view_it" CLASS="red" style="width:400px;display:block;" onclick="edit_it();">
   Phasellus sem purus, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec gravida. Etiam dignissim.
   Quisque ultricies. IN hac habitasse platea dictumst. Pellentesque nec ligula.
   Quisque ultricies. IN hac habitasse platea dictumst. Donec gravida. Etiam dignissim.
   Pellentesque nec ligula. Phasellus sem purus,
   convallis non, ornare ut, iaculis eu, eros. .
 </div>
 <div id="edit_it" style="width:400px;display:none;">
<form NAME="xx">
  <textarea id="t1" style="width:400px;height:155px;">


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 117 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?