jQuery의 serializeArray를 이용한다.



위의 폼을 var arr = $("#listForm").serializeArray()를 호출하면
// 아래와 같은 arr의 형태로 생성된다.
arr = [
    {name : 'test_01', value : '1'}
   ,{name : 'test_02', value : '2'}
   ,{name : 'test_03', value : '3'}
];

그래서 위의 serializeArray 메소드를 이용해서 json형태로 만들어준다.
/**
 * jqGrid
 * desc   : form의 데이터를 json 형태로 변환해 준다.
 * return : 성공시에는 객체(JSON)을 리턴한다. 실패시에는 null을 리턴한다.
 */
jQuery.fn.serializeObject = function() {
	var obj = null;
	try {
		if ( this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) {
			var arr = this.serializeArray();
			if ( arr ) {
				obj = {};
				jQuery.each(arr, function() {
					obj[this.name] = this.value;
				});				
			}//if ( arr ) {
 		}
	}
	catch(e) {alert(e.message);}
	finally  {}
	
	return obj;
};



posted by 뚱2
구글에서 jQuery를 항상 최신으로 유지시켜주는 URL이다.
개발할때 유용할 듯 하다.

* 1.X.X 버전 지원 (jQuery 버전이 업데이트 되면 같이 업데이트 된다.)
경량화 버전 :  https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
일반 버전 : https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js







posted by 뚱2

/**

* POST 방식으로 전송하는 팝업창

* url        : 팝업창 경로

* data       : object, array

* popName    : 팝업창 이름 

* popWidth   : 팝업창 가로 길이 (생략하면 화면 넓이에 맞춰진다.)

* popHeight  : 팝업창 세로 길이 (생략하면 화면 높에에 맞춰진다.)

* popOptions : 팝업창 옵션 (생략하면 기본으로 scrollbars=yes 이다.)

* comment :

*     데이터를 json 형식으로 넘겨도 된다.

*     예) gls.openPostPopup({

*             url     : 경로

*            ,data    : json data

*            ,target  : 이름

*            ,width   : 넓이

*            ,height  : 높이

*            ,options : 옵션

*         });

*     데이터가 필요없는 부분은 json property로 넣지 않아도 된다.    

*/

SEED.openPostPopup = function(obj, data, popName, popWidth, popHeight, popOptions) {

var myPop = null;

try {

var param = null;

// json object이라면

if ( obj && typeof obj == 'object' ) {

param = {

'url'     : SEED.url(obj.url)   || ''

,'data'    : obj.data                 || []

,'target'  : obj.target               || ''

,'width'   : obj.width               || screen.availWith

,'height'  : obj.height               || screen.availHeight

,'options' : obj.options             || 'scrollbars=yes'

};

}

else {

param = {

'url'     : SEED.url(obj)       || ''

,'data'    : data                     || []

,'target'  : popName                 || ''

,'width'   : popWidth                 || screen.availWith

,'height'  : popHeight               || screen.availHeight

,'options' : popOptions               || 'scrollbars=yes'

}; 

}

if ( $.type(param.data) == "object" ) {

param.data = [param.data];

}

//랜덤한 수를 출력

var curDate   = new Date();

var ranNumber = Math.floor(Math.random() * 10000) + 1;

var strId = "";

   strId += param.target;

   strId += "_";    

   strId += (new Date()).getTime();

   strId += "_" + ranNumber;

   

var $popForm = $("<form onSummit='return false;'></form>")

.attr("name"  , strId)

.attr("id"    , strId)

.attr("method", "POST");

if ( $popForm ) {

// 배열 순회

$.each(param.data, function(i, elem) {

// 객체 순회

$.each(elem, function(key, val) { 

       $("<input type='hidden'/>")

       .attr("name" , key)

       .attr("value", val)

       .appendTo($popForm);

});

});//$.each(para.data, function(i, elem) {

$popForm.appendTo(document.body);

   myPop = SEED.openWin("", param.target, null, param.width, param.height, param.options);

   var myForm = $popForm[0];

   myForm.action = param.url;

   myForm.method = "POST";

   myForm.target = param.target;

   

   // 현재 생성한 form을 삭제한다.

   myForm.submit();

   if ( $popForm.size() > 0 ) {

    $popForm.remove();

   }

}//if ( $popForm ) {

}

catch (e) {alert(e.message);}

finally   {}


return myPop;

};


posted by 뚱2
jQuery에서 검색 메소드 입니다.
다양한 검색 메소드들이 있지만 이 세가지 (find, filter, children) 메소드를 헷갈릴때가 있습니다.

filter : 현재 검색된 객체(집합)에서 다시 한번 검색하는 메소드
find : 현재 검색된 객체(집합)의 자손들에서 검색 하는 메소드, 자식의 레벨은 상관없습니다.
children : 현재 검색된 객체(집합)의 직속 자식만 검색하는 메소드

filter는 검색된 결과 객체 집합에서 특정 집합으로 다시 한번 검색 할때 사용합니다.
find 검색된 결과 객체 집합의 하위레벨을 다 뒤져서(자손) 검색 할때 사용 합니다.
children 검색된 결과 객체 집하의 바로 자식들만 뒤져서(자식) 검색 할때 사용합니다.

* 참고
  filter : http://api.jquery.com/filter/
  find  : http://api.jquery.com/find/
  children : http://api.jquery.com/children/
posted by 뚱2



// 추가
$("< OPTION >< /OPTION >")
	.attr("selected", "selected")
	.text("추가")
	.attr("value", "추가")
	.appendTo("select[name='test']");

// 선택
var value = $("select[name='test'] option:selected").val();
var name = $("select[name='test'] option:selected").text();

// 특정 삭제
$("select[name='test'] option[value='추가']").remove();
// 선택 삭제
$("select[name='test'] option:selected").remove();
// 모두 삭제
$("select[name='test'] option").remove();




posted by 뚱2

[jQuery] serialize()

JavaScript/jQuery 2011. 10. 17. 18:13
참고 : http://api.jquery.com/serialize/

폼객체의 엘리먼트들을 데이터 인코딩까지 해서 연결해주는 기능이다.
편한기능
posted by 뚱2