[BootStrap] Js파일 충돌 드디어 고쳤다!!! (jQuery.noConflict())

Scenario: 

┌ Include nav.jspf (login bar, 여기서 bootstrap jsp,css 갖고있음)

 main body.jsp (list)

└ Include Child.jspf (modal)

이런구조로된 jsp 프로젝트에서 body안에 있는 모달에서

모달관련 함수가 절대 안먹는것이었다.

문제는

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 이게 충돌이 먹어서였는데

어째서인지 body.jsp에서는 드롭다운도 잘되고 딴것도 다 잘되는데 modal 관련 함수만 전혀 안먹는거였다 (단순히 모달 fade in out은 잘됨)

딱 한순간 문제를 해결 할 수있엇는데, child.jspf에서 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 해주면

모달관련 함수는 먹었지만 문제는 body와 nav에서 부트스트랩관련 함수가 전혀 안먹었다(drop dwon 등등)

특히 이런 모달 콜백 함수가 전혀 안먹는게 나를 미치게 만들었다..

$('#genieModal').on('show.bs.modal',function (e) {

});

콜백을 안쓰면 엄청난 노가다를 해주어야했기에, 모든 방법을 동원해서 찾았지만 결국 안되는 것이엇다.

solution: 그 찰나  jQuery.noConflict(); 라는 기적적인 마법의키워드를 검색으로 알게되었다.

child 관련 <script> 안에 저키워드를 한번 써주니까 모든 충돌이 해결되었다.