자림이

모바일 브라우저에서스크롤에따라 주소창,하단 탭바등이 동적으로 나왔다가 사라졌다하며 scrollTop이 이상하게 동작할경우 주소창을 고정할수는방법이있어 공유할려구해요.

//해당 컨텐츠 마지막으로 가야하지만 스크롤에따라 주소창,탭에따라 동작이 안될경우
$(".contents").scrollTop($(".contents").prop("scrollTop"));

//창을 고정하면 스크롤에따라 화면이 변화가 없으므로 scrollTop이 원하는곳으로 이동이될거에요
setTimeout(scrollTo,0 ,0, $(document).outerHeight());
$(".contents").scrollTop($(".contents").prop("scrollTop"));

이번에 프로젝트를 하면서 화면 캡처 기능을 만들어야 하는데 script로 간단하게 해주는 라이브러리가 있어 사용하게 되었어요.

js파일은 해당 링크에있어요

https://html2canvas.hertzen.com/

//사용법은 간단해요
//document.querySelector("#capture") 부분에 화면에서 캡처할 element를 넣어주면되요
html2canvas(document.querySelector("#capture")).then(canvas => {
   
	var dataURL = canvas.toDataURL("image/png");
	//저는 dataURL ajax로 서버로 보내어 서버에서 파일로 저장을 했어요
   
});

혹시 예전 버전을 사용해서 캡처 태그들이 깨지면 최신 버전을 적용해서 다시 해보세요.

제가 하던 프로젝트에서 아이폰에서 "SecurityError: The operation is insecure" 에러가 발생하여 원인을 살펴보니

