Category Archives: jQuery

jQuery 로 textarea를 참조할 때 text() 함수의 함정에 대해…

By | 10월 14, 2019

최초 textarea 에 jQuery로 값을 셋팅할 때, $textarea.text(‘AAA’); 의 형태로 값이 잘 셋팅되었기 때문에, 값을 불러올 때도 $textarea.text(); 함수를 사용했는데, 아무리 해도 사용자가 편집한 값을 얻어오지 못하고, 초기에 셋팅한 값만 얻어오는 것이었다. 그래서 삽질을 좀 하다가…   <input /> 처림 .val() 함수를 사용하여 사용자가 편집한 최종 결과 문자열을 얻을 수 있었다.      

jQuery ajax 로 파라미터를 전달할 때 사용하는 $.param() 함수의 이상동작에 대하여

By | 2월 23, 2015

javascript object를 query string으로 변환해 주는 jQuery의 $.param() 함수 사용중, 값이 배열인 데이터를 query string으로 변환할 때 파라미터명 뒤에 “[]” 문자열이 붙는 현상이 있었다. 이 때, $.param() 함수의 두 번째 인수로 true 값을 주니 이 현상을 해결할 수 있었다. (ex:  var qryStr = $.param(jsonObj, true); )  

jQuery Deffered 에 관한 개념 정리

By | 10월 21, 2014

      * Promise 객체 – Promise 객체는 $o.promise()로 생성하거나 $.when()의 인수로 넣어질 경우 생성된다. – Promise 객체가 되면 객체에서 일어나는 일들을 모니터링하여, 이벤트가 종료되면 done()을 호출한다. (ex: fadeOut())                                                  

jQuery에서 엘리먼트에 바인딩된 이벤트 조회하기

By | 8월 8, 2014

    //이벤트 조회(추출) var events = $._data($(‘#div1’)[0], ‘events’);   //바인딩된 이벤트 해제하기 $(‘#div1’).unbind(‘click’); //click 이벤트 해제     * 참고 jQuery를 사용하여 이벤트를 조회하는 것이나, 아니면 이벤트를 해제하는 것이나, 모두 jQuery를 통하여 바인딩된 이벤트만 조회/해제할 수가 있다. html 코드에 직접 등록한 이벤트의 경우에는 조회도 해제도 불가한 것으로 보인다. 그렇기 때문에 이벤트를 바인딩할 때는 나중을… Read More »

jQuery UI dialog 를 닫을 때, cannot call methods on dialog prior to initialization; attempted to call method 'close 에러가 발생하는 경우

By | 7월 8, 2014

이 케이스에 대해서 인터넷에 여러가지 말들이 많이 있지만, 내 경우에는,  이미 기존 페이지에 include 되어 있던 javascript 라이브러리 들이, Dialog를 띄우면서 또 한 번 같은 document 내에 로딩되면서, Dialog를 생성했던 javascript context가 사라져 버린 경우였었다.   결국 dialog 내에 로딩되는 페이지에서 javascript 라이브러리가 include 되는 부분을 모두 제거했더니, Dialog도 잘 닫히고, 아무 문제가 없었다.  … Read More »

IE7에서 다른 문서(document)의 객체간에 jQuery의 append()를 사용했을 경우의 스크립트 에러에 대하여

By | 3월 6, 2013

