Prototype code not working when jQuyery library is loaded on top

Question

Prototype code not working when jQuyery library is loaded on top

249 Views Asked by denormalizer At 08 October 2010 at 02:10

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

Original Q&A

There are 3 best solutions below

Pekka On 08 October 2010 at 02:13

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.

Neo On 08 October 2010 at 02:58

+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>

**Nick Craver** · Accepted Answer · 2010-10-08T02:11:36.473000

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

Prototype code not working when jQuyery library is loaded on top

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in PROTOTYPEJS

Related Questions in COEXISTENCE

Trending Questions

Popular # Hahtags

Popular Questions