Sunday, March 13, 2011

CheckBox onmouseover and Classic ASP update DB

Im working on an old application in ASP 3.0. There is page that displays a grid (not GridView but a few Response.Writes with <TR><TD>...) A CheckBox (<input type... not <asp:...) is displayed on one of the colums that need have an updated database value. Thank heavens, the database contained a bit field and a checked or unchecked value is displayed depending on the database query results.In ASP (VB) .
The thing is I had to display a message layer (div) near (zindex=2) the cursor when the user moved the cursor near the CheckBox.
The CheckBox is contained in the layer. And with proper width you could display the message layer starting from anywhere until the containing layer goes.
One other thing is that a different message is to be displayed it the user is about to check or uncheck it.
This can be done by using the recordset retured value for the bit field that we are checking and name the div layer (container div) and checkbox with a leading 1 or 0 like this
<%
if CStr((rs("active").Value)) = CStr("True")) Then
Response.Write "<div id=div1 align=center style='width:25Px;height:30Px;background-color:Aqua' onmouseover=ShowContent('msg',this);  onmouseout=HideContent('msg'); ><input type=checkbox id=chk1 onmouseover=ShowContent('msg',this); onmouseout=HideContent('msg'); checked=checked/></div>"
Else

Response.Write "<div id=div0 align=center style='width:25Px;height:30Px;background-color:Aqua' onmouseover=ShowContent('msg',this);  onmouseout=HideContent('msg'); ><input type=checkbox id=chk0 onmouseover=ShowContent('msg',this); onmouseout=HideContent('msg');/></div>"
End if
%>

Then in JavaScript 
<script>
 var Xpos = 0; 
 var Ypos = 0;
 var cX = 0;
 var cY = 0;

//event to get mouse positions
 function GetMouse(e) {
    cX = e.pageX; cY = e.pageY;
 }

 function GetMouseForAll(e) {
     cX = event.clientX; cY = event.clientY;
 }
 if (document.all) {
     document.onmousemove = GetMouseForAll; 
 }
 else {
     document.onmousemove = GetMouse;
 }

 function ShowContent(d, chk) {
        if(d.length < 1) { return; } //error check if there is no div...that wont happen
        var dd = document.getElementById(d);
        AssignPosition(dd); //
        dd.style.display = "block";
        if(chk.id.indexOf("1")<=0)
        dd.innerHTML = 'Uncheck here to make user Active';
        else
        dd.innerHTML = 'Check here to make use InActive';
}
function HideContent(d) {
        if (d.length < 1) { return; } //error check if there is no div...that wont happen
        document.getElementById(d).style.display = "none";
}


function AssignPosition(d) {
//the self.pageXoffset willwork in firefox and chrome but for IE 
//documentelement.scrollLeft or right Im not so sure so please look it up
   Xpos = self.pageXOffset;
           Ypos = self.pageYOffset;
         
           d.style.left = (cX-180) + "px";
           d.style.top = (cY-100) + "px";
}

</script>


Add a div in the html page 

<div  id="msg" 
   style="display:none; position:absolute; background-color: purple; color=white; padding: 5px;">
   Activate/De-Activate user<br />for timesheet approval process
</div>

after this each time the chebox in checked we have to update the database
I simply did a form.submit()
but using httpXML stuff of ASP Classic is better
here is an awesome example that even demonstrates usage with google API's
here is the example learning example that I like

At the end of the day, thank god for ASP.NET 

No comments:

Post a Comment