개발자.. 너란놈..

[2021.04.23]
※XML 데이터를 받아오면 데이터를 파싱해서 가져와야 합니다.
<부모이름>
<자식></자식>
<자식></자식>
<자식></자식>
</부모이름>

이런식의 XML이 있을 경우 부모 이름을 먼저 가져온 다음 반복문으로 나머지 자식 데이터를 가져와야 합니다.

EX)

function fnXmlParsing(vXML){

	//AUMEL
	console.log($(vXML).find('XML부모이름').text());

	//alert($(vXML).find('동일한 부모 이름').length);
	//여러개
	$(vXML).find('동일한 부모 이름').each(function(){ // Jquery 반복문인 each를 사용 하였습니다.
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
		console.log($(this).find("xml 자식 이름").text());
	});
}

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

처음에 생성된 fullcalendar는 삭제하고, 재 생성 해주는 것으로 다시 그려줄 수 있습니다.

//기존 FullCalendar 삭제
$('#calendar').fullCalendar('destroy'); //달력 삭제

//FullCalendar 달력 재 생성
$('#calendar').fullCalendar({  // 달력 재 생성
    height: 700,
    header: {
      //center: 'prev,title,next', 여기에 select 값을 보내서 달력 이동 할 수 있게.
      left: null,
      center: 'title',
      right: null
    },
    defaultDate: "YYYYMMDD", //20200101 숫자가 들어가야됩니다. 
    editable: true,
    eventLimit: true,
    monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
    dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
    buttonText: {
      today: "오늘",
      month: "월별",
      week: "주별",
      day: "일별"
	}
});

