Jquery validation & Prototypes.js conflict issues?

Question

http://www.therapistsurvey.com/vignette0/vig01

Notice that once you click the See Parents' Response, the link will trigger a javascript that shows a div This is done using the following lines:

 <%= javascript_include_tag :defaults %>
 <%= link_to_function "Click to See Parents' Response: ", "Element.toggle('response')" %>



 <div id="response" style="display:none">

    //input
    <%= button_to "Next", :action => 'vig02' %>
 </div>

However, in my main template layout I included the following jquery libraries:

<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
 <%= javascript_include_tag 'jquery-1.4.2', 'jquery.validate', 'application' %> 

This will basically disable that action. I need these libraries for jquery validation.

I'm assuming there is some comparability issues with using both this libraries at the same time.

If your using chrome and inspect the page elements you'll see an error being generated:

When you load the page:

   Uncaught TypeError: Object #<an Object> has no method 'dispatchEvent' prototype.js:4071

Ever time you click the link:

Uncaught TypeError: Cannot read property 'display' of undefined
Element.Methods.visibleprototype.js:1579
Element.Methods.toggleprototype.js:1584
(anonymous function)vig01:59
onclickvig01:60

Any advice on how to address this issue? THanks!

Answer 1

Just used the Jquery library:

     <button>Click to See Parents' Response</button>
     <script>
      $("button").click(function () {
         $("#response").toggle();
      });
      </script>

Where #response is the id of the div that you want to show/hide.