jQuery and Prototype conflict

I am trying to use both jQuery and Prototype at the same time.

I've spent hours and hours searching solutions to fix this problem. The most common method I found is this http://docs.jquery.com/Using_jQuery_with_Other_Libraries. However, it didn't work no matter how I place the "jQuery.noConflict()" code.

Can anyone help me with this?

Thanks in advance

Here is my code

<script type="text/javascript" src="/js/swfobject.js">
</script>
<script type="text/javascript" src="/js/layerswitch.js">
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
    _uacct = "UA-2351815-2";
    urchinTracker();
</script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="/js/fadeLinks.js">
</script>
<script>
    jQuery.noConflict();
    jQuery(document).ready(function($){
      $("#example").autocomplete(options);
    });
</script>
<script src="js/prototype.js" type="text/javascript">
</script>
<script src="js/scriptaculous/scriptaculous.js" type="text/javascript">
</script>
<script src="js/recommended_items.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
    var recommended_items = new RecommendedItems('recommended_items', <?="$store_id, $gift_registry_id" ?>);
    recommended_items.setBaseURL('<?=$site_server . SITE_STANDARD ?>');
<?php   if (THIS_PAGE == PRODUCT_PHP) { ?>
    recommended_items.setProduct(<?="$product_id, $category_id" ?>);
<?php   }                               ?>
    recommended_items.fetchItems();
});
//]]>
</script>

From stackoverflow

• Wrap your jQuery code like so

  (function($) {
  
  //$.noConflict(); // I don't below this is needed following this pattern
  
  $(function() // shorthand for $(document).ready()
  {
      $("#example").autocomplete(options);
  });
  
  
  })(jQuery);
  

  In essence, $ refers to the jQuery object inside of the function

  Annan : The function passed into jQuery(document).ready gets the jQuery object when it's called. Hence inside the function it should be $.

  Kev : Thanks a lot. However, it's still not working on my end - -"

  Russ Cam : @Kev - Have you tried debugging with Firebug?

  ybakos : This actually works like a charm for me, when resolving a conflict between jquery, jquery chromless video player plugin, and prototype.

• You can assign your call to jQuery.noConflict() to a variable and then use that variable throughout when you want to use JQuery. So:

     <script>
      var $$ = jQuery.noConflict();
      jQuery(document).ready(function($){
        $$("#example").autocomplete(options);  //jQuery selector
        alert($("#example".val());  //prototype selector
      });
  </script>
  

  Ben Scheirman : careful, $$ is used by prototype.js as a CSS selector for DOM elements.

  ybakos : better yet is the symbol $j, per the jquery doco.

• Answer number two worked for me. Thanks