Dev-/java script, jQuery, Ajax 썸네일형 리스트형 .submit()이 작동되지 않을 때 form 에 여러 내요을 담아 전송할 때 Ajax나 화면단 처리를 위해 기본 submit 이벤트를 .preventDefault()로 막아둔 다음,여러가지 로직 처리 후 .submit()로 처리하는 경우가 많은데요. 아무 생각없이 사용하다가 막혔는데, 서버, 클라이언트 콘솔창에 아무것도 안뜨고 실행이 안되었습니다. 검색해도 나오지도 않고,, 여튼 알아보니 submit 역할을 하던 버튼의 id가 "submit"이었기 때문입니다.두시간은 날린거 같은데 허무하네요. 대소문자를 가리지 않기 때문에 submit이라는 id 자체를 쓰면 안될 듯 합니다. jQuery 부모요소, 자식요소 찾기 .closest() 는 부모-자식 관계가 있는 요소에서는 제한없이 사용가능한 줄 알았는데,계속 적용이 되지 않아 헤매던 도중,, 자식 -> 부모로만 찾는다는 사실을 알게되었습니다. 간단히 정리해보겠습니다. - 부모요소 찾기.parent(): 바로 위 부모요소.parents(): 모든 부모요소.closest(): 가장 가까운 부모요소 - 자식요소 찾기.children(): 자식요소 append() vs html() append(): 선택된 요소 내 가장 끝자리에 내용 삽입html(): 선택된 요소 내 모든 코드를 지운 뒤 내용 삽입 Handlebars - 반복적인 부분을 출력하고 싶을 때, 코드를 깔끔하게 목록 형태의 데이터를 받았을 때,,HTML 태그를 포함해, 데이터를 반복적으로 표시해야하는 경우가 있습니다. 예로, DB로부터 List 데이터를 받아 목록 형태로 만들고 싶을 때가 있죠.순수 java script, jQuery만 사용하면,, 코드가 지저분해지기 쉬운데요. 코드를 한번 깔끔하게 만들어봅시다. 위 코드에서 id가 replies인 ul 태그 안에 넣어보겠습니다. 현재는 간단한 상황을 예로 든 것이라 괜찮지만,출력할 정보가 많아질수록 가독성이 떨어지고 지저분한 코드가 만들어집니다. 이를 조금 보완하기 위해,, jQuery에서 템플릿을 제공하는데요,제일 많이 쓰이는 Mustache를 기반으로 작성된 Handlebars 템플릿을 사용해보겠습니다. 템플릿이라는 말 그대로, 공장에서 제품을 생산해내는 .. jQuery 이벤트 위임 현재 존재하는 자손요소뿐만 아니라 나중에(동적으로) 추가될 자손요소에게 이벤트를 위임을 할 수 있습니다.추가될 자손요소의 수가 적다면 일일이 이벤트 처리를 할 수 있지만,,, 그 수가 크고, 정확히 알 수가 없다면 곤란해집니다. 가령.. 새로 추가될 자손요소가 li > a 태그이고, 그 모든 자손요소에 "click"시 alert(11)이라는 함수를 발생시키고 싶다면 아래와 같이 적용할 수 있습니다. 하지만 아래와 같이 한다면, 에러가 뜹니다. 추가로,,,자손 요소가 들어가는 부분은,, 꼭 이벤트를 최종으로 받는 요소일 필요는 없습니다. Ajax의 Content-Type .ajax로 서버에 데이터를 보낼때, header 중 Content-Type 이 존재하는데 이를 설정하지 않았을 땐 default 값으로 application/x-www-form-urlencoded; charset=UTF-8 타입으로 지정됩니다. 따라서 json 형태의 데이터를 주고 싶을 땐, header:{"Content-Type":"application/json"} 을 지정해 주어야 합니다. 그런데 여기서 또 한가지 문제점이 발생하는데, request 안에 포함된 json 형태의 데이터를 받았을 때, 이것을 보통 VO(혹은 DTO)에 다시 담아 사용하는데,, .ajax는 데이터를 문자열화 해주지 않기 때문에 보낼 데이터를 JSON.stringify()로 감싸주어야 합니다. 그렇지 않을 시,, json.. Ajax 구성 Ajax란 비동기적인 애플리케이션을 제작하기 위한 기술입니다. A j a x: Asynchronos(비동기적인) javascript and xml'비동기적인 자바 스크립트와 xml'인데,, 여기서 말하는 '비동기적'이란 의미는클라이언트가 서버에 응답을 요청 보내고 받을때,,,따로 서버의 응답을 받을 필요가 없이 애플리케이션이 계속 돌아간다는 뜻입니다. 페이지를 전체를 리로딩하지 않고,,java script를 이용해현재 페이지에서 필요한 데이터만 골라서 즉각적으로 받을 수 있는 기술이라고 보면 될 듯합니다. 장점 ~ 페이지 이동없이 고속으로 화면을 전환할 수 있다.~ 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.~ 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 단점 .. pagination 버튼 처리 hidden 타입의 form 태그를 삽입하여 설정해줍니다. 기존 a 태그 클릭시 발생하는 이벤트를 취소해주는 event.preventDefault();를 알아두었네요. 이전 1 ··· 3 4 5 6 7 다음