Using Grid with Walter Zorn's DHTML Tooltips
Hello,
I have been testing the grid and other products before I purchase. I have been able to accomplish everything desired so far, however I have one problem I was hoping someone may already have experience with.
I have implemented this product:
http://www.walterzorn.com/tooltip/tooltip_e.htm in such a way that it provides a perfect DHTML popup window. It tries to auto-size to the content, and does a very good job. I have used it to display many of my currently working pages. The problem is that when I try to pop an AW grid into the html, it never appears. I have it to the point where if I display the page directly in the browser the grid and it's containing DIV are displayed perfectly. Once I stuff it into the popup, the DIV shows (green background for testing), but no grid.
I'm sure this is an easy one for the more experienced javascript/css guys. To test, all you need to do is follow any of the examples from the link above. ANY suggestions appreciated.
Curt K. :: California
April 2,
All you need to do is do it with the option described in wz_tooltip
8.Tooltip content via variable or function call.
You can either use the object variable name with eval(n) (commented)
or the ID and return AW.object(n)(the one active);
just remember to set a size (width & height) for the grid.
HTH
Example:
<html>
<head>
<script src="../../runtime/lib/aw.js" type="text/javascript"></script>
<link href="../../runtime/styles/system/aw.css" rel="stylesheet">
</head>
<body>
<style>
.aw-alternate-even {background: #eeeeee;}
</style>
<script type="text/javascript" src="wz_tooltip.js"></script>
<script>
var obj=new AW.UI.Grid
Obj.setId('Grid001');
obj.setCellText(function(i, j){return j + "." + i});obj.setColumnCount(1)
obj.setRowCount(51)
obj.setSize(400,406)
function TooltipTxt(n){
return AW.object(n);
}
</script>
<a href="b.htm" onmouseover="Tip(TooltipTxt('Grid001'))" onmouseout="UnTip()">Link 2</a>
</body>
</html>
Carlos
April 2,
upppsss! sorry missed line:
obj.setColumnCount(22);
April 2,
Carlos, thanks a lot. I knew there was a simple answer. Now if I only understood it.
What's the difference between using AW.object('Grid001') and just passing the object [ = obj.toString() ] which returns the HTML?
Sorry, new to javascript. Thank you!
Curt K. :: California
April 2,
You are right,
You can also use :
<a href="b.htm" onmouseover="Tip(obj.toString())" onmouseout="">Link 2</a>
and then no need for TooltipTxt() function , seems that wz_tooltip only requires plain html and it's size for embedding .
Carlos
April 2,
That's where I had the problem. What I was doing was retrieving a page via ajax, and passing the HTML into Tip. Now, when I run the external page in the browser everything works. When I pass the HTML (there's a little text, and the grid is wrapped in a DIV), the text and DIV show but not the grid. I suppose this is getting out of the realm of AW, but it's just frustrating. Thanks for the assistance.
Curt K. :: California
April 2,
Is the AW runtime being loaded by the HTML code passed to the popup? If you're not sure, check your web server's logs.
Anthony
April 2,
Could be just the wrapping method used.
If you use innerHTML then try = obj.toString() there, but I would use in this case a sized AW.HTML.Div with setContent() to wrap the text and another sized AW.HTML.Div containing an expanded '100%' grid, this way wz_tooltip could treat the whole thing as a single dimensioned element.
HTH
Carlos
April 3,
OK,
Anthony:
I can run the test page on it's own and everything is fine.
Carlos:
I have tried what you suggested above, wrapping in AW.HTML.Div with size, making the grid 100% width + height. It looks great when run as a standalone page, but nothing shows when the page html is passed into Tip().
If you have the time, try taking any simple grid sample, like "grid behavior - editing/editing.htm", execute it through ajax to get the html and try to pass that into Tip(). You can do it all in the same page and it's the same result.
Again, if in a function I just create a grid object, then pass it into Tip(), it works. There's got to be something simple here having to do with the outer html?
Curt K. :: California
April 3,
I guess the problem might be that you create the grid in a script block which you are loading as part of the page fragment via AJAX call. Then if you insert this fragment via innerHTML the script block does not get executed (this is how innerHTML works). The solution could be to extract the script from the downloaded fragment and execute it separately using eval() function. This is similar to what happens when one tries loading grid into a dynamic tab - the complete sample code is available in /examples/controls-tabs/code.htm
Alex (ActiveWidgets)
April 3,
Thanks for the try, but same result. Nice trick though.
Curt K. :: California
April 3,
In this situation I would apply "rule number three" (just after offensive language and hit the keyboard) :-) a.... setTimeout save me in some cases ( where my ilogical brain totally fails)
Thanks
Carlos
April 3,