본문 바로가기

Data-attribute to Modal in Bootstrap4 (모달에 데이터 전달하기) Data-attribute to Modal in Bootstrap4 부트스트랩4에서 모달을 보여지게 하는 방법은 몇 가지가 있죠. 그중에서 Button을 누르면 모달이 띄워지는 방법이 있죠. 아래와 같은 코드로 가능합니다. 검색 ... 코드를 잠깐 살펴보면 button을 누르면 data-toggle="modal" data-target="#test_modal"을 통해서 modal이 보여지게 되죠. data-target은 modal div의 id와 일치해야 하고요. 이번 포스팅에서 정리하려는 것은 button에 있는 data-test='aaa' 를 modal로 전달하자 라는 것입니다. 아래와 같은 코드로 가능한데요. show.bs.modal은 https://getbootstrap.com/docs/4.3/co.. 더보기
datatables create example/sample Datatables Create Example datatables 라이브러리를 사용해서 테이블을 생성하는 예시입니다. 라이브러리 추가, trunc 함수 추가 등이 필요하지만 대충 코드 보시면 아실 것 같아서 자세한 내용은 추가하지 않았습니다. var table = $('#targetTable').DataTable({ data: source_data, dom: 'Bfrtip', buttons: [{ extend: 'excelHtml5', text: 'Excel Download', className: 'btn btn-black export-button' } ], columns: [{ title: "description" }, { title: "status" } ], "columnDefs": [{ "width.. 더보기
html select selection for test / jQuery, trigger select를 선택하기 위해서는 아래와 같은 코드로 가능합니다. jQuery를 통해서 trigger('change') 하고 싶은 select의 element를 알아냅니다. trigger('change') 하는데 value가 option_3 인 것을 선택하도록 하는 것입니다. 하나 두울 세엣 네엣 다섯 말로 설명하는 것보다 코드를 보는게 훨씬 이해가 빠른 경우가 많죠. 위에 적어둔 설명글보다 코드를 보시는 것을 추천합니다. 개발 과정에서 어떤 선택들을 잔뜩하고 그 결과를 봐야할 때 테스트를 해야 하는 것이 많은데 전부 다 눌러보기 힘들 때 이벤트에 따라서 다른 것을 선택하는 코드를 작성해야 할 때 등등 에서 사용할 수 있겠습니다. 더보기
자바스크립트 jQuery input enter event javascript로 input에서 엔터키를 눌렀을 때 반응하는 이벤트는 아래와 같이 구현할 수 있습니다. $("#input_id").keyup(function(event) { if (event.keyCode === 13) { console.log('enter! enter!'); } }); input class 던지 id로 jQuery에서 찾고 keyup이라는 함수를 통해서 keyCode의 값이 13이면 처리하라는 코드가 되겠습니다. keyCode 값은 ASCII 코드 값인데요. https://keycode.info/ 사이트에서 직접 키를 눌러서 어떤 keyCode값이 나오는지 확인할 수 있습니다. 더보기
jQuery로 select 된 값 가지고 오기 jQuery를 사용해서 select에서 선택된 값을 가지고 오는 방법은 아래와 같습니다. $('.target-selection').click(function(){ var option_value = $(".target-selection option:selected").val(); var option_text = $(".target-selection option:selected").text(); console.log(option_value ); console.log(option_text ); }); target-selection 이라는 클래스를 가진 select 에서 선택이 이루어지면 option:selected를 활용해서 value값은 val() 로 가지고 오고요. text 값은 text()로 가지고 옵니.. 더보기
javascript - select - focus and change 아래와 같이 생긴 select가 있다고 가정하고요. ... 이 select가 focus, change 될 때 일어나는 이벤트는 아래와 같은 코드로 처리할 수 있습니다. $('.aaa-select').on('focus', function () { console.log('focus event'); }).change(function() { console.log('change event'); }); 이런식의 시나리오를 처리할 수 있을 것 같아요. focus 되면 현재 선택되어 있는 값을 저장합니다. change가 일어나면 어떤 프로세스를 처리하는데 변경에 정상적으로 이루어지면 상관없지만 어떤 이유에서 변경이 이뤄지지 않아야 하면 focus에서 저장된 값을 사용해서 원래대로 돌려버리는 것이죠. 그리고 에러 메세지.. 더보기
jQuery를 활용해서 클래스(class) add / remove 하기 HTML에서 Class는 여러 용도로 사용되죠. CSS를 잘 적용하기 위해서 사용되는 것도 많죠. jQuery를 사용해서 특정 시점에서 Class를 적용하거나 제거할 수 있습니다. 아래와 같은 HTML과 CSS가 존재한다고 가정해보겠습니다. script 부분을 보면 removeClass() 와 addClass()를 확인하실 수 있는데요. 이름에서도 알 수 있듯이 addClass는 특정 클래스를 추가해주는 것이고요.removeClass는 특정 클래스를 삭제하는 역할을 합니다. 실제로 실행해보면 아래와 같은 그림을 보실 수 있겠죠. 한 번에 여러 개의 class를 추가하거나 삭제는 아래 그림을 참고해주세요. 문자열 형태로 여러 클래스를 작성하면 작동합니다. 더보기
html element delete using jQuery jQuery를 통해서 html elements 를 삭제할 수 있습니다. 예로 아래와 같은 link elements가 있다고 가정해볼께요. 0.102.min.css 를 삭제하려면 아래와 같은 javascript를 사용하면 됩니다. $('link[rel=stylesheet][href="http://ngee.tistory.com/depend_v0.102.min.css"]').remove(); 0.103.min.css 를 삭제하려면 아래와 같이 변경해주면 되고요. $('link[rel=stylesheet][href="http://ngee.tistory.com/depend_v0.103.min.css"]').remove(); 코드가 의미하는 것은 elements를 찾아서 remove 함수를 실행하는 것입니다. 더보기
jQuery Ajax with x-api-key AWS Gateway API를 사용해서 Lambda Function을 호출하는 프로세스는 Serverless 환경을 구축하고자 하는 분들에게 매우 유용합니다. 어떤 경우에는 정해진 사용자만 Gateway API를 사용할 수 있도록 해야 하는데 AWS Gateway API의 Key를 설정하면 간단합니다. Key를 설정하면 (꼭 다시 Deploy 해야 함, Deploy 까먹어서 여러 번 시간 낭비함 ㅠ) x-api-key를 header에 같이 보내줘야 합니다. Ajax로 x-api-key를 보낼 때에는 아래와 같이 beforesend에 보내주면 됩니다. $.ajax({ type: "get", url: "https://9d9d9d9d9d9d.execute-api.ap-northeast-2.amazonaws.c.. 더보기
Html data attribute parsing using jQuery data-* attribute는 사용하기에 따라 유용하게 활용할 수 있습니다. 예로 아래와 같은 data-* attribute가 있다고 가정하겠습니다. 2개의 data-* attribute를 설정해봤어요. 하나는 data-type다른 하나는 data-sub-type 입니다. jQuery를 통해서 해당 data-* attribute를 파싱하는 방법은 아래와 같아요. 위 소스로 출력되는 결과는 아래와 같습니다. // AAA var pType = $('.testP').attr("data-type") var pSubType = $('.testP').attr("data-sub-type") console.log(pType); console.log(pSubType); data-* attribute를 하나 더 추가해봤.. 더보기
Javascript / jQuery: 맨 위로 이동하기, 맨 아래로 이동하기 Javascript / jQuery를 통해서 웹 페이지 제일 위로 이동하는 방법은 아래와 같습니다. $("body").scrollTop(0); body만 되는 건 아니겠죠. #나 .을 통해서 특정 id를 가진 거나 클래스를 선택해서 이동할 수 있습니다. 저는 bootstrap modal에 적용했는데 modal이 여러 페이지로 구성되었을 때, 그리고 페이지가 이동할 때 사용했습니다. 제일 마지막으로 이동하는 것은 아래와 같은 방법으로 가능합니다. $("body").scrollTop($(document).height()); 간단하네요 :) 더보기
DRF - Django Rest Delete 403 Error Delete 요청을 Django Rest Framework로 보내는 것에서 헤맸다. 일단 jQuery를 활용하여 Post 요청을 하는 예시를 보면 아래와 같다. jQuery기반의 cookie 라이브러리를 사용하고 있는데 아무튼 위와 같은 소스를 통해 DRF 기반의 restful API에 요청하는 것이 가능했다. 당연히 위와 같은 방법으로 delete도 실험했는데 이상하게 delete는 잘 안되고 아래와 같은 에러가 발생했다.CSRF 에러 !! 해결하기 위해서는 post와는 조금 다르게 ajax 셋팅이 필요했다.CSRF Token 값을 beforeSend를 통해 전달해야한다. post도 위와 같은 방식으로 가능한지 테스트를 해봐야겠다.!!방금해봤다!! 가능하다!!! 그럼 아래 방식으로 통일해서 사용해야겠다.. 더보기
jQuery 기반 BlockUI 라이브러리 이번 포스팅은 jQuery 기반의 BlockUI라는 것을 간단하게 소개하고 활용해보는 내용을 정리... BlockUI에 대한 간단한 기본 정보는 아래와 같아요. BlockUI Github page: https://github.com/malsup/blockui BlockUI Project page: http://jquery.malsup.com/block/ License : MIT, GPL dual license 일단 라이선스가 MIT 또는 GPL로 활용할 수 있네요. 저는 MIT로 사용하려고 합니다. 듀얼 라이선스는 ... 좀 자료를 잘 찾아봐야겠네요. 아무튼 BlockUI project page에 가보면 아.. 이게 머하는건지 확실하게 감이 오실텐데요. 이런 경우를 생각해보면 될 것 같아요. 1. A라는.. 더보기
jQuery 기반 심플하면서 예쁜 Library 추천 이전에 몇 개 작성했던 포스팅을 이어서!! 1. noUiSlider (http://refreshless.com/nouislider/) - 심플하면서 예쁘게 생긴 Slider를 제공합니다. 여러 옵션을 줘서 꽤 원하는데로 쉽게 변경이 가능합니다~ - 이벤트 핸들러도 꽤나 자세히 설명되어 있고, 사용하기 편합니다아! 추천! - 정리했던 포스팅 : http://ngee.tistory.com/598 (http://refreshless.com/nouislider/) 2. iCheck (http://fronteed.com/iCheck/) - 아니 일케 이쁜 Check box, Radio Button이라니!! 너무 좋습니다. - 다양한 색상의 CSS가 미리 준비되어 있어서 간단하게 적용 가능합니다!! 작은 커스터마이.. 더보기
JUI 소개 - 심플하면서 예쁜 jQuery UI JUI는 JENNIFER UI의 약자로 오픈소스로 공개되어 있습니다. 기본적인 정보는 아래에 정리해두었습니다. JUI Document page : http://seogi1004.github.io/jui/ko/ JUI GitHome : https://github.com/seogi1004/jui 라이선스 : MIT Document Page, Github 웹페이지 들어가보시면 알 수 있는데요. 정말 예쁜 jQuery 기반의 UI입니다. 사용방법은 도큐먼트 페이지에 자세히 나와있지만 그래도 정리하는 포스팅이니깐 간단한 예제를 통해 확인해보죠. 1. 일단 다운로드죠. 2. html 페이지에 css를 불러와주세요. - 압축풀고, CSS 파일을 불러와주세요. - 다만 jQuery를 기반으로 하니깐 jQuery를 먼저.. 더보기
jQuery Selectric - 간단 소개, JavaScript, jQuery, Select 요즘 자바스크립트 기반의 라이브러리를 검색 및 활용해야 하는 일이 많네요. jQuery Selectric은 간단하고 편리한 Select를 제공하는 라이브러리입니다. 기본정보는 다음과 같습니다. 홈페이지 주소 : http://lcdsantos.github.io/jQuery-Selectric/index.html 깃허브 주소 : https://github.com/lcdsantos/jQuery-Selectric 데모 : http://lcdsantos.github.io/jQuery-Selectric/demo.html 라이선스 : MIT 일단 라이선스는 MIT 이니깐요. 상용버전에서 사용하셔도 되고, 관련해서 소스코드 공개할 의무는 없습니다. 다만 MIT 라이선스여도, 사용했다면 웹 페이지 어딘가에 해당 라이브러리.. 더보기