[2021.05.07][2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

먼저 FullCanlendar는 처음에 생성 될 때 옵션 값들을 넣어서 설정하는 것으로 달력을 html 해서 그려줍니다.

저는 Cell 클릭시 새로운 영역을 보여주기를 원했고, 설정에서는 어떻게 사용해야 되는지를 알 수 없어서 API를 뜯었습니다.

DayTableMixin.prototype.renderBgCellHtml로 api를 검색하여 Cell이 그려질 때 마다 Onclick 이벤트의 함수를 넣어서 사용 할 수 있게 하였습니다.

DayTableMixin.prototype.renderBgCellHtml = function (date, otherAttrs) {
        var t = this;
        var view = t.view;
        var isDateValid = t.dateProfile.activeUnzonedRange.containsDate(date); 
        var classes = t.getDayClasses(date);
        classes.unshift('fc-day', view.calendar.theme.getClass('widgetContent'));
        
        //※ td에 Onclick 이벤트를 주었습니다.
        return '<td class="' + classes.join(' ') + '" onclic="Test()"  ' + 
            (isDateValid ?
                ' data-date="' + date.format('YYYY-MM-DD') + '"' : 
                '') +
            (otherAttrs ?
                ' ' + otherAttrs :
                '') +
            '>' +         
			'</td>';
    };

td의 onclick 이벤트를 주어서 클릭 할 때마다 원하는 함수를 사용 할 수 있게 만들었습니다.

name이나 class로 데이터를 넣는다면 아래와 같이 이벤트를 할 수 있을 것 같습니다. (이것은 해보지는 않았습니다.)

※새롭게 생성되는 html일 경우 아래와 같이 사용 하여야 이벤트를 잡을 수 있습니다.

$(document).on("click","생성된 클래스 or 네임",function () {
	//소스 코딩
});

질문이 있으시면 댓글로 남겨주세요~

[2021.05.07]

jquery autocomplete를 가져와서 사용 하였습니다.

샘플 소스는 아래의 링크를 통해서 보실 수 있습니다.

jqueryui.com/autocomplete/

※필수적으로 필요한 CSS와 Js가 있습니다.

Jquery 기반으로 되어있기 떄문에 Jquery가 필요하고 아래 CSS와 js를 필수적으로 넣어야 됩니다.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

가능하면 소스파일을 따로 다운 받아서 사용하시기를 추천 드립니다. 

아래는 샘플입니다. 

var vJsonData = [
		{ label: "Test", value: "Test" }, { label: "Test1", value: "Test1" },{ label: "Test2", value: "Test2" },{ label: "Test3", value: "Test3" }
	];
$("#ID").autocomplete({ //input ID를 넣어주세요.
	source: vJsonData,
	open: function (event, ui) {
		$(this).autocomplete("widget").css({
			"width": 100 //width 조절
		});
	},
	minLength: 0,
	autoFocus: true,
	focus: function (event, ui) {
		return false; //클릭 시 이상한 것이 클릭 되면 추가해주세요. 
	},
	select: function (event, ui) { //autocomplete에서 선택 시
		//ui.item.label vJsonData의 label 데이터
		//ui.item.value vJsonData의 value 데이터
		return false;
	}
}).bind('focus', function () { //포커스가 되었을 때. 자동완성 데이터 전부 보여주고 싶을 때 이 부분을 넣어주세요. 		
	if (!$(this).val().trim())
		$(this).keydown();
});

[2021.05.07]

Input 박스에 X 표시를 넣는 방법 입니다.

X 표시를 넣었다고 해서 데이터가 삭제되거나 그러지는 않습니다.

HTML

<input id="TEST_ID" class="input_FontSize form-control form-control-sm " autocomplete="off" type="text" />
<span class="searchclear" style="display:none">X</span>

CSS

.TEST_ID[type=text]:-ms-clear{display: none;}
.searchclear {position: absolute;right: 6px;top: 7px;bottom: 15px;width: 10px;height: 14px;margin: auto;font-size: 15px;cursor: pointer;color: #ccc;background-color: #fff;}

JavaScript (Jquery)

$(document).on("keyup",".searchclear",function () {
	$(".searchclear").toggle(Boolean($(this).val())); //영역 
});

[2021.05.07]

YYYYMMDD 데이터를 넣어주면 YYYY-MM-DD 형식으로 변경 시켜 줍니다.

//YYYYMMDDD => YYYY-MM-DD
function fnSetYYYYMMDD(vDate){
	var vformat = String(vDate);  (vCount String형변환)
	vformat = vformat.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'); 
	
	return vformat
}

[2021.05.07]
Success의 데이터의 return의 결과를 보내고 싶을 때.
동기식으로 꼭 설정을 바꿔주고 보내야 됩니다.


꼭 async를 false로 해주고
return은 밖으로 빼 줘야지 defined가 나오지 않는다.

간략요약
비동기 , 동기 식의 데이터를 제대로 알지 못하였을 때 작성한 글인 것 같다.
동기식일때 async를 해두면 전체적으로 데이터를 처리하고나서 success를 타고 데이터가 넘어감.
비동기식일때는 async false로 두면 전체적으로 데이터를 전부 다 체크하고 success까지 체크한 다음에 로직으로 넘어감.
결국 return을 함수내에서 쓰려면 비동기식으로 무조건 써야되고 아니면 동기식으로 쓰고 return을 success 안에다가 넣아야 된다.

이제는 너무 잘 아는 ajax.. 그래도 모르는 기능들이 많겠지

$.ajax
    ({
        type: "GET",
        url: URL, 
        async: false, //동기식 , 비동기식 설정
        success: function (result) {					
            //값 없을 시
            if (result.MAIN.length == "0") {
                vResult = false;
            }
            else {
                vResult = true;
            }
        },
        error: function (xhr,status,error) {
            alert("[Error]"+error);
            return;
        }
    }); //end ajax

    return vResult; //아작스 밖
};

간략 요약

패스워드 , 패스워드 확인 데이터가 같은지 확인하는 로직으로 알고 만들었습니다.

6자리 이하 , 데이터가 같은지 필요하여 만들었습니다. 

function fnPwCompare(value1, value2) {

    var vPw1 = value1;
    var vPw2 = value2;

    //공백시 타지않게
    if (vPw1 != "" && vPw2 != "") {
        if (vPw1 != vPw2) {
            alert("비밀번호가 같지 않습니다.");
        } else if (vPw1 == vPw2 && vPw2.length < 7) {
            //같으니까 Off
            alert("비밀번호가 6자리 이하 입니다.");
        } else if (vPw1 == vPw2 && 7 < vPw2.length) {
            //에러가 있으면서 보더도 바뀔수도있으니까
            alert("성공!");
        }      
    }else{
		alert("비밀번호를 입력 해 주세요.");
	}		
};