2012-05-15 40 views
0

讓jQuery和Prototype一起工作有點麻煩。 錯誤控制檯拋出一個錯誤Javascript ajax郵件和scriptaculous衝突

$(divid).visible is not a function 

我的舊的原型是在

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

而且我的新的jQuery三個變化我在教程中是

// 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(); 
    } 
} 

我用了沒有衝突,並改變了我的$ jQuery,但沒有喜悅。劇本的開始是

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

它看起來像你的原型腳本實際上非常小 - 如果你在兩個庫之間有衝突,我建議通過jQuery來轉換你的原型腳本。 –

+0

爲什麼你包含jQuery兩次?你有'jquery-latest.js'和'jquery.min.js' - 選一個。 – nnnnnn

回答

1

找到答案在這裏尋找 好位之後 - scriptaculous and JQuery do not collaborate

我第一次加載jQuery庫, 則沒有衝突, 那麼其他圖書館的建議

的變化看起來就像

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