hoverHTML from a Service

[picasso566]

I have a web service (RestDataSource or straight HTML) that will return the formatted HTML for a record in a listGrid. When I hover over a row/cell I'd like the formatted HTML to be requested from the server, then displayed in the hover canvas. The reason for this is that there is some relational data I would like to display in the hover that is not in the Datasource of the grid and also, the server will check if the image file actually exists for the item and output an img tag accordingly. So the hoverHTML will be different sizes.

How do I grab the hoverHTML from a service? How do I return the HTML in a asynchronous manner? Does this look even close?:

hoverHTML: "return ThisListGridId.GetHoverHTML(record.AssetID)",
GetHoverHTML: function(assetid){
            isc.RPCManager.sendRequest({ actionURL: "/admin/service/AssetDetails.ashx",
                httpMethod: 'POST',
                params: {method: "fetch_assetDetails",  assetid: assetid},
                callback: dunno
            }
);

}

[Isomorphic]

Use updateHover to supply the new HTML to the hover.

[picasso566]

How do I identify the hover element?

I've got:

cellHoverHTML: function(record, rowNum, colNum) {
        if (record) {
            isc.RPCManager.sendRequest({
                actionURL: "/browse/AssetDetails.ashx?id=" + record.AssetID + "&size=2&admin=y",
                httpMethod: 'GET', 
                callback: "ShowAdminAssetList.hoverTest(data)"
            });
        }

    },
    hoverTest: function(data) {
        alert(data);
    },

hoverTest is alerting the correct HTML I want in the hover element, how do I populate it? If I want to call updateHover, what object do I call this method against?

I've tried ShowAdminAssetList.updateHover(data); and I get an error that the object doesn't exist.

[Isomorphic]

You call updateHover() or whatever object showed the hover. If that object doesn't exist anymore, clearly you'll get an error..

[picasso566]

You call updateHover() or whatever object showed the hover. If that object doesn't exist anymore, clearly you'll get an error..

That's the problem I have, I can't for the life of me figure out which element is actually showing the hover. In the Dev Console, in the watch, I can't see the effects of the Hover event. If I have this:

