Welcome Guest Search | Active Topics | Sign In | Register

Tree View context menu and Ajax call Options
Todd1561
Posted: Sunday, October 25, 2015 2:23:21 AM
Rank: Newbie
Groups: Member

Joined: 10/25/2015
Posts: 3
I'm using the following to open a context menu for a tree view. The Tree view is set to call "ShowContextMenu" when the user right clicks, that then runs an ajax async call to a web service to get a bit of data that is used to show/hide buttons in the menu. The async callback function is what shows the menu. This works great in Firefox but in IE/Chrome when the menu opens it's at the top-left of the screen. If I remove the async call it opens normally. Any idea what could be happening?

Code: JavaScript
function ShowContextMenu(e, treeView, node) {
                        
                        $.ajax({
                            type: 'Get',
                            url: '/Helpers/MSPIWebSvc.ashx',
                            data: 'val=' + node.getValue() + '&func=IsAlias',
                            success: function (data) {
                                IsAliasCallback(e,treeView,node,data.toLowerCase())
                            }
                        })
                        
                    }

function IsAliasCallback(e, treeView, node, isAlias) {
//do stuff to set up context menu

//open menu
eo_ShowContextMenu(e, TOCContext.ClientID);
return true;
}
eo_support
Posted: Monday, October 26, 2015 11:18:13 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229
Hi,

Please check the e argument you passed to eo_ShowContextMenu. eo_ShowContextMenu uses that argument to determine the location of the context menu. Argument e can be:

1. A DOM element. In this case the DOM element's location will be used to determine the context menu's location. For example, it can be thre TreeNode's root node;

2. The DOM event object. In this case, the element's clientX and clientY will be used to determine the context menu's location;

By default, the TreeView passes the DOM event object in. It's possible that somehow this object loses its event related values (or those values have been changed to something else) during the period of your AJAX call. If this is the case, you can create a JavaScript object and explicitly set the following properties and pass it to eo_ShowContextMenu:

1. e.target. This the DOM object that raised the event;
2. e.clientX and e.clientY. These two properties are used to calculate the context menu position;

Please let us know if this works for you.

Thanks!
Todd1561
Posted: Monday, October 26, 2015 11:41:16 AM
Rank: Newbie
Groups: Member

Joined: 10/25/2015
Posts: 3
Shortly after I submitted the first message I added what is essentially a Javascript "sleep" before the IsAliasCallback, see below. Even just a 10ms delay seems to have "fixed" the problem. I'm not sure why this works, as when the callback function is called all the ajax stuff should be done.

Code: JavaScript
function ShowContextMenu(e, treeView, node) {
                        
                        $.ajax({
                            type: 'Get',
                            url: '/Helpers/MSPIWebSvc.ashx',
                            data: 'val=' + node.getValue() + '&func=IsAlias',
                            success: function (data) {
                                setTimeout(function () {
                                    IsAliasCallback(e, treeView, node, data.toLowerCase())
                                }, 10);
                                
                            }
                        })


Since you explained more of the ShowContextMenu function I made this change for further testing:

Code: JavaScript
function ShowContextMenu(e, treeView, node) {
                        
                        $.ajax({
                            type: 'Get',
                            url: '/Helpers/MSPIWebSvc.ashx',
                            data: 'val=' + node.getValue() + '&func=IsAlias',
                            success: function (data) {
                                alert(e.clientX);
                                setTimeout(function () {
                                    alert(e.clientX);
                                    IsAliasCallback(e, treeView, node, data.toLowerCase())
                                }, 10);
                                
                            }
                        })


Both alerts print the horizontal position of the cursor, so it doesn't seem like the e value is being lost, so I'm not sure why it isn't working without the sleep.

Thanks
eo_support
Posted: Monday, October 26, 2015 12:36:46 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229
Thank you very much for sharing. This is very interesting. We can not explain why it works with sleep either. If you are interested in digging further, you can try to isolat the problem into a test project and send us the test page. As soon as we have that we will debug it through here and see what we can find. You can find more information on sending test project to us here:

http://www.essentialobjects.com/forum/test_project.aspx


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.