body {
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

이번 프로젝트에서는 variable? 방식으로 css가 되었는데 아이폰에서 저 부분을 컬러 값을 직접 입력했더니 에러 없이 정상작동을 하네요.

Chrome에 opener가 문제가 없는데 IE에서 발생하여 확인한 결과

페이지 -> 팝업호출 -> 다시페이지 호출은 정상적으로 동작을 하는데

페이지 -> 팝업호출 -> 외부페이지 -> 팝업페이지 -> 다시페이지 호출일 경우 IE에서 opener가 undefined발생

window.onload = function(){

		var url = location.href;
		var inputYn= juso.inputYn;

		if(inputYn != "Y"){
			
			document.form.returnUrl.value = url;
			document.form.resultType.value = resultType; // resultType항목 추가(2016.10.06)
			document.form.action="https://www.juso.go.kr/addrlink/addrLinkUrl.do"; // 인터넷망

			document.form.submit();
		}else{
			/** API 서비스 제공항목 확대 (2017.02) **/
			opener.jusoCallBack(JSON.stringify(juso));
			window.close();
		}

}

다른 브라우저에서는 문제가 없는데 IE에서 opener undefined발생

window.onload = function(){

	var url = location.href;
				
	var resultType = "4"; // 도로명주소 검색결과 화면 출력유형, 1 : 도로명, 2 : 도로명+지번, 3 : 도로명+상세건물명, 4 : 도로명+지번+상세건물명
	var inputYn= juso.inputYn;

	if(inputYn != "Y"){

		document.form.confmKey.value = confmKey;
		document.form.returnUrl.value = url;
		document.form.resultType.value = resultType; // resultType항목 추가(2016.10.06)
		document.form.action="https://www.juso.go.kr/addrlink/addrLinkUrl.do"; // 인터넷망
		document.form.submit();
	}else{
		// 수정버전
		if(opener == null || opener == undefined) opener = window.open("", "jusoPopup");

		/** API 서비스 제공항목 확대 (2017.02) **/
		opener.jusoCallBack(JSON.stringify(juso));
		window.open("about:blank", "_self").close();
					
	}

}

www.juso.go.kr/addrlink/devCenterEventBoardDetail.do?regSn=716&noticeType=T&currentPage=4&keyword=&searchType=

Jquery Datepicker를 동적으로 생성을 하면 동작을 안 하는데 동적 생성법을 포스팅해볼게요.

$(document).ready(function(){
	
    function 동적생성(){
    
    	//페이지에 적용된 class를 삭제
    	$(".ui-datepicker-trigger").remove();
        //필요한 Datepicker에 다시 적용
	$("input[name='researchStartDtm'],input[name='researchEndDtm']").removeClass('hasDatepicker').datepicker();
    
    }
    
});

위 코드처럼 기존 class를 삭제를 하고 다시 적용을 시켜주면 정상 작동을 할 수 있습니다.

종종 Jquery each를 사용 중에 break, continue가 필요한 경우가 있는데 그때 사용방법 포스팅해볼게요.

//checkbox체크된 값중에 특정값이 있으면 break를 하고싶을경우
$("input[name='lumpId']:checked").each(function(i,o){

	if ( //조건 ) {

		return false; //break;
        
	}

	formData.push(o.value);

});
//checkbox체크된 값중에 특정값이 있으면 continue를 하고싶을경우
$("input[name='lumpId']:checked").each(function(i,o){

	if ( //조건 ) {

		return true; //continue
        
	}

	formData.push(o.value);

});

each 중에 return false는 break이고 return true는 continue입니다.

오늘은 얼마 전 개발 중에 사용한 Jquery sort를 포스팅해볼게요.

div영역을 직접 정렬을 하려면 코드가 길어지는데 jquery에서 제공하는 sort함수를 사용하면 간단하게 정렬을 할 수 있어요.

코드는 간단하게 작성을 해봤어요.

$("div.process-result").html($('div.process-result div.status-box').sort(sortLiElements));

function sortLiElements(a,b) {

	return parseInt($(b).data('time')) - parseInt($(a).data('time'));

}
            
            
<div class="process-result">
               
	<div class="status-box blue" data-time="20210215171439">
		<p class="title">신청 정보 수정</p>
	</div>
	
 	<div class="status-box blue" data-time="20210215170344">
		<p class="title">신청등록</p>
	</div>
    
</div>

정렬 기준이 되는 값이 필요한데 div태그에 data-time을 사용했어요. sortsortLiElements에서 오름차순 내림차순 정할 수 있어요.

Server로 JSON값을 전달 중에 몇몇 데이터는 삭제 후 전달을 해야 하는 상황이 나와서 기존하던 방식으로 DELETE를 이용하여 삭제를 하였는데 list안에 있는 json들은 -> [{a:"a"},{empty},{c:"c"}] 같이 나와서 length가 3이 되어 삭제가 정상적으로 안 되는 현상이 발생하여 방법을 찾는 중에 jquery에서 grep라는 함수가 있어서 활용하게 되었어요.

// 	$(formData.reqFundBzobInfo.reqFundFarmlandInfoList).each(function(i,o){

// 		if ( o.delYn == "Y" ) {

// 			delete formData.reqFundBzobInfo.reqFundFarmlandInfoList[i];
// 			return true;

// 		}

// 		$(o.reqfabsFarmlandPredlstInfoList).each(function(j,jo){

// 		if ( jo.delYn == "Y" ){

// 			delete formData.reqFundBzobInfo.reqFundFarmlandInfoList[i].reqfabsFarmlandPredlstInfoList[j];

// 		}

// 		});

// 	});

formData.reqFundBzobInfo.reqFundFarmlandInfoList = $.grep(formData.reqFundBzobInfo.reqFundFarmlandInfoList, function (o,i) {

	if ( o.delYn == "Y" ) {
		
        return false;
        
	} else {

		formData.reqFundBzobInfo.reqFundFarmlandInfoList[i].reqfabsFarmlandPredlstInfoList = $.grep(o.reqfabsFarmlandPredlstInfoList,function (jo,j){

          if ( jo.delYn == "Y" ) {

              return false;

          } else {

              return true;

          }

		});

		return true;
	
	}

});

주석 처리부분이 기존에 사용하던 방법으로 진행하다가 안돼서 아래 방법으로 수정을 하였더니 정상 작동이 되었어요.

삭제가 필요할 경우 대상은 return false로하여 값을 삭제하면 돼요. list가 아니고 그냥 Object면 delete [key] 방식으로 지워도 상관이 없을 거예요. 전 list라 안되어 위 방법을 사용을 했어요.

오늘 개발하면서 $(document).on을 사용하였는데 동적으로 늘어나는 태그만큼 이벤트가 발생하여 해결방법을 찾고 포스팅해볼께요.

$(document).on("change","select[name='predlstLclas']",function(){

});

selectbox가 동적으로 늘어나는데 늘어나는 수 만큼 change가 발생하는 현상을 발견하였어요.

해결 방법은 간단해요.

$(document).off().on("change","select[name='predlstLclas']",function(){

});

off를 적용을하면 해당 이벤트만 발생하네요.

이게 이벤트가 대체되는게 아니라 중복이 되어서 생성된 이벤트 만큼 반복을 하게되었네요.

현재 프로젝트에서 Jquery selectmenu를 사용 중에 있는데 페이지를 로드하면서 onchange이벤트를 걸어야 하는 상황이 나왔어 $("#gdb_cd").trigger("change")를 하면 작동을 할 줄 알았는데 작동이 안 되어 찾아봤습니다.

//코드로 실행을하면 trigger가 실행되면서 change이벤트가 발생이되요
$("#gdb_cd").selectmenu("refresh").trigger("selectmenuchange");

덤으로 $("#gdb_cd").val("1") 값을 변경을 하였는데 변화가 없을 때 refresh를 해야 변경이 돼요.

//일반적인 selectbox면 val로 option이 선택이되지만 selectmenu를 사용하게되면 refresh를 해줘야해요
$("#gdb_cd").val("1")
$("#gdb_cd").selectmenu("refresh")

 이런 식으로 selectmenu("refresh")를 해줘야 ui반영이 돼요.