kasumil의 코딩 공작소

제이쿼리 내 배열 검색 기능. 배열 내용을 join하면 된다. let dataTable = $('#dataTable').DataTable({ responsive: true, order: [[0, 'desc']], }); let checkBoxArr = []; $('#filter .filter').on('change keyup', function () { if(this.checked == true) { checkBoxArr.push(this.value); } else { checkBoxArr = checkBoxArr.filter((el) => { return el !== this.value; }); } dataTable .column(1) .search(checkBoxArr.join("|"), true, ..

내용은 별거 없다. 공식문서 보니까 jquery 라이브러리와 jqueryui 라이브러리 임포트 시켜놓고 적용 하는 것. 내 경우에 좀 고민이 많았던 게 ul li li ul li li li li 이러한 구조로 짜야 했는데, li 하위에 있는 ul 태그가 li를 1개만 갖고 그려진 문제가 있었다. for문 위치를 잘못 잡아 한개 그리고 닫고 한개 그리고 닫고하는 식으로 그렸음... 그러다보니 하위 태그가 이동을 안하는 문제... 이건 내 실수라 별수 없었다 ㅇㅅㅇ 아무튼 결론적으로 구조는 아래와 같다 참조 코드에서 적힌 start는 잡히나 end는 안잡히는 것을 보아 end가 아니라 stop인 듯? 난 update만 필요해서 update로 호출. update를 할 경우마다 이동한 li값에 idx를 넣어두어..

여기로 이동됩니다. 이걸 클릭하면요 내용은 정말 간단하다. function scrollEvent(_params, speed) { let anchor_id = $(_params).attr('data-anchor'); if( !speed ) var speed = 'slow'; var a_tag = $("#"+anchor_id); if(a_tag.length > 0){ $('html, body').animate({ scrollTop: a_tag.offset().top }, speed); } } 원형 코드와 다르게, 나에게 맞게 수정을 진행하였다. 원형 코드 https://web.webmini.net/anchor_tab_scroll 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) - 웹미니 : 웹속의 작..

function handleCredentialResponse(response) { const responsePayload = parseJwt(response.credential); $.ajax({ url: "컨트롤러", data: "token="+ response.credential, type: 'POST', dataType: 'text', headers: { 'X-Requested-With': 'XMLHttpRequest', "content-type": 'application/x-www-form-urlencoded', }, processData: false, }) .done(function(res) { if(res == 'Y') { location.reload(); return; } else { ale..

$("#test").click(()=>{ let dif=$(this).attr('value'); console.log(dif); }); 위 코드의 결과물은 "undefinded"이다. 왜? 라고 생각할텐데 그 이유는 $(this)가 해당 익명함수를 가르키는 것이 아니라 window 객체를 지칭해버린다. 즉, 저 함수 내부를 지칭하는 게 아니라 함수 밖을 지칭해버림. 그렇기에 이를 해결하려면, $("#test").click(function() { let dif=$(this).attr('value'); console.log(dif); }); 화살표 함수를 지우고 익명함수로 바꿔버리자. 그러면 $(this)가 익명 함수를 읽어버린다. console.log찍어보니 bind가 끊어지는 듯? 그래서 그런 듯 싶다.

기본적으로 보통 부트스트랩을 통해서 tab widget을 사용할 것이다. 그러나 만약 다른 곳과 연동하여 원격으로 위젯을 선택할 경우 이를 컨트롤 해야하는 경우가 있다. 임시로 만들어본 샘플 HTML. 하단의 UL 태그가 따로 있을 것이고 동그라미들은 순수 div로 만든 ui이다. 그러면 동그라미 클릭시 어떻게 다른 것을 컨트롤 할 수 있을까? 난 보통 trigger 이벤트나 click()인줄 알았는데, 이게 아니라 tab()명령어로 사용이 가능하다. $('#changetabbutton').click(function(e){ // e.preventDefault(); $('#mytabs a[href="#second"]').tab('show'); }) 'e.preventDefault()'의 경우에는 해당 부분..

js 안에서 $(document).ready(function() {})을 쓰지마라. 말 그대로이다. 이것을 쓰지 말라하는 이유는 js에서 굳이 쓸 필요가 없기때문이다. 이거때문에 쓸데없는 버그를 걸렸기에 그러하다. 필자는 기본적으로 해당 문구를 php 파일 안에서만 $(document).ready(function() {})를 쓰는데, 삭제하기 귀찮아 이걸 그대로 js에다가 가져놨다가, 고생을 했다. 왜냐하면, 해당 부분이 없이쓰면 js 파일자체가 전역변수로 사용되는데, 해당 문구가 있으면 js 안에서 let volt = '볼트'; let obj = { 'fruit': "사과", 'time': "3시"}; $(document).ready(function() { let apple = '사과'; console..

https://kasumil.tistory.com/196 이전편에서 해당 내용을 언급했었다. 하지만, 해당 부분은 완벽하지 않았다. DB값에서 온 것을 바로 넣는 수준이었기때문에 그러하다. 응답 값을 수정하지 못 했으니까! 하지만, 오늘 그 부분을 완벽하게 해결했다. 중간에 완성되지 않은 코딩을 넣어 하는 바람에 시간 낭비를 했다. 생각만해도 다시금 빡이 치는군....(╬▔皿▔)╯ 도대체 작동되지 않는 코드를 왜 블로그에 올리는거야 ┗|｀O′|┛ $('#테이블').DataTable({ order: [ [ 3, "DEC" ] ], ajax: { url: '통신할 대상.php', type: 'GET', data : { 내용. }, dataSrc: '', // 공백 필수 error: function (e) {..

기존에는 Datatable tbody 자체에 for_each함수를 써서 풀어내곤 했는데, ajax 통신으로 풀어내야 하는 경우가 있었다. 그로인해 js로 append나 html을 한 경우 문제가 발생하더라. 테이블 자체에 데이터가 없기에 빈 테이블입니다 라는 경고문과 아니면 10개 내지 50개 이렇게 갯수 출력을 바꾸니 테이블 tbody 데이터가 사라지는 문제가 발생하였다. 그로인해 ajax를 해야 했는데 DataTables: Cannot read property 'length' of undefined 라는 오류를 내뿜더라. 아무튼 해결함. $(document).ready(function() { $('#테이블 id').DataTable({ ajax: { url: '데이터 통신.php', type: 'GE..

https://stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-cal jQuery click function doesn't work after ajax call? The jQuery click function works fine here delete $('.deletelanguage').click(function(){ alert("success"); }... stackoverflow.com 이거 해결하느라 몇시간 날렸다. 시간아까워 죽겠네... 보통은 $('.deletelanguage').click(function(){ alert("success"); }); 요렇게 작동하는데, 간혹 먹통이 되는 경우가 있나..