프로젝트 개발이 본격적으로 시작되면서 포스팅을 전혀하지 못했습니다. 다음에는 이런 일이 없도록 반성하면서 다시 정리해봅니다.

엔터를 누르면 바로 검색이 되도록하는 Javascript

onkeypress="if( event.keyCode==13 ){$('#searchButton').click(); return false;}"

이 기능을 위해서 다양한 방식으로 시도를 해보았는데 이 코드가 작동해서 기록해둡니다. 검색 키워드를 적는 Input 태그에 추가하면 작동합니다.

Datatables 데이터가 없을때를 인식하는 함수

Datatable을 업무에서 사용하고 있는데 데이터가 없을때 나타나는 메세지가 colspan 버그로 인해 제대로 나타나지 않았다. 그래서 찾아보니 Datatable row를 카운트해서 데이터가 있고 없음을 판단하는 기능이 있어서 기록합니다.

fnDrawCallback: function () {                                
            if (this.api().rows().count() === 0) {
                // 데이터가 없을 때 필요한 기능
            } else {
                 // 필요한 기능
            }
     }

저는 colspan이 자꾸 0으로 줄어 메세지 UI가 깨지는 문제가 발생했기에 데이터가 없으면 강제로 colspan을 맞춰주기 위해 사용했습니다.

id와 class의 차이

Javascript를 업무를 시작하고 나서야 많이 사용하다보니 새롭게 깨닫는것이 많습니다. 그 중에 하나가 id와 class의 차이입니다.

id는 유일한 값이어야 하기때문에 여러 태그에 같은 이름으로 설정할 수 없습니다. 하지만 같은 이벤트를 여러 id를 가진 태그에 설정하고 싶을때가 있습니다. 이럴때는 class에 지정된 이름을 사용하여 이벤트를 설정하면 같은 class이름을 가진 모든 태그에 이벤트가 설정됩니다.

원문 : https://stackoverflow.com/questions/45481505/change-all-value-of-inputs-with-same-id-in-javascript

컨트롤러 두번, 중복 호출 방지

개발을 하면서 디버깅을 하다보면 컨트롤러가 이상하게 두번 이상 작동하는 경우를 볼 수 있습니다. 원인을 모르면 나중에 문제가 더 커질 수 있기 때문에 찾아봤더니 해당 jsp에서 href =”“와 같이 비어있는 값이 있을때 컨트롤러가 중복해서 호출이 될 수 있는 점을 확인했습니다.

그래서 쓸데없는 코드가 있다면 과감하게 삭제하는 것이 좋습니다.

readonly와 disabled의 차이

readonly는 사용자가 값을 수정하지 못하고 읽기만 가능하게 만듭니다. disabled는 readonly가 되면서 저장할때 해당 태그의 값이 넘어가지 않게 만듭니다.