Search code examples
jqueryprototypejscoexistence

Prototype code not working when jQuyery library is loaded on top

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 :[

Solution

  • 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).