* 개요    이 에러는 오직 IE7에서만 발생하는 에러이다.   서로 다른 문서(ex: 다른 프레임)의 객체간에 jQuery의 append()를 사용했을 경우    스크립트 에러가 발생하는 것이다. * 소스 (오류 상황)    – $(‘#mainBox’, mainFrameDoc).append( $(‘#topBox’, topFrameDoc).children().clone() ); * 해결    – 원인을 정확히 파악한 근본적인 해결책은 아니지만 workaround로서 innerHTML로 처리함.      (innerHTML의 경우 1 depth 아래로 들어가는 것에 주의한다.)… Read More »

jQuery TreeView 플러그인 사용시, IE7 (혹은 호환성모드)에서 트리가 깨지는 경우

By | 2월 13, 2013

※ 완벽한 해결책은 아니지만, 다음의 방법으로 일단 깨지는 것을 막을 수 있다. * 트리가 만들어지는 페이지에 다음의 스타일 추가      <style type=”text/css”>       ul, li { zoom: 1 }   </style> * 완벽하지 않다고 한 이유는, 트리의 2depth 이상에서 트리를 펼칠 때 트리가 약간 (1픽셀 정도) 위로   움직이는 현상이 있었기 때문이다. (IE7 혹은 호환성보기에서만)

jQuery UI의 dialog 위젯으로 로딩이미지 생성시, 오페라 브라우저 (opera)에서 빨간 테두리가 생기는 현상

By | 1월 31, 2013

* 오페라 브라우저는 포커스가 간 엘리먼트에 빨간 테두리를 쳐 버리는 특징이 있는 것 같다.   검색을 조금 해 보니 이것은 버그도 아니고 브라우저 설계시 그렇게 되도록 만든 것 같다.   jQuery UI의 dialog 위젯으로 로딩이미지를 만들었을 경우, 로딩이미지가 show() 될 때   로딩이미지의 부모 엘리먼트에 포커스가 가서 빨간 테두리가 그려지는 문제가 간혹 생겼는데,   그래서 부모 엘리먼트의 tabindex 속성… Read More »

body 엘리먼트를 display:none 처리한 후 jQuery의 show() 함수를 호출했을 때 파이어폭스(FireFox)에서 화면이 나타나지 않는 현상

By | 10월 20, 2012

* 원인    – body의 기본 display 속성은 block인데,     FireFox 에서는 show()를 해도 display속성이 block이 되지 않는갑다.      * 해결    – display 속성을 block으로 만든 후 show를 해 주었다.   – $(‘body’).css(‘display’, ‘block’).show();      * 참고 사항    – display:none이 아닌 $(‘body’).hide()를 사용해서 숨겼을 경우에는 별 문제가 없었다.    – jQuery 1.8.x 에서는… Read More »

공백 등 특수문자가 들어있는 id를 사용하여 jQuery 객체를 생성할 때 어떻게 하면 될까?

By | 8월 24, 2012

답1) 엘리먼트 id에는 특수 문자를 쓰면 안된다 >, < !!! 답2) 하지만 어쩔 수 없는 경우란 게 있잖아… (-,.   –  ) …       => attribute명으로 참조할 경우 그 안에서 문자열을 따옴표로 감쌀 수 있기 때문에 참조가 가능하다!!          (예: $(“div[id=’content Module’]” )            => 위와 같이 쓰면… Read More »

jQuery의 $obj.data() 메서드 사용 예시

By | 8월 14, 2012

$(‘#reqTable’).data(‘A’, ‘111’); //데이터 셋팅 $(‘#reqTable’).data(‘B’, ‘222’); $(‘#reqTable’).data(‘C’, ‘333’); $(‘#reqTable’).removeData(‘A’);  //특정 데이터 삭제        $(‘#reqTable’).data(‘B’)); //특정 데이터 리턴        $(‘#reqTable’).removeData(); //전체 데이터 삭제    $(‘#reqTable’).data()); //전체 데이터 리턴

jQuery 이벤트 스로틀링 플러그인 (event throttling)

By | 8월 8, 2012

http://benalman.com/projects/jquery-throttle-debounce-plugin/  – ajax call 처리 등을 위해서 : debounce() 사용- 리사이즈(resize), 스크롤링(scrolling) 처리 등을 위해서 : throttle() 사용- 해당 함수들을 실행하면 함수가 실행되는 것이 아니라 함수 자체를 리턴함에 유의한다.

jQuery UI의 버튼()이 있는 페이지에서 input text에 엔터키를 입력했을 때 form 내의 첫번째 버튼이 클릭되어 함수가 실행되는 경우

By | 7월 23, 2012

* 현상    form 안에 조회조건 input text와 jQuery-UI의 button이 있다.    (form은 onsubmit=”return false” 처리되어 있는 상태임)   input text 에 조회조건을 입력하고 엔터키를 입력하니 button에 바인딩된 함수가 실행되었다.-.-;;   keycode == 13 이런 이벤트바인딩을 해 준 것도 아닌데 어떻게 이렇게 된단 말인가!! * 원인규명    원인을 찾기 힘들었던 이유는 form에 이미 return false가 되어 있기 때문이었다.   위… Read More »

jQuery ajax 호출시 http헤더(header)에 사용자정의 값을 셋팅하는 방법

By | 4월 3, 2012

1. 정적 셋팅     jQuery ajax option의 headers 속성에 {key:value} javascript object를 정의한다. 2. 동적 셋팅     jQuery ajax option으로 beforeSend() 이벤트 핸들러를 정의하고 그 내용에     setRequestHeader(key, value) 함수를 사용하여 원하는 header 값을 설정한다.    이 설정은 정적 셋팅을 오버라이딩한다.

IE에서 jQuery text(arg) 함수 사용시 테이블(table) 렌더링 오류(불필요한 선 생성)가 날 경우

By | 12월 27, 2011

* 증상     테이블의 특정 TD에 jQuery의 text(arg) 함수를 사용하여 값을 삽입하는데,     테이블의 셀을 가로지르는 불필요한 선들이 불규칙하게 생성되었다.     (아래 그림에서 원래 이중실선이 아닌데 아래와 같이 렌더링 되었음)        오직 IE 에서만 이 문제가 발생한다. (IE 진짜.. 어후 그냥 -_-+…) * 원인     jQuery selector 의 잘못된 사용… Read More »