CODEWITHSUNDEEP
javascriptjqueryfunction
Luca
Luca

Reputation: 1350

Conflicts with jquery scripts

I'm a new JQuery programmer, here is my head code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  function myfunction(){
    $("button").click(function(){
      $("p").hide();
    };
  });
  $(document).ready(myfunction);
</script>

this script works perfectly, but when i add these other three scripts in the page:

<script type="text/javascript" src="/file/js/prototype.js"></script>
<script type="text/javascript" src="/file/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/file/lightbox/js/lightbox.js"></script>

che console error gave me:

 Uncaught TypeError: undefined is not a function

on '$(document).ready(myfunction);' line.

what is the error? Is a conflict problem?

Upvotes: 0

Views: 172

Answers (2)

tcooc
tcooc

Reputation: 21209

Prototype.js also uses the global $ variable. You need to make sure they don't conflict with each other by using the jQuery variable instead:

// wrap it up
(function($) {
  function myfunction() {
    $("button").click(function(){
      $("p").hide();
    });
  };
  $(document).ready(myfunction);
})(jQuery);

You can also just replace all jQuery $ uses with jQuery, but the method above is generally simpler to implement and maintain.

Upvotes: 3

Quentin
Quentin

Reputation: 943561

jQuery defines a function called $ that you are trying to use.

prototype.js also defines a function called $ and overwrites the one from jQuery.

Use jQuery to refer to the jQuery function instead of $.

Upvotes: 6

Related Questions