JavaScript29 자식요소 이벤트를 위해 부모요소 이벤트 막는 방법 자식요소 이벤트를 사용하기 위해 부모요소 이벤트를 막는 방법 이처럼 큰 네모박스(article) 을 클릭하면 '일정 상세보기' 페이지로 가게끔 jQuery를 걸어놨지만,큰 네모박스(article) 안에 'X버튼' 또는 '일정 수정하기' 또는 '게시물로 공유하기' 와 같이 자식요소를 클릭하면 그에 맞게 이벤트가 걸려야하는데,jQuery를 잘 잡아도 부모요소의 이벤트인 '일정 상세보기' 페이지로 넘어가더라.이에 대한 해결방법은, 자식요소에 e.stopPropagation(); 사용하기 ! * 사용방법 *1. HTML 내부1234567891011 일정 수정하기 게시물로 공유하기Colored by Color Scriptercs2. jQuery 부분123456789101112131415161718//일정 클릭시 .. 2018. 7. 25. caret.js 와 atwho.js 이용하여 게시물에서 @로 친구리스트 불러오기 (autocomplete 활용) 페이스북이나 인스타그램처럼, 태그(@) 를 이용하여 친구리스트를 댓글에 불러올 수 있도록 하는 기능을 구현했다 !Friend 테이블에서 FriendId 만을 추출하여 JSON 형식으로 만들고, 댓글폼에서 @를 입력하면 Ajax 로 리스트를 불러와 띄워주는 예제다.해당 기능 사용을 위해 caret.js 와 atwho.js 를 같이 사용하였다.Caret.js Git 주소 : https://github.com/ichord/Caret.jsAtwho.js Git 주소 : https://github.com/ichord/At.js해당 예제는 국내 포스팅도 없고 검색 데이터도 별로없었지만 내가 사용할 textarea 에 적용이 가능하고, 사용방법이 편한 점에서 공부하고 적용했다 (뿌듯) * 사용방법 *1. HTML 상.. 2018. 7. 20. Unsupported Media Type (415) 415 Unsupported Media Type 발단 : jsp 에서 post 방식으로 ajax 처리하려고 했는데 해당 오류가 발생했다.원인 : post 방식으로 데이터를 요청할 때 헤더가 있어야 하는데 헤더를 안적었다.해결 : ajax 내 아래구문을 추가하니 해결됨!123456....headers : { "Accept" : "application/json", "Content-Type" : "application/json"},....Colored by Color Scriptercs 2018. 7. 17. [jQuery] 동적으로 추가한 요소에 이벤트 걸기 (event binding) jQuery 동적 메소드를 통해서 DOM 객체에 추가했는데, 그 추가한 요소에 클릭이벤트를 걸으려니 계속 안됐다. .after() .html() .append() .prepend() 등.. 처음엔 jQuery Selector 를 잘못잡은건가 싶었지만 찾아보니 그게 아니었고, 동적으로 추가한 요소는 마우스 액션이 등록되어있지 않기 때문에 마우스 이벤트를 걸어도 아무 반응이 없었던거였다.. 그래서 찾은 해결방법. 당황하지 말고 아래의 'to-be' 로 적용하면 된다 :) // as-is $("#boardContent").on("click", function() { console.log( $(this).attr("id"); ); //-> not working }); // to-be $(document).on(.. 2018. 7. 10. [JavaScript] DB데이터 구글차트 활용하여 그래프화 시키기 💡 구글 개발자센터 참고하러 가기 # DB에 존재하는 데이터를 화면단에 뿌려주는 방법 1) Controller > DB에서 가져온 값을 가공하여 뷰단에 전달 @RequestMapping("/statsUser.do") public String statsUser(Model model) throws Exception{ System.out.println("/statsUser.do"); Map map = userService.getQuitUserList(); //map에 두개가 담겨져 있음 //List user //Map reason Map reason = (Map) map.get("reason"); //데이터 가공 후 전달 String result = ""; Set reasonKeys = reason.keySe.. 2018. 5. 8. 이전 1 2 3 4 5 다음
