Problem jQuery and Prototype

Question

Friends I have a problem with jquery and prototype:

<head>           
<link rel="stylesheet" type="text/css" href="http://localhost/ecommerce/css/lightview.css" />
<script type="text/javascript" src="http://localhost/ecommerce/js/jquery-1.3.2.min.js" ></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='http://localhost/ecommerce/js/lightview.js'></script>
</head>

Code2:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){

 //Esconde a div boleto
     jQuery("#boleto").css("display","none");

    //Adiciona evento onclick no checkbox com o nome de boleto
    jQuery("#cboleto").click(function(){
       jQuery.noConflict();
     //se checado:
     if (jQuery("#cboleto").is(":checked")){
      //mostra a div escondida
         jQuery("#boleto").show("fast");
     }else{     
      //caso contrario, esconde
         jQuery("#boleto").hide("fast");
     }
    });

 //esconde a div visa
    jQuery("#visa").css("display","none");

    //Adiciona evento onclick no checkbox com o nome de visa
    jQuery("#cvisa").click(function(){
       jQuery.noConflict();
     //se checado:
     if (jQuery("#cvisa").is(":checked")){
      //mostra a div escondida
         jQuery("#visa").show("fast");
     }else{     
      //caso contrario, esconde
         jQuery("#visa").hide("fast");
     }
    });

 //esconde a div master
    jQuery("#master").css("display","none");

    //Adiciona evento onclick no checkbox com o nome de master
    jQuery("#cmaster").click(function(){
       jQuery.noConflict();
     //se checado:
     if (jQuery("#cmaster").is(":checked")){
      //mostra a div escondida
         jQuery("#master").show("fast");
     }else{     
      //caso contrario, esconde
         jQuery("#master").hide("fast");
     }
    });  

 //esconde a div pagseguro
    jQuery("#pagseguro").css("display","none");

    //Adiciona evento onclick no checkbox com o nome de pagseguro
    jQuery("#cpagseguro").click(function(){
       jQuery.noConflict();
     //se checado:
     if (jQuery("#cpagseguro").is(":checked")){
      //mostra a div escondida
         jQuery("#pagseguro").show("fast");
     }else{     
      //caso contrario, esconde
         jQuery("#pagseguro").hide("fast");
     }
    });

         });
</script>

The Browser points out the error PROTOTYPE.

How can I fix this where the solution?

Thankz

Jim Schubert · Accepted Answer · 2010-01-08 02:00:28Z

2

Felipe, in this situation, you should load your jQuery scripts after your other scripts. Then, at the top of your scripts, you should call jQuery.noConflict(); only once. Most would reassign the $ at that point to something else, for instance var $j = jQuery;

The reason you're having problems is because Prototype is trying to use the $ variable, which is already associated with jQuery.

See this page for more information: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

So, you should have this:

<head>           
<link rel="stylesheet" type="text/css" href="http://localhost/ecommerce/css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='http://localhost/ecommerce/js/lightview.js'></script>
<script type="text/javascript" src="http://localhost/ecommerce/js/jquery-1.3.2.min.js" ></script>

    <script type="text/javascript">
    jQuery.noConflict();

   jQuery(document).ready(function(){
      jQuery("#boleto").css("display","none");
       jQuery("#cboleto").click(function(){
          /* notice, jQuery.noConflict(); doesn't need to be here */
        if (jQuery("#cboleto").is(":checked")){
            jQuery("#boleto").show("fast");
        }else{     
            jQuery("#boleto").hide("fast");
        }
       });
       /* Then the rest of your code */
    });
    </script>
</head>

answered Jan 8, 2010 at 2:00

Jim Schubert

20.4k5 gold badges64 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Doug Neiner Over a year ago

@Jim, you could also provide a parameter to the ready event like this: jQuery(document).ready(function($){ and then inside that entire function you could use $ only it would refer to jQuery in that context. Outside the function $ remains defined as the Prototype library.

Doug Neiner · Accepted Answer · 2010-01-08 02:31:29Z

1

Your code is fine, you just need to include the jQuery library after the Prototype and Scriptaculous libraries. The rest of your code should function as expected.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type="text/javascript" src="http://localhost/ecommerce/js/jquery-1.3.2.min.js" ></script>
<script type='text/javascript' src='http://localhost/ecommerce/js/lightview.js'></script>

answered Jan 8, 2010 at 2:31

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

Collectives™ on Stack Overflow

Problem jQuery and Prototype

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related