CODEWITHSUNDEEP
jquery
Felipe
Felipe

Reputation: 11

Problem jQuery and Prototype

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

Upvotes: 1

Views: 1049

Answers (2)

Doug Neiner
Doug Neiner

Reputation: 66191

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>

Upvotes: 1

Jim Schubert
Jim Schubert

Reputation: 20357

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>

Upvotes: 2

Related Questions