0
jQuery.noConflict(); or $.noConflict();    
(function($) { 
    $(document).ready( function() {
     // Show menu when #input1 is clicked
        $("#input1").contextMenu({
        menu: 'myMenu'
        },
         function(action, el, pos) {
        alert("clicked");
        });
    })(jQuery);

In above code, i have avoided conflict with the prototype by using function($){}(jQuery); But in the callback function(action, e1, pos) it is again calling function from prototype.

Both $.noConflict(); & jquery.noConflict(); i have tried but no use. Please provide suggestion show can I avoid this conflict.

The conflict is resolved now. Thanks to all for their expert advices. But now the other problem is context menu is not opening on right clicking input1. Please provide your valuable suggestions.

Thanking You.

Infotechie
  • 1,653
  • 6
  • 23
  • 35

3 Answers3

0

Premising you should use jQuery.noConflict() to avoid interferences between libraries that use $ symbol, you also have an extra ; at the end

(function($) { 
    ...
}(jQuery));
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
0

You have an error in your code: });(jQuery);

You should call the anonymous function, not just define it, and use jQuery as the argument for calling it, therefore inside the anonymous function $ is jQuery, because you now have a different scope.

If you do (function($){/*your stuff*/});(jquery) you define an anonymous function, but do not execute it. Anything inside the function is not executed, and as an anonymous function does not have a name, you have no way to execute it.

Remove the first semicolon in the line:

(function($) { 
    // do your stuff
})(jQuery);

EDIT:

A little explanation on what this works:

It is an anonymous function (if you don't know, how anonymous functions in Javascript work, see this question), and you call the function with jQuery. If you use jQuery.noConflict() in your code, as you should do to avoid binding $ to jquery, then you will only be able to use calls like jQuery('#myId') for jquery functions, instead of $('#myId') as $ is still bound to the Prototype library (I explicitely call it that way to destinguish it from the prototype chain for objects).

Now consider your anonymous function:

You have (function($){ /* Some stuff with $ as a variable */ }). Inside the function, you have a new scope, therefore $ is only the variable that you pass to the function, not the $ outside of it (still bound to the Prototype library).

Now you pass something to the anonymous function and therefore execute it: (function($){ /* Some stuff with $ as a variable */ })(jQuery). Now $ inside the function is ..... jQuery, not the same as $ outside of it.

EDIT 2:

As you have updated your question, I will explain the steps to make both libraries work. You need to include the reference for Prototype before jQuery, and then call jQuery.noConflict(). After that call, $() defaults to the functions in the Prototype library. To call functions in the jQuery library, you will have to use jQuery() (see the jQuery API reference). You pass a reference to the jQuery object to your anonymous function, so inside the anonymous function $ refers to the jQuery object, you cannot use the functionality of the Prototype library.

Now about your problem with the callback function: The problem may lie inside the contextMenu function, as this function may not correctly make use of the no conflict initialization, but that is just a wild guess. Could you please give your implementation of the contextMenu function?

Community
  • 1
  • 1
Residuum
  • 11,878
  • 7
  • 40
  • 70
  • Can you please ellaborate it by giving an example as i am new to jquery so it will help me more to understand your view. – Infotechie Apr 17 '12 at 13:33
  • Thanks for the such a good explanation and link. it really helped me to learn the concept of anonymous function. But still I can't get your suggestion that "You should call the anonymous function, not just define it, and use jQuery as the argument for calling it, therefore inside the anonymous function $ is jQuery, because you now have a different scope." becuase I am doing the same thing. – Infotechie Apr 17 '12 at 15:58
  • I am using contextMenu.js for this.You are right there is a problem of conflict resolution in contextMenu javascript. Following is the link from where I have downloaded the contextMenu plugin. Can you please take it from there or tell me how can I share it coz it is quite large. – Infotechie Apr 18 '12 at 04:29
0

The problem is in jquery.contextMenu.js. I have mentioned these lines:

// This plugin is dual-licensed under the GNU General Public License
//   and the MIT License and is copyright A Beautiful Site, LLC.
//
if(jQuery)( function() {
    $.extend($.fn, 
...
})(jQuery);

So we can't say '$' is jQuery or other lib. It is a bug of plugin.

Change function() to function($) and conflict should be resolved.

Engineer
  • 47,849
  • 12
  • 88
  • 91