jquery ajax 옵션을 정리해 보고자 한다. 자주 쓰는 옵션들을 포함한 전체를 포스팅 한다. 근데 중간에 내용이 이해가 안되거나 테스트가 안되는 옵션들은 내용을 비워두었으니 참고하기 바란다. 자주 쓰지 않는 옵션들이 생각보다 많네... accepts (default: depends on dataType) Type : PlainObject 키/값 형태이며 해더에 포함한다. 어떤 종류의 응답을 받아들일지 서버에 알려주는 역할을 한다. async (default: true) Type : Boolean 기본적으로 비동기 요청을 하도록 한다. 동기 요청이 필요하면 값을 false로 설정하면 된다. beforeSend Type: Function( jqXHR jqXHR, PlainObject settings )..

ajax를 활용해서 비동기로 페이지 이동 시 뒤로가기를 구현해 보고자 한다. 먼저 비동기로 페이지 이동하는 방법에 대해서는 다음 링크를 참고한다. ajax 화면 동적 전환 javascript history 추가 javascript 에서 history 를 추가하는 방법입니다. 앞서 history 삭제하는 방법은 링크를 참고하세요. history 삭제 javascript history 삭제 / href replace 비교 javascript history 삭제하기 는 불가능하다. 구.. cofs.tistory.com 위 포스팅에서 작성한 화면을 깜빡이지 않고 전환하는 방법에서 일부 소스를 추가했다. html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22..

jquery ajax 를 활용하여 화면을 동적으로 깜빡임 없이 이동하는 방법이다. 포스팅에 앞서 jquery load 를 활용하여 동적 전환 하는 방법은 아래 링크를 참고하면 된다. Jquery load 동적 전환 jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 이번 포스팅은 jquery 를 활용하여 화면이 깜빡이지 않고 전환되는 방법이다. 보통의 페이지에서 이동을 하게되면 전체 페이지를 새로 불러옴으로 인하여 화.. cofs.tistory.com ajax의 dataType 이라는 옵션을 활용하면 화면을 동적으로 바꿔줄 수 있다. dataType 은 서버에서 반환될 때의 데이터 형식을 지정하는 옵션이다. xml, html, ..

