Context menu - javascript error

Apr 21, 2011 at 12:53 AM

I'm trying to get the context menu to work, but I'm getting an error.

<!--StartFragment--> Uncaught TypeError: Cannot call method 'offset' of undefined  - <!--StartFragment--> jquery.contextMenu.js:27
<!--EndFragment--><!--EndFragment-->

I know my way around Javascript and I can see what's going on, but I don't know why. It's enough to drive anyone crazy.

 

Looking at at line 53, I can see that it caches the dimensions. 

When the dimensions are read at line 28, they are just fine.

But line 27 throws an error. Why? It can't read $ul.data('$parentliref')

For some reason, this object will not cache in the browser. I tested this in multiple browsers.

 

Is there a conflict with a specific version of jQuery? Any other ideas?

Worst case scenario, I can tool my way around the source code to implement a different context menu provider (instead of the dynamic drive.) I did this with the old version, but I don't want to fork my own version breaking changes.

Apr 21, 2011 at 12:57 AM

For what it's worth, when I hacked a solution with the previous version I used this context menu as the basis:

http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/

Apr 21, 2011 at 1:02 AM

Is there a dependency on jQuery UI? If so, any specific version?

Apr 21, 2011 at 10:57 AM
lucasjans wrote:

Is there a dependency on jQuery UI? If so, any specific version?

 No jquery-Ui is not used.

Which version of jquery did you use? I tested it with all latest version from 1.4.2 -1.52 and 1.6

But i can test some other scripts, if there works better.

Apr 21, 2011 at 1:32 PM

I am using 1.5.2. 

Apr 21, 2011 at 1:35 PM

The closest thing that I can find related to this: http://stackoverflow.com/questions/3396614/jquery-sticky-sidebar-failing

 

However, it doesn't seem like a DOM readiness related issue. The DOM should be loaded because everything appears to be wrapped in document.ready.

Apr 22, 2011 at 8:34 AM

the offset is not the problem, i debug the js for some reason the $ul.data('$parentliref') is null.

And another user is reporting the same error http://dnnmoduleactions.codeplex.com/discussions/254716.

I will check some other scripts

Apr 22, 2011 at 4:49 PM

The problem is the context menu plugin you're using. The code is ugly and inefficient. Check out this one, http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/. I used it on a previous version rewrite of your module. I'll even share my code modification here:

 

/**
 *  jQuery Very Simple Context Menu Plugin
 *  @requires jQuery v1.3 or 1.4
 *  http://intekhabrizvi.wordpress.com/
 *
 *  Copyright (c)  Intekhab A Rizvi (intekhabrizvi.wordpress.com)
 *  Licensed under GPL licenses:
 *  http://www.gnu.org/licenses/gpl.html
 *
 *  Version: 1.1
 *  Dated : 28-Jan-2010
 *  Version 1.1 : 2-Feb-2010 : Some Code Improvment
 */

(function($){
    jQuery.fn.vscontext = function(options){
        var defaults = {
            menuBlock: null,
            offsetX : 8,
            offsetY : 8,
            speed : 'slow'
        };
        var options = $.extend(defaults, options);
        var menu_item = options.menuBlock;
        return this.each(function(){
            	$(this).bind("contextmenu",function(e){
				return false;
		});
            	$(this).mousedown(function(e){
                        var offsetX = e.pageX  + options.offsetX;
                        var offsetY = e.pageY + options.offsetY;
			if(e.button == "2"){
                            
                            $(menu_item).show(options.speed);
                            $(menu_item).css('display','block');
                            $(menu_item).css('top',offsetY);
                            $(menu_item).css('left',offsetX);
			}else {
                            $(menu_item).hide(options.speed);
                        }
		});
                $(menu_item).hover(function(){}, function(){$(menu_item).hide(options.speed);})
                
        });
    };
})(jQuery);

$(".ModuleOptionsMenu li").bind('mouseenter', function(e){ //show sub UL when mouse moves over parent LI
	$(this).children("ul").show()
})
$(".ModuleOptionsMenu li").bind('mouseleave', function(e){ //show sub UL when mouse moves over parent LI
	$(this).children("ul").hide()
})

The binding functions I used above make the dynamic binding unnecessary.

jQuery(document).ready( function() {if (jQuery('#dnn_ctr19315_ModuleContent').height() > 9 && jQuery('#dnn_ctr19315_ModuleContent').width() > 9) {jQuery('#dnn_ctr19315_ModuleContent').addcontextmenu('dnn_ctr19315_dnnMODULEACTIONSMENU');} else {jQuery('#dnn_ctr19315_dnnMODULEACTIONSMENU').removeClass('ModuleContextMenu');jQuery('#dnn_ctr19315_dnnMODULEACTIONSMENU').wrap('<ul class="ModuleOptionsMenu">').wrap('<li class="ModuleOptionsMenuMainIcon" id="MainNodednn_ctr19315_dnnMODULEACTIONSMENU">');jQuery('<img src="/DesktopModules/WatchersNET.SkinObjects.ModuleActionsMenu/skins/action.gif" alt="ModuleActionsMenu" title="Module Actions Menu" />').prependTo('#MainNodednn_ctr19315_dnnMODULEACTIONSMENU');}});

Of course, my code would need to be tweaked to handle the small container problem.

Apr 23, 2011 at 9:29 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.