Problem jQuery and Prototype
Friends I have a problem with jquery and prototype:
<head>
<link rel="stylesheet" 开发者_StackOverflow社区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
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>
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>
加载中,请稍侯......
精彩评论