Prototype code not working when jQuyery library is loaded on top_问答_开发者

Prototype code not working when jQuyery library is loaded on top

开发者 https://www.devze.com 2023-01-19 08:11 出处：网络

My prototype code no longer works when I load in the jquery library, even though jquery is the first library to be loaded.

My prototype code no longer works when I load in the jquery library, even though jquery is the first library to be loaded.

The html of the page looks a bit like so:

<head>
...
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/effects.js"></script>
<script type="text/javascript" src="/js/prototip.js"></script>
<script type="text/javascript" src="/js/dragdrop.js"></script>
<script type="text/javascript" src="/js/default.js"></script>
<script type="text/javascript" src="/js/limitfocus.js"></script>
...
</head>

<body>

<input type="radio" name="useOtherAddress" id开发者_高级运维="useOtherAddress_y" value="y" onclick="selectAddress()">
<input type="radio" name="useOtherAddress" id="useOtherAddress_n" value="y" onclick="selectAddress()">

<div id="myAddress" style="display: none;">
...
</div>

<script type="text/javascript">
  // the piece of protptype code no longer working 
  function selectAddress () {
    var t = $('myAddress');
    if ($('useOtherAddress_n').checked) {
      Effect.Appear(t);
      return;
    }
    t.hide();
  }
</script>

Anybody have any ideas? This page:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

suggests that loading jquery first should make everything handy-dandy. But it's not :[

You need to call jQuery.noConflict(), like this:

jQuery.noConflict(); //or possibly $j = jQuery.noConflict();
function selectAddress () {

Then load jQuery last (but before it's plugins) so that the jQuery.noConflict() will restore the $ to its previous value (Prototype).

If you can help it at all - the code you show doesn't display any compelling need to use both libraries at once - as a general policy, using jQuery and Prototype alongside should be the last resort or a temporary workaround, for example while switching frameworks.

Even if you get the frameworks running together, there are dozens of subtle pitfalls in DOM handling and such that may bite you in the arse later, creating untraceable bugs.

It's really, really best to use one JS framework only.

+1 as a general policy, using jQuery and Prototype alongside should be the last resort or a temporary workaround, for example while switching frameworks.

My guess is that you are using jQuery with the $ variable or using a function that will cause conflicting!

when ever you want to use jQuery use jQuery instead of $ like jQuery(#id).click();. in jQuery $ is just an alias for jQuery, so all functionality is available without using $. If we need to use prtotype alongside with jQuery, you can return control of $ back to prototype with a call to $.noConflict() if you wanna use $ for both you can do that. here's how:

...

<script type="text/javascript" src="/js/effects.js"></script>
<script type="text/javascript" src="/js/prototip.js"></script>
<script type="text/javascript" src="/js/dragdrop.js"></script>
<script type="text/javascript" src="/js/default.js"></script>
<script type="text/javascript" src="/js/limitfocus.js"></script>

<script type="text/javascript" src="/js/jquery.min.js"></script>
...
</head>

<body>

<input type="radio" name="useOtherAddress" id="useOtherAddress_y" value="y" onclick="selectAddress()">
<input type="radio" name="useOtherAddress" id="useOtherAddress_n" value="y" onclick="selectAddress()">

<div id="myAddress" style="display: none;">
...
</div>

<script type="text/javascript">
  // the piece of protptype code no longer working 
$.noConflict();
  jQuery(document).ready(function($) {
    //jquery with $

  });
//prototype with $
  function selectAddress () {
    var t = $('myAddress');
    if ($('useOtherAddress_n').checked) {
      Effect.Appear(t);
      return;
    }
    t.hide();
  }
</script>