환경 = Spring Boot, JQuery, thymeleaf Spring Boot 와 Thymeleaf  환경에서 JQuery Ajax 요청 중 Spring Security 의 CSRF Token을 헤더에 기본적으로설정하기 위해 찾아보다가 ajaxSend 함수와 ajaxSetup() 의 beforeSend 를 보아 정리한다.  .ajaxSend(function(e, xhr, options){ ... })ajaxSend 는 JQuery 에서 Ajax 요청을 보내기 전에 실행시킬 함수를 정의한다.즉, Ajax 이벤트 처리기이다. Ajax 요청을 보내기 전에 매번 ajaxSend() 함수 이벤트를 발생시킨다. Ajax 요청을 서버에 보내기전에 공통적으로 처리해야할 것이 있을 때 사용한다. 사용법// JQu..

개발 환경 : Jquery, datepicker datepicker 를 사용해 시작날짜와 종료날짜를 선택하는데 최대 10일까지 선택할 수 있도록기능 구현이 필요했다.시작 날짜를 선택했을 때 종료날짜와 비교해 10일을 초과했을 경우 시작날짜 기준으로 종료날짜를시작날짜 + 10일로 변경하도록 기능 구현했다. HTML시작날짜 : 종료날짜 :  javascript $('.callflow-date-start').datepicker({ changeMonth: true, changeYear: true, selectOtherMonths: true, showButtonPanel: true, yearRange: "c-50:c+50", dateFormat: "yy-mm-dd", onSelec..

datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다.// html// javascript$('#manager-mst-view-table').DataTable({ searching : true, initComplete: function() { let api = this.api(); $('#manager-mst-view-table thead tr') .clone(true) .addClass('filters') .appendTo('#manager-mst-view-table thead'); //columns 들의 eq(0) 인 head 들만 반복한다. api...

DataTables 를 사용하면서 테이블 column 칸에 데이터 양이 많아 모두 보여줄 수 없을 때sliding 기능을 사용한다. DataTables Columns 설정table = $('#manager-usedHistory-table').DataTable({ dom : "Bfrtip", paging : false, searching : false, buttons : [], language:eval(datatable_lang), processing: true, columns: [ ...이하생략 { data: null, className: "text-center", //defaultContent: ""+..

Jquery 의 DataTables 를 그린 후 첫번째 Row 를 선택해야할 때 아래와 같이 설정하면 된다. .DataTable({}) 을 통해 옵션 및 데이터 설정을 하고 그려준 후 이벤트 설정을 한다.이벤트 설정 밑에 아래와 같이 DataTables ID 값. row().select() 를 통해 첫번째 Row 를 자동선택되도록 한다. TableID.row().select();// HTML// Javascript$(document).ready(function(){ //DataTables 그리기 let dept_table = $('#manager-department-table').DataTable({ .... select: true .... }); // ..

개발환경 : SpringBoot, Jquery 필요한 input 태그 데이터와 다중 이미지 파일을 업로드 해야하는데 에러상황이 많아 정리 겸 작성한다. 아래 이미지와 같이 String 형 데이터와 int 형 데이터, 다중 이미지 파일이 존재한다. 다중 이미지 파일은 아래와 같다. 이제 실제적으로 javascript 코드를 봐보자 Javascript(Jquery) let formData = new FormData(); formData.append('b_title', 'oboTest'); formData.append('server_seq', 'oboTest2'); formData.append('b_content', 'oboTest3'); fileList.forEach((data, index) => { for..