개발/js/jQuery (6)
http 응답에서 특정 헤더가 읽어지지 않을때

axios를 이용해서 통신하는 도중 헤더를 읽지 못하는 현상 발생


서버에서 201 created 응답 헤더에 생성된 자원의 Location을 보냈으나 받지 못함

(크롬의 network 탭에서는 보이나 response.headers.location이 undefined로 찍힘)


CORS 이슈로 다음의 헤더만 사용가능

Cache-Control

Content-Language

Content-Type

Expires

Last-Modified

Pragma


추가적인 헤더 사용하기 위해서는 다음과 같이 CORS설정 시 명시해줘야함


@CrossOrigin(origins = ["http://localhost:3000"], exposedHeaders = ["Location"])


  Comments,   0  Trackbacks
댓글 쓰기
datepicker 복사 문제

jquery 달력 사용 시 clone등을 통해 다이나믹하게 컨트롤 할 경우 문제가 많다.

아래처럼 해당 속성을 완벽하게 지워줘야 한다.

destroy후 아래처럼 기존에 남아있는 속성들을 전부 지워줘야 한다.

ID가 있는경우 removeAttr(id)를 이용해 id도 지워주자.


var clone = $(this).clone();

     clone .find('.startDate').siblings('.ui-datepicker-trigger,.ui-datepicker-apply').remove();

     clone

       .removeClass('hasDatepicker')

       .removeData('datepicker')

       .unbind()

 .datepicker();


특히 굵게 처리된 부분을 찾지 못해서 이미지가 두개씩 뜨는 삽질을 할 수도 있다.


2014.04.11 추가

아래처럼 hasClass를 확인하여 완벽하게 datepicker속성을 날려버린 후 재사용하자

       if($(this).hasClass('hasDatepicker') == true) {

            $(this).siblings('.ui-datepicker-trigger,.ui-datepicker-apply').remove();

            $(this)

            .removeAttr('id')

            .removeClass('hasDatepicker')

            .removeData('datepicker')

            .unbind();

       }

  Comments,   0  Trackbacks
댓글 쓰기
JSON 파싱 및 필드 추가 삭제

문자열 -> json -> 문자열


var str = { "result":"0000", "site":"donnert.net" }

var jsonObj = JSON.parse(str);

console.log( JSON.stringify(jsonObj) );


json 신규 객체 생성 후 사용, 속성 삭제


var jsonObj = {};

jsonObj ["result"] = "0000";

jsonObj ["site"] = "donnert.net";


delete jsonObj.site;



  Comments,   0  Trackbacks
댓글 쓰기
이메일 유효성 정규식 검사

엄청 길다.  그대로 사용하는게 맘 편함.


	function isValidEmailAddress(emailAddress) {
	    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
	    return pattern.test(emailAddress);
	};



Live Demo

  Comments,   0  Trackbacks
댓글 쓰기
[jQuery] 인풋 전체 선택

크롬에서는 마우스 up시에 select를 풀어버린다.


아래처럼 셀렉트 후에 mouseup이벤트는 unbind시켜줘야 한다.


$("input[name=price]").focus(function() {
    $(this).select().mouseup(function (e) {
        e.preventDefault();
        $(this).unbind("mouseup");
    });
});


  Comments,   0  Trackbacks
댓글 쓰기
체크박스 전체 선택 해제하기

jquery 구버전(1.9 하위)에서는 아래와 같이 잘 사용중이였다.


	function jsCheckAll() {
		 if ($("#check_all").attr("checked") == true) {                 
		   $("input[name=ccc]").attr("checked", true);             
		 } else {                 
		   $("input[name=ccc]").attr("checked", false);             
		 }       
	}


하지만 뜬금없이 에러 발생 1.9.1에서는 다음과 같이 하자

attr->prop로 변경


	function jsCheckAll() {
		 if ($("#check_all").prop("checked") == true) {                 
		   $("input[name=prod_cd_seq]").prop("checked", true);             
		 } else {                 
		   $("input[name=prod_cd_seq]").prop("checked", false);             
		 }       
	}


  Comments,   0  Trackbacks
댓글 쓰기