rails 2에서는 기본적으로 제공하는 prototype.js가 jquery와 충돌을 한다. 따라서 jquery가 충돌이 나지 않도록 설정을 해 주어야 한다. 본 포스팅은 jquery 1.10.1과 bootsratp 3.2에서 테스트 되었다.

레이아웃 파일에 다음과 같은 순서로 기술해 준다. 순서에 주의하자. 반드시 defaults 를 제일 먼저 써줘야 한다. jquery-1.10.1.js 파일과 bootstrap.min.js 파일은 public/javascripts 위치에 있다. 부트스트랩을 사용하지 않으려면 <%= javascript_include_tag ‘bootstrap.min’ %> 라인은 없어도 된다.

<%= javascript_include_tag :defaults %>
<%= javascript_include_tag ‘jquery-1.10.1′ %><script>var $j = jQuery.noConflict();</script>
<%= javascript_include_tag ‘bootstrap.min’ %>

jquery와의 충돌을 피하기 위해 <script>var $j = jQuery.noConflict();</script> 를 추가로 선언해 주었다. 그리고 $() 대신 $j()를 사용한다.

일반적인 jquery 사용예

$(document).ready(function() {
$(‘#testme’).click(function () {
$(‘#hideme’).fadeOut(‘slow’);
});
});

rails2 에서 충돌을 피하기 위해 사용하는 jquery 사용예

$j(document).ready(function() {
$j(‘#testme’).click(function () {
$j(‘#hideme’).fadeOut(‘slow’);
});
});

이 방법은 아쉽게도 application.js 에는 적용되지 않는다. 따라서 jquery의 액션이 필요한 곳의 레이아웃마다 선언을 해 주어야 하는 레일스답지 않은 코드상의 중복이 발생한다.
jquery가 필요한 레이아웃 파일에 선언을 해 주어야 함을 잊지 말자.