javascript - Jquery and Prototype Conflict - Stack Overflow

admin管理员组

文章数量:1355647

I am having trouble running two javascript files on the same page. I used JQuery.noConflict() (.noConflict/) but no luck.

        <script src=""></script>
        <script>
            google.load("prototype", "1.6.0.3",{unpressed:false});
            google.load("scriptaculous", "1.8.1",{unpressed:false});
        </script>
        <script src="js/jquery.tools.min.js"></script>
        <script type="text/javascript">
          $jQuery.noConflict();
          jQuery(document).ready(function($) {
                $("#download_now").tooltip({ effect: 'slide'});
          });

            function show_text() {
            new Ajax.Request('./new.php', {
                             method: 'post',
                             parameters: { userid: $('userid').value },
                             onSuccess: function(r) { $('update').update(r.responseText) }
                                 });    
            }

            document.observe("dom:loaded", function() {

            $('loading').hide();

            Ajax.Responders.register({
              onCreate: function() {
                new Effect.Opacity('loading',{ from: 1.0, to: 0.3, duration: 0.7 });        
                new Effect.toggle('loading', 'appear');


              },
              onComplete: function() {
                new Effect.Opacity('loading', { from: 0.3, to: 1, duration: 0.7 });
                new Effect.toggle('loading', 'appear');
              }
            });
            });         
            </script>

I am having trouble running two javascript files on the same page. I used JQuery.noConflict() (http://api.jquery./jQuery.noConflict/) but no luck.

        <script src="http://www.google./jsapi"></script>
        <script>
            google.load("prototype", "1.6.0.3",{unpressed:false});
            google.load("scriptaculous", "1.8.1",{unpressed:false});
        </script>
        <script src="js/jquery.tools.min.js"></script>
        <script type="text/javascript">
          $jQuery.noConflict();
          jQuery(document).ready(function($) {
                $("#download_now").tooltip({ effect: 'slide'});
          });

            function show_text() {
            new Ajax.Request('./new.php', {
                             method: 'post',
                             parameters: { userid: $('userid').value },
                             onSuccess: function(r) { $('update').update(r.responseText) }
                                 });    
            }

            document.observe("dom:loaded", function() {

            $('loading').hide();

            Ajax.Responders.register({
              onCreate: function() {
                new Effect.Opacity('loading',{ from: 1.0, to: 0.3, duration: 0.7 });        
                new Effect.toggle('loading', 'appear');


              },
              onComplete: function() {
                new Effect.Opacity('loading', { from: 0.3, to: 1, duration: 0.7 });
                new Effect.toggle('loading', 'appear');
              }
            });
            });         
            </script>

• javascript
• jquery
• prototypejs
• conflict

Share Improve this question Follow edited Dec 27, 2011 at 21:52 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked May 29, 2010 at 16:57 patrickpatrick 1,04255 gold badges1717 silver badges3030 bronze badges 2

• I find it amusing you had to add the PHP tag when this has nothing to do with PHP... – animuson ♦ Commented May 29, 2010 at 17:04
• Read my answer here stackoverflow./questions/8871430/… I did it and it worked – John Max Commented Feb 22, 2014 at 14:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I believe $jQuery.noConflict(); in your code is a typo. Use jQuery.noConflict();.

Another method to solve your problem is by replacing all $ variables with jQuery (provided that $ is referrring to a jQuery object).

Read this:

• How to avoid conflict between JQuery and Prototype

or just search stackoverflow like this:

https://stackoverflow./search?q=jquery+conflict-prototype

load jQuery first and then call this code:

var $jq = jQuery.noConflict();
//Now you can use $jq in place of $ for jQuery;
$jq(".myButton").css("border","2px");

Load other libraries.

本文标签： javascriptJquery and Prototype ConflictStack Overflow