2012-05-15 4 views
0

jQuery와 프로토 타입이 함께 작동하는 데 약간의 문제가 있습니다. 오류 콘솔은 내 오랜 프로토 타입은 세 가지 변화가자바 스크립트 아약스 메일 및 스크립트 충돌

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를에 있던

$(divid).visible is not a function 

오류를 던지고 난 튜토리얼에있는 내가 노를 사용

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