2012-05-15 45 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>