jQuery의 submit 이벤트를 가로채 페이지 새로고침 없이 Ajax로 폼을 전송하는 방법이다. event.preventDefault()로 기본 전송을 막고, 서버에 Ajax 사용을 알리는 hidden 필드를 설정한 뒤 폼의 action URL과 serialize() 데이터를 준비한다. 이후 $.get으로 데이터를 보내고 응답받은 HTML 조각을 body에 추가하는 전체 코드를 담고 있다.
//form요소를 찾아서 그의 submit 이벤트를 가로챈다.
$('form').submit(function (event) {
//ajax를 사용하여 폼을 전송시키고자 한다(페이지의 새로고침을 막는다)
event.preventDefault();
//필요하다면, 유효성 검사 코드를 이부분에 추가하도록 한다.
// .....
//이는 ajax 가 사용되었음을 서버측에 알리는 용도이다.
$('input[name='usingAJAX']', this).val('true');
//폼에대한 참조를 저장한다.
var $this = $(this);
//폼요소의 url을 가로챈다.
var url = $this.attr('action');
//전송시킬 폼 데이터를 준비한다.
var dataToSend = $this.serialize();
// 서버측처리이후에 실행되어야 할 콜백함수
var collback = function (dataReseived) {
//폼을 숨긴다(폼에대한 참조를 $this에 저장해 놓았기에 가능)
$this.hide();
//서버로부터 다음과 같은 HTML 조각을 반환 맏을 것이기에 DOM에 이 HTML 조각이 추가된다.
//<div id='result'>Your favorite food is pizza!
// Thanks for telling us!</div>
$('body').append(dataReseived);
};
//수신되는 데이터의 형식(이번예제에서는 html 코드가 수신될 것이라 기대한다)
var tyhpeOfDataToReceive = 'html';
//폼을 전송한 후 데이터의 수신을 기다린다.
$.get(url, dataToSend, collback, tyhpeOfDataToReceive);
});//.submit() 을 닫는다.
까페24 호스팅에서 PHP 작업 시 에러 메시지가 화면에 표시되지 않아 디버깅이 어려운 문제의 해결책을 정리했다. .htaccess에 php_value error_reporting 22527과 php_flag display_errors on을 추가하고, 코드 상단에 ini_set("display_errors", 1)와 error_reporting(E_ALL ^ E_NOTICE)를 넣거나 set_error_handler 클래스를 활용하는 방법을 설명한다.
한 장의 이미지로 좌우가 대칭인 미러 이미지를 만드는 CSS 기법을 소개한다. 기존에 IE에서만 동작하던 필터 방식 대신, 파이어폭스·크롬 등 다중 브라우저에서 지원되는 transform: scaleX(-1) 스타일을 이용하며, 이미지에 적용하는 CSS 정의와 HTML에서 사용하는 예제 코드를 함께 보여준다.
jQuery.BlackAndWhite 플러그인을 이용해 이미지에 흑백 효과를 적용하는 방법을 4단계로 설명한다. jQuery와 플러그인 스크립트를 로드하고, 흑백 처리할 이미지의 래퍼에 bwWrapper 클래스를 지정한 뒤 CSS로 래퍼 스타일을 설정하고, window load 시점에 플러그인을 초기화한다. hoverEffect, intensity, responsive, speed 등 주요 옵션도 소개한다.
4 initialize the plug in on window load (no $(document).ready()) :
$(window).load(function(){
$('.bwWrapper').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
responsive:true,
// this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
intensity:1,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
}
});
});