javascript 에서 jquery를 활용하여 formdata를 Json으로 변환하는 방법이다. How to convert FormData to JSON ? 방법은 여러가지가 있다. 그 중 가장 심플하다고 생각되는 방식이다. 1 2 3 4 5 6 7 8 var formSerializeArray = $('#form_id').serializeArray(); var object = {}; for (var i = 0; i

jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 이번 포스팅은 jquery 를 활용하여 화면이 깜빡이지 않고 전환되는 방법이다. 보통의 페이지에서 이동을 하게되면 전체 페이지를 새로 불러옴으로 인하여 화면이 깜빡이게 된다. 하지만 특정 영역만 불러와 이동할 페이지로 교체해 준다면 깜빡임 없이 화면전환이 가능하다. 물론 tiles와 같이 활용해도 좋다. 보통 페이지 레이아웃은 위와 같다. 상단에 gnb 영역, 좌측에 lnb 영역, 우측에 contents 영역이 있다. 화면을 깜빡이지 않고 전환한다는 내용은 보통 contents 영역, 즉 내용이 있는 영역만 전환한다고 생각하면 된다. 1 2 3 4 5 6 7 8 9 cs 보통 위와 같이 layout 이 작성된다. 페이지 이동 시 conten..

jquery modal 새로고침, 동적 호출, 멀티 호출 jquery modal 팝업을 사용할 경우 해당 페이지를 호출할 때 기존에 로드해놓은 코드가 계속 보인다. url 을 로드해서 ready 함수를 매번 실행하고 싶으나 이전에 로드해놓은 코드가 show 되어서 ready 함수가 실행되지 않았다. 필자는 modal 을 호출할 때마다 매번 새롭게 url 을 호출하고 싶다. 이 방법을 활용하여 다음과 같은 기능으로 확장할 수 있다. 1. url을 바꿔주면 동적으로 다른 페이지를 modal 로 띄울 수 있다. 2. modal 을 호출할 때마다 reload 또는 refresh 효과를 얻을 수 있다. 다음과 같은 modal html 코드가 있다. 1 2 3 4 5 6 7 8 9 10 11 12 × 닫기 Colo..

드래그 앤 드롭 파일 업로드 jquery 를 활용하여 드래그 앤 드롭 멀티 파일 업로드 기능을 구현해 보자 요즘 홈페이지들을 보면 파일을 업로드 할 때 예전처럼 파일탐색창에서 선택하여 업로드 할수도 있지만 컴퓨터에 있는 파일을 마우스로 드래그해서 브라우저에 드랍하면 파일이 업로드 되는 기능을 자주 만날 수 있다. 구현하는 방식은 여러가지가 있을 거라고 생각이 된다. 본 포스팅에서는 jquery 를 활용하여 드래그 앤 드롭 기능을 구현해 보자. 설명 : jquery 의 드롭 이벤트 dragenter, dragleave, dragover, drop 을 파일이 드롭될 특정 영역(태그)에 설정한다. dragenter : 드래그 요소가 특정 영역에 들어갔을 경우 호출 dragleave : 드래그 요소가 특정 영역..

onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바 생성 이전 포스팅에서 프로그래바(로딩바) 플러그인에 대해서 작성했다. 프로그레스바 플러그인 포스팅으로 이동 이번 포스팅은 이전 포스팅에서 작성한 프로그래스바 플러그인을 활용하여 페이지를 이동할 때마다 보여주려고 한다. 방법에는 여러가지가 있어 보인다. 1. submit, href, replace 등 이벤트가 실행될 때마다 프로그래스바 플러그인 실행 2. 페이지마다 script나 body에 onbeforeunload 이벤트를 활용해서 프로그래스바 플러그인 실행 3. 공통 js 파일에 onbeforeunload 이벤트를 활용하여 프로그래스바 플러그인 실행 방법 등등등... 저 중에서 필자가 선택한 방법은 3번째 방법이다. 상황에 맞게 사용하..

정의되지 않음 또는 null 참조인 'msie' 속성을 가져올 수 없습니다. jquery 버전을 올리다가 위와 같은 오류를 만났다. 감기때문에 컨디션이 안좋아 ㅠㅠ 어쨋든 오류 메시지 중에서 msie 속성이 없다는 것에 중점을 두고 찾아보았다. msie 는 브라우저를 체크할 때 userAgent 에서 IE인지 체크하는 값이다. 물론 IE 11부터는 msie가 사라져 저 단어만으로 체크는 불가능하다. 그럼 msie 속성을 가져올 수 없다는 오류가 발생한 파일을 살펴봣다. jquery-ui-1.8.11.min.js 파일이였다. 여기 자세히 살펴보니 이런 browser.msie 를 사용하고 있었다. 이 녀석이 무엇을 하는 녀석인지 찾아보았다. 검색하자마자 browser.msie 오류 어쩌구 저쩌구 하는 글들이..

jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength input text 태그의 경우에는 maxlength 속성을 이용하여 입력받을 최대 크기를 구할 수 있다. 하지만 maxlength 속성은 한글, 영문, 숫자, 특수문자 등이 고려되지 않았다. 단순하게 문자열의 length 만 가지고 입력을 제한한다. 문자열의 length만 가지고 입력을 제한을 하는 방법은 다음과 같은 문제가 있다. 데이터베이스의 인코딩에 따라 한글, 영문, 숫자, 특수문자 등의 byte 가 다르다. 보통 한글이 2byte 또는 3byte 를 사용한다. 데이터베이스의 컬럼 사이즈가 varchar2(10) 일 경우 영문, 숫자, 특수문자 일부는 10자, 한글은 2byte일 ..