isc.ListGrid.create({
ID: "LGPotato",
cellHoverHTML: function(record, rowNum, colNum) {
        if (record) {
            isc.RPCManager.sendRequest({
                actionURL: "/browse/AssetDetails.ashx?id=" + record.AssetID + "&size=2&admin=y",
                httpMethod: 'GET', 
                callback: "ShowAdminAssetList.hoverTest(data)"
            });
        }

    },
    hoverTest: function(data) {
        alert(data);
    },
...

If I hover on a row of the grid, is it the grid the object showing the hover, or is it the row? I've tried everything I can think of and nothing gets displayed in the hover.

[Isomorphic]

It's the grid. The API is Canvas.updateHover(). There's no other plausible Canvas involved.

[picasso566]

OK, it's just weird. I tried this:

cellHoverHTML: function(record, rowNum, colNum) {
    if (record) {
        isc.logWarn("Calling a hover: " + record.AssetID);

            isc.RPCManager.sendRequest({
                actionURL: "/browse/AssetDetails.ashx?id=" + record.AssetID + "&size=2&admin=y",
                callerID: this.ID,
                httpMethod: 'GET',
                callback: "ShowAdminAssetList.hoverTest(rpcResponse, data, rpcRequest)"
            });
        }

    },
    hoverTest: function(rpcResponse, data, rpcRequest) {
    isc.logWarn("Got the Hover data: " + data);
    isc.logWarn("Hover Caller: " + rpcRequest.callerID);
        ShowAdminAssetList.updateHover(data);
    },

The callerID property I set is indeed "ShowAdminAssetList." So I'm doing the
ShowAdminAssetList.updateHover(data); and nothing gets displayed.

Here's a sample return from the server:

<div id="assetdetail_content"><div class="assetDetailWrapper"><div class="assetDetailData"><span class="assetDetailDataLabel">File Name: </span>BEC-006radio.wav</div><div class="assetDetailData"><span class="assetDetailDataLabel">Byte Size: </span>6144 MB</div><div class="assetDetailData"><span class="assetDetailDataLabel">Movie/Show Name: </span>7th Heaven</div><div class="assetDetailData"><span class="assetDetailDataLabel">Season: </span>10</div><div class="assetDetailData"><span class="assetDetailDataLabel">Episode Title: </span>New</div></div></div>

does it need to be wrapped in something else?

[Isomorphic]

Try returning something (a placeholder like "Loading...") from cellHoverHTML(). In the absence of this I think you're canceling the hover altogether.

[picasso566]

Still not working.

I have this:

 cellHoverHTML: function(record, rowNum, colNum) {
        if (record) {
            isc.logWarn("Calling a hover: " + record.AssetID);

            isc.RPCManager.sendRequest({
                actionURL: "/browse/AssetDetails.ashx?id=" + record.AssetID + "&size=2&admin=y",
                callerID: this.ID,
                httpMethod: 'GET',
                callback: "ShowAdminAssetList.hoverTest(rpcResponse, data, rpcRequest)"
            });
            return "Loading...";
        }

    },
    hoverTest: function(rpcResponse, data, rpcRequest) {
        isc.logWarn("Got the Hover data: " + data);
        isc.logWarn("Hover Caller: " + rpcRequest.callerID);
        ShowAdminAssetList.updateHover("Loaded");
    },

In the logWarn in hoverTest the caller is ShowAdminAssetList. I am getting back the expected response from the service, ignoring it and setting the hoverHTML manually. The hover never gets changed to "Loaded."

At least now, with your suggestion of returning something from cellHoverHTML, a hover appears.

[Isomorphic]

Ok - we see where the bug is.

We'll have this fixed for 7.0 final - in the meantime a workaround is to call 'setContents()' on the (undocumented) hover canvas itself.
This is available as isc.Hover.hoverCanvas, so you'd be calling

isc.Hover.hoverCanvas.setContents("loaded");

[picasso566]

Thank you for your reply.

I now have the contents being set in the hover.

After all this, I'm sad to say that a hover might not be the way to go. When I hover over an item in the list, I need to display a hover canvas with an (optional) photo and several lines of information. The popup may be as large as 600X500 px.

Currently in the hover, if I set an img tag, it is not displaying. Also, if I set the height and width of the hover after the data is retreived, the bottom of the hover extends down below the bottom of the window causing it to scroll.

I need to mimic the hover somehow (possibly an HTMLPane) and make it display without causing scrolls.

Paul

[Isomorphic]

The Img tag is probably not displaying because the relative URL is wrong.

The events are there (eg Canvas.hover(), Canvas.hoverHidden()) for you to roll your own hover implementation if necessary.

If browser-level scrollbars should *never* appear, one way to accomplish this is to set overflow:hidden on the <body> element.

[picasso566]

(You were right about the img src path, it's displaying now).

When I mentioned the scrolling, I was talking about the hover not having intelligence built in to reposition itself so that it doesn't get cut off.

I have some screenshots at http://picasaweb.google.com/picasso566/HoverImages?authkey=Irem-ukU2ms&feat=directlink (sorry for destroying a perfectly good picture of Jessica Biel, but it's intellectual property).

The first two photos are of the Smartclient hover. The second two photos are of the front of our website. We started with the overlib library/script (www.bosrup.com/web/overlib/). I made modifications to it so that when you mouse over an object the div pop displays to the right, above the mouse location. If the edge of the div pop will go over the edge of the current window, it flips to the left of the mouse. It also works vertically.

I thought your hover canvas may do the same thing, but it doesn't.

I've been looking at the Hover Canvas object and I don't readily see a way to position the Hover above and to the left of the pointer, is there a way to do that?

Thanks

[Isomorphic]

Placement to avoid scrolling is normally automatic with a hover but isn't happening due to the workaround we supplied. Try calling placeNear(isc.EventHandler.getX(), isc.EventHandler.getY()) on the hoverCanvas.

[picasso566]

This is what I've got:

 cellHoverHTML: function(record, rowNum, colNum) {
        if (record) {
            isc.logWarn("Calling a hover: " + record.AssetID);

            isc.RPCManager.sendRequest({
                actionURL: "/browse/AssetDetails.ashx?id=" + record.AssetID + "&s=2&admin=y",
                callerID: this.ID,
                httpMethod: 'GET',
                callback: "ShowAdminAssetList.hoverTest(rpcResponse, data, rpcRequest)"
            });
            return "Loading...";
        }

    },
    hoverTest: function(rpcResponse, data, rpcRequest) {
        isc.Hover.hoverCanvas.setContents(data);

        isc.Hover.hoverCanvas.placeNear(isc.EventHandler.getX(), isc.EventHandler.getY());
    },

It doesn't reposition the Hover.

Is this what you were talking about?