개발자의 끄적끄적

[javascript/jquery] jquery ajax timeout example / jquery ajax 타임아웃 설정 방법 jquery 에서 ajax 로 서버와 통신을 하다보면 시간 초과 즉, timeout 를 설정해야 하는 경우가 있습니다. 그럴때는 아래와 같이 timeout 를 설정하시면 됩니다. $.ajax({ url: "URL", error: function(){ // ERROR }, success: function(){ // Success }, timeout: 3000 // 3 seconds }); 위에 나와있는 내용처럼 timeout 를 설정하는데 1000 이 1초라서 3000을 입력하면 3초가 되는 겁니다! 참고들 하세요!

[javascript/jquery] jquery ajax catch fail example / jquery ajax 통신 실패 이벤트 jquery 에서 ajax 를 이용하여 서버와 통신을 하는경우 타임아웃이 걸리는 경우가 있습니다. 즉, reponse 를 수신하지 못하는 경우를 잡아내야 할때는 아래와 같이 fail 을 사용하시면 됩니다. $.ajax({ ... }).fail(function() { // to do }); 위 내용 보시면 아시겠지만, .fail 을 선언하고, 그 안에 추가로 동작할 로직을 작성하시면 됩니다! 참고들 하세요!

[javascript/jquery] javascript li move example / 자바스크립트 li 위아래로 이동시키는 방법 javascript 에서 li 리스트의 순서를 변경하고자 할때 여러가지 방법들 중에서 위 / 아래 버튼 클릭시 해당 요소의 위치를 하나 위로 혹은 하나 아래로 변경해야하는 경우가 있습니다. 그럴때는 아래 함수를 이용하시면 됩니다. 예를들어서 아래와 같이 ul 안에 3개의 li 가 있다고 가정하고, 111 222 333 위 li 의 위치를 이동시킬 함수를 아래와 같이 만들어 줍니다. function move_li(gbn, no){ var $li = $("#id_li_"+no); if( gbn == "UP" ) { $li.prev().before($li); }else{ $li.n..

[javascript/jquery] jquery sortable event example / jquery 드래그 해서 순서 변경 완료 이벤트 감지 방법 jquery 에서 요소를 드래그해서 위치를 변경하고자 할때 sortable 를 사용합니다. 그중에서 드래그해서 변경된 정렬 순서를 디비에 적용해야 하는 경우가 있습니다. 그럴때는, stop 이벤트를 사용하시면 됩니다. $("#TARGET ID").sortable({ stop: function(event, ui) { alert("stop event"); } }); 위 내용보시면 아시겠지만, TAEGET ID 요소에 sortable 를 적용할때, stop 이벤트를 같이 선언하면 드래그 하던 요소를 드랍했을때, 즉, 이동이 완료되서 내려놨을때 위 이벤트가 동작..

[javascript/jquery] jquery sortable example / jquery 드래그해서 순서 변경하는 방법 jquery 를 사용하다보면 li 리스트의 항목을 드래그해서 위치를 변경하고 싶은 경우가 있습니다! 그럴때는 jquery 의 sortable 를 이용하시면 됩니다! 우선 필요한 라이브러리를 로드합니다. 그리고 아래와 같은 category 라는 ul 이 있다고 가정하고 하부 li 요소들의 클래스에 아래 나와있는 ui-state-default 클래스를 추가합니다. 111 222 그리고는 category 라는 아이디를 가진 ul 에 아래와 같이 sortable 를 적용합니다. $(function() { $("#category").sortable(); $("#category").disab..

[javascript/jquery] jquery mouse event list / jquery 마우스 이벤트 종류 jquery 에서 마우스에 관련된 이벤트를 제어해야 하는 경우가 종종 있습니다. 이번에는 자주 사용하는 jquery 마우스 이벤트들을 공유해보고자 합니다! 1. 마우스 클릭시 동작 click() 2. 마우스 더블클릭시 동작 dbclick() 3. 마우스가 움직일때 동작 mousemove() 4. 마우스가 영역을 벗어날때 동작 mouseleave() 5. 마우스가 영역으로 들어올때 동작 mouseover() 이벤트들이 몇가지 더 있지만, 가장 자주 사용되는 5가지라고 보셔도 될듯합니다! 참고들 하세요!

[javascript/jquery] jquery visible element count example / jquery visible 엘리먼트 갯수 구하는 방법 jquery 에서 hide / hidden 상태가 아닌 특정 태그를 확인해야 하는 경우 visible 를 이용하시면 됩니다. 아래와 같이 input 태그가 4개 있고 그중에 하나만 hidden 상태라고 가정하고, 위 input 태그들 중에서 hidden 상태가 아닌 갯수를 구하려면 아래와 같이 visible 를 이용해서 length 를 구하면 됩니다! $("input:visible").length; 위 결과를 출력하면 hidden 인 태그가 1개 hidden 이 아닌 태그가 3개 따라서, 결과는 아래와 같이 3이 출력됩니다! 3 참고들 하세요!

[javascript/jquery] jquery mouseover event example / jquery 마우스오버 이벤트 예제 jquery 에서 특정영역에 마우스를 가져 갔을때 이미지를 교체한다든가 특정 문구를 노출한다든가, 알럿창을 띄우는 등 특정 액션을 취해야 하는 경우가 종종 있습니다. 그때는 아래와 같이 mouseover 이벤트를 이용하시면 됩니다! 예를들어 아래와 같이 id_div 라는 id 를 가지는 div 태그가 있다고 가정하고, 마우스를 위 div 영역으로 옮겼을때 특정 액션을 취하고 싶으면 아래 코드처럼 mouseover 이벤트를 등록하고 취하고자 하는 액션을 작성해 주시면 됩니다! $( document ).ready(function() { $("#id_div").mouseover(f..