Using a Binding in a Tooltip to display the results of an async ajax return

GoJS
1

go.js version 1.6.11

I’ve been looking around and haven’t found any examples like this, and haven’t managed to get it to work successfully in my code.

I would like a way to use the tooltip property (in order to get all of the built-ins like sizing, positioning, etc) while being able to use a binding to the result of an ajax return that I don’t want ‘executed’ until actual display time, but that needs to wait on the return until rendering. I can make this behavior work fine with a mouseHover: taskHover like is used in the hoverButtons example, but that has several behaviors I cannot work with.

I have caching set up so that the node saves the value of that return for the next time, and it works fine for subsequent calls when the value is merely passed through, but it seems that the binding ajax return doesn’t get waited for appropriately.

It is not feasible for me to pre-cache or pre-load these values at the diagram level, as there can be hundreds of nodes in my diagram. I’m considered using something like an instantly fired mouseIn to start the query early, but that opens me up to some ugly race condition behavior I’d like to avoid if I can.

Is this possible?

Thanks!

2

As a general principle, not involving GoJS at all, one should not wait for an AJAX call to return.

So in this case you ought to show something in your tooltip, even if it’s just a TextBlock that says “loading…”.

Then if and when the asynchronous call completes successfully, you can update the tooltip. Normally that would be a matter of having the tooltip be data bound and changing the data within a transaction. And if the asynchronous call fails or times out, you can either show that or leave it showing the default objects.

3

So you would suggest checking the value, immediately returning a ‘loading’ text if it’s undefined, then changing the model underlying that tooltip inside a transaction in order to get the binding to update?

4

Yes, that’s the idea.