반응형

jquery 11

[CI4] Jquery sortable 적용하기

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

취업/CodeIgniter 2022.12.30

[CI4]HTML 특정 태그 위치로 스크롤 이동하기.

여기로 이동됩니다. 이걸 클릭하면요 내용은 정말 간단하다. 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 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) - 웹미니 : 웹속의 작..

취업/CodeIgniter 2022.07.11

[JS] prettyPhoto 프리티 포토. 다른 태그 클릭시 이벤트 일으키기

wordpress 라이브러리 같은데, 보통 위의 경우로 구성되어 있다. 하지만 제목을 따로 두는 경우가 있어 그 제목을 클릭시 이벤트를 일으켜야 했다. 제목 설명 특정 url을 div에 박아 두어 해당 부분을 작동되게 해두었는데, 문제는 이벤트 발생이 안된다는 것. 원인은 하단에 있다. $("a[data-gal^='prettyPhoto']")[0].click(); // 위의 내용이 일치하는 것을 찾는것인지 몰랐던 부분의 문제였다. // href로 하여 해당 주소가 맞는 것으로 클릭 이벤트를 호출하니 문제가 해결되었다. 아래처럼 하니 작동이 원활하게 진행되었다 $('클릭 클래스').click(function() { let url = $(this).attr("val"); $(`.css a[href='${ur..

[php] 부트스트랩 tab widget 클릭 이벤트 발생하기.

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

취업/PHP 2021.12.28

[php] datatable export button not showing

JS 파일안에서 사용시 말 그대로 버튼이 출력되지 않는 문제... 원인은 제이쿼리를 쓰면 $document.ready(function() {});을 쓰는데, 이게 감싸있다보니 그런 것. 해당 부분을 제거하면 된다. type price quantity time let data = { symbol: 'coke' }; $('#userhistoryTable').DataTable({ order: [ [ 3, "DEC" ] ], destroy: true, dom: 'Blfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], ajax: { url: 'curl', type: 'GET', data : data, dataSrc: '', error: function (e..

취업/PHP 2021.11.30

[php] js파일 안에서 $(document).ready(function() {})을 쓰지마라.

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..

취업/PHP 2021.11.17

[PHP] DATATABLE AJAX 통신하기2.

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

취업/Datatable 2021.11.03

the content must be served over HTTPS.

php를 쓰는데, 갑자기 이런 에러가 뜬다. 이유는 jquery에서 http://jquery.ui.com을 을 호출 하는데, https://에선 호출을 브라우저가 막는다. 보안을 무력화 하는 방법도 있지만, 그냥 https://jquery.ui.com 로 바꿔주자. jquery도 클라우드 플래어등을 보면 http://에서 https://로 바뀌어서 나오고 있기에 그걸 넣어주면 된다. 개발용 서버에서 모르다가 실서버에서 발견된 문제. 개발용이 http://라서 해당 문제를 감지하지 못하다가 실서버 https://에서 적용 후 알게되었다.

취업/PHP 2021.06.25

[php] 제이쿼리 프로그레스바 실시간으로 변경하기

프로그레스바의 경우 그냥 제이쿼리 load함수로 작동하지 않는다. 그냥 value값만 변경해주면 된다. 이를 모르고 계속 시도하면서 시간낭비를 했다. $("#div의 아이디").load(location.href+" #해당 div의 id>*",""); 위 내용을 통해서 진행했다. 하지만, 결국 작동안되는 것을 알게되어 해당 기능을 구현하였다. 나의 경우 특정 값을 나눈 숫자를 뽑아와야 했는데, $per = ($특정값->분자 / $특정값->분모) * 100; echo number_format($per, 2); 위 처럼 해줘야해서 이를 어떻게 하나 고민하다가. 특정 태그를 만들어 해당 값을 저장하고 해당 값을 가져오는 방식으로 해결했다. ; setInterval(function () { let vl = Num..

취업/PHP 2021.06.22
728x90