Question

Having a bit of trouble getting jQuery and Prototype working together.
The error console is throwing an error

$(divid).visible is not a function

My old prototype was three variations on

function toggleDisplayWait(divId, imgId, durationmSec) {
    if(!$(divId).visible()) 
            {
                move = Effect.BlindDown;
                newImage = "./img/minus.png";
            }
            else {
                move = Effect.BlindUp;
                newImage = "./img/plus.png";  
            }        
            move(divId, {duration: durationmSec / 1000.0 });
            setTimeout(function() { $(imgId).src = newImage; }, durationmSec)
        }

And my new jQuery I found in a tutorial is

// Init the form once the document is ready
jQuery( init );


// Initialize the form

function init() {

  // Hide the form initially.
  // Make submitForm() the forms submit handler.
  // Position the form so it sits in the centre of the browser window.
  jQuery('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

  // When the "Send us an email" link is clicked:
  // 1. Fade the content out
  // 2. Display the form
  // 3. Move focus to the first field
  // 4. Prevent the link being followed

  jQuery('a[href="#contactForm"]').click( function() {
    jQuery('#content').fadeTo( 'slow', .2 );
    jQuery('#contactForm').fadeIn( 'slow', function() {
      jQuery('#senderName').focus();
    } )

    return false;
  } );

  // When the "Cancel" button is clicked, close the form
  jQuery('#cancel').click( function() {
    jQuery('#contactForm').fadeOut();
    jQuery('#content').fadeTo( 'slow', 1 );
  } ); 

  // When the "Escape" key is pressed, close the form
  jQuery('#contactForm').keydown( function( event ) {
    if ( event.which == 27 ) {
      jQuery('#contactForm').fadeOut();
      jQuery('#content').fadeTo( 'slow', 1 );
    }
  } );

}



// Submit the form via Ajax

function submitForm() {
  var contactForm = jQuery(this);

  // Are all the fields filled in?

  if ( !jQuery('#senderName').val() || !jQuery('#senderEmail').val() || !jQuery('#message').val() ) {

    // No; display a warning message and return to the form
    jQuery('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
    contactForm.fadeOut().delay(messageDelay).fadeIn();

  } else {

    // Yes; submit the form to the PHP script via Ajax

    jQuery('#sendingMessage').fadeIn();
    contactForm.fadeOut();

    jQuery.ajax( {
      url: contactForm.attr( 'action' ) + "?ajax=true",
      type: contactForm.attr( 'method' ),
      data: contactForm.serialize(),
      success: submitFinished
    } );
  }

  // Prevent the default form submission occurring
  return false;
}

// Handle the Ajax response

function submitFinished( response ) {
  response = jQuery.trim( response );
  jQuery('#sendingMessage').fadeOut();

  if ( response == "success" ) {

    // Form submitted successfully:
    // 1. Display the success message
    // 2. Clear the form fields
    // 3. Fade the content back in

    jQuery('#successMessage').fadeIn().delay(messageDelay).fadeOut();
    jQuery('#senderName').val( "" );
    jQuery('#senderEmail').val( "" );
    jQuery('#message').val( "" );

    jQuery('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );

  } else {

    // Form submission failed: Display the failure message,
    // then redisplay the form
    jQuery('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
    jQuery('#contactForm').delay(messageDelay+500).fadeIn();
  }
}

I used the no conflict, and changed my $ for jQuery, but no joy. The start of the script is

<script src="java/prototype.js" type="text/javascript"></script>
<script src="java/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script> jQuery.noConflict() </script>
<script type="text/javascript"> var messageDelay = 3000;  // How long to display status messages (in milliseconds) </script>
<script type="text/javascript" language="javascript">   

Answer 1

Found the answer here after a good bit of searching
– scriptaculous and JQuery do not collaborate

I loaded the jQuery library first,
then the no conflict,
then the other libraries as suggested

The changes looked like

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script> jQuery.noConflict() </script>
    <script type="text/javascript"> var messageDelay = 3000;  // How long to display status messages (in milliseconds) </script>
    <script src="java/prototype.js" type="text/javascript"></script>
    <script src="java/scriptaculous.js" type="text/javascript"></script>