In the JSP using jQuery conflict resolution (collected)

Use in JSP <jsp: include page = "somethingPage.jsp"> </ jsp> nested page to time, there will be conflict between jQuery

Solution:

There are places to introduce jQuery conflict issues be handled as follows in need nested page:

var $jq = jQuery.noConflict();
$jq(document).ready(function(){  
     $jq("select").sSelect();  
});

In this example, instead of using $ jq, you can solve the problem of the conflict.

principle:

Since jQuery and prototype.js, coypSelect.js function uses a dollar sign "$" Alternatively, a mixture of both when the function is repeated $ defined, resulting in a frame which can not be used.

method one:

<script src="http://jquery.com/src/latest/"></script>     
      <script type="text/javascript">     
         JQ = $;  //rename $ function     
     </script>     
<script src="prototype.js"></script>

As a result, you can use jQuery instead JQ in the $ function name, and the prototype of the $ function as usual, like this:

<script type="text/javascript">     
  JQ(document).ready(function(){     
   JQ("#test_jquery").html("this is jquery");     
   $("test_prototype").innerHTML="this is prototype";     
  });     
 </script>

Method II - Recommended Method (closure method)

Although this approach to a certain extent, solve the conflict between the two, but as jQuery diehard, I was extremely reluctant to rewrite $ JQ or other alternate characters. Conversely Prototype fans also expected to think so. Well, it is not there another solution, so that the two frameworks can live in harmony it? Well now popular in harmony!

<script type="text/javascript" src="jquery-1.2.6.js"></script>     
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>     
<div id="test_jquery"></div>   
   <div id="test_prototype"></div>   
<script type="text/javascript">     
<!--     
(function($){     
    $(document).ready(function(){     
        alert($("#test_jquery").html("this is jqeury"));     
    });     
})(jQuery);    
$("test_prototype").innerHTML="this is prototype";    
//-->     
</script>

After testing, jQuery and Prototpye work were normal. The only not the same as usual, we want a jacket outside the Cadogan Jquery written before:

( Function ($) {       
   // Here write Jquery Code    
}) (jQuery);

The coat clever use of the effective range of the function of local variables to ensure that you can safely write the code according to the original way Jquery

Method three: the jQuery library before introducing another library directly using jQuery (callback) methods such as:

<! - before introducing the jQuery ->   
<Script the src = "../../ scripts / jQuery-1.3.1.js" type = "text / JavaScript"> </ Script>   
<! - the introduction of other library ->   
<Script the src = "the prototype-1.6.0.3.js" type = "text / JavaScript"> </ Script>   
</ head>   
<body>   
<P ID = "PP"> the prototype Test --- < / P>   
<P> Test --- the jQuery </ P>     
<Script type = "text / JavaScript">   
the jQuery ( function () {    // directly jQuery, not necessary to call "jQuery.noConflict ()" function.    
    the jQuery . ( "P") the Click ( function () {          
        Alert (the jQuery ( the this ) .text ());    
    });   
});     
$("pp").style.display = 'none'; //使用prototype   
</script>

Method four: jQuery library into the library after the other, using jQuery.noConflict () method of transferring control of the variable $ to other libraries in the following ways:

type = Script "text / JavaScript">   
jQuery.noConflict ();                 // variable $ a control transfer to the prototype.js   
the jQuery ( function () {                   // Use the jQuery   
    the jQuery ( "P") the Click (. function ( ) {   
        Alert (the jQuery ( the this ) .text ());   
    });   
});   
  
$ ( . "PP"). style.display = 'none';      // use the prototype   
</ Script>   // Code two   
<script type = "text / JavaScript">   var $ J = jQuery.noConflict ();       // customize a relatively short shortcut   
$ J ( function () {                      
  

// Use the jQuery   
    $ J ( "P") the Click. ( Function () {   
        Alert ($ J ( the this ) .text ());   
    });   
});   
  
$ ( . "PP"). Style.display = 'none ';      // use the prototype   
</ Script>   // Code three   
<Script type = "text / JavaScript">   
jQuery.noConflict ();                 // the variable $ a transferring control to the prototype.js   
the jQuery ( function ($) {                  // use the jQuery   
    $ ( "P") the Click (. function () {         // continue $ method   
        Alert ($ ( the this 
    });  
});  
  
 ) .text ());  
  
$ ( "PP"). Style.display = 'none';.      // use the prototype   
</ Script>   // Code four   
<Script type = "text / JavaScript">   
; jQuery.noConflict ()                 // controlling the variable $ Released to the prototype.js   
( function ($) {                    // define anonymous functions and parameter set to $   
    $ ( function () {                // anonymous inner function $ are the jQuery   
        $ ( "P"). the Click ( function () {     // continue $ method   
            Alert ($ ( the this
  
 ) .text ());   
        });   
    });  
}) (the jQuery);                  // perform anonymous function arguments and pass the jQuery   
  
$ ( "PP"). style.display = 'none';.      // use the prototype   
</ Script>

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3455051.html

In the JSP using jQuery conflict resolution (collected)

